Meme Generator 🎭

A simple meme generator built with React, Vite, React Router, and Tailwind CSS.

Users can browse meme templates, select a template, add custom captions, position them anywhere on the image, and create memes in seconds.

---

Features

• Browse from multiple meme templates
• Select a template and open the editor
• Add custom text captions
• Live caption preview while typing
• Move captions anywhere on the image
• Lock and unlock caption position with a click
• Add multiple captions to a single meme
• Clear all captions and reset the editor
• Responsive and modern UI
• Navigation using React Router

---

Tech Stack

• React
• Vite
• React Router DOM
• Tailwind CSS

---

Project Structure

src/
│
├── Components/
│   ├── Home.jsx
│   ├── Template.jsx
│   ├── Caption.jsx
│   ├── Heading.jsx
│   └── Footer.jsx
│
├── App.jsx
└── main.jsx

---

Usage

1. Click Select from given Templates.
2. Choose a meme template.
3. Enter text in the input field.
4. Move the caption to the desired location.
5. Click Add Text to save the caption.
6. Repeat to add more captions.
7. Use Clear to reset the editor.

---

Learning Outcomes

This project helped me practice:

• React state management with useState
• Component communication through props
• React Router navigation
• Event handling
• Dynamic rendering with map()
• Tailwind CSS styling
• Building interactive user interfaces

---

Author

Varun

GitHub: https://github.com/varunn29