A professional and interactive meme generator application built with React and Vite. This project allows users to create custom memes by selecting templates, adding text, and manipulating elements directly on the canvas.
- Dynamic Meme Fetching: Automatically fetches popular meme templates from the Imgflip API.
- Custom Text Addition: Add multiple text elements to your meme.
- Interactive Canvas:
- Drag & Drop: Easily position text anywhere on the meme.
- Delete Functionality: Drag text to the trash icon to remove it.
- Download: Generate and download your custom meme as a PNG file.
- Responsive Design: Built with Tailwind CSS for a modern and responsive user interface.
- Frontend Framework: React
- Build Tool: Vite
- Styling: Tailwind CSS
Follow these steps to set up the project locally on your machine.
Make sure you have Node.js installed on your system.
-
Clone the repository (if applicable) or navigate to the project directory.
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open the app: Open your browser and navigate to the URL shown in the terminal (usually
http://localhost:5173).
- Select a Meme: The app loads with a default meme. Click "Choose Another Image" to cycle through available templates.
- Add Text: Type your desired text in the input box and press Enter.
- Position Text: Click and drag the text on the image to position it perfectly.
- Delete Text: Drag any unwanted text to the Trash Icon that appears below the canvas.
- Download: Click "Generate Meme & Download Meme" to save your creation.
src/App.jsx: Main application logic, including state management and canvas rendering.src/components: (If applicable) Reusable UI components.src/assets: Static assets.
Note
This project is still in development and needs more improvement in creating more powerful and customizable features.