Meme Generator

Summary

• This project is a clone of meme generator of imageflip. It uses the API of imageflip to have the meme images and randomly render one image once page loaded.

Features

• can drag and drop text boxes on the meme images to position them.

• can resize the texts boxes

• can type your meme text

• can change the color of the text and text shadow or outline

• can change the font family of the text boxes

• can make the text ALL CAPS, bold or italic

• can select text shadow, outline or none and change their sizes.

• can change the font size

• can change vertical and horizontal alignment of the text in the text boxes.

• can change the opacity of the text

• can download the generated meme.

Tech Stack and Libraries

• Next.js 13 app router and React 18, no need to use Next.js to be honest :)

• Shadcn for styling

• Framer Motion for dragging and dropping

• Lucide Icons for icons

Here's a sneak peek of the project.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.