Meme Generator

A fun and interactive React-based meme generator that lets you create custom memes with top and bottom text overlays.

Features

• Custom Text Input: Add your own top and bottom text to memes
• Meme Library: Fetches a collection of popular meme templates from the Imgflip API
• Real-time Preview: See your text changes instantly on the meme image
• Responsive Design: Works on desktop and mobile devices

How It Works

1. Text Input: Enter your desired top and bottom text in the input fields
2. Meme Selection: Click "Get a new meme image" to randomly select from hundreds of popular meme templates
3. Preview: Your custom text appears overlaid on the selected meme image
4. Customization: Edit the text as needed and watch the preview update in real-time

The app fetches meme templates from the Imgflip API and stores them locally for quick access. Each time you click the button, a random meme template is selected and displayed with your custom text.

Technologies Used

• React 19: Modern React with hooks for state management
• Vite: Fast build tool and development server
• Imgflip API: Provides access to a large collection of meme templates
• CSS: Custom styling for the meme generator interface

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd meme-generator

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the project for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint for code quality checks

Project Structure

meme-generator/
├── public/
│   └── images/          # Static images (troll face, meme templates)
├── src/
│   ├── components/
│   │   ├── Header.jsx   # App header with title and logo
│   │   └── main.jsx     # Main meme generator interface
│   ├── App.jsx          # Root component
│   ├── index.css        # Global styles
│   └── index.jsx        # App entry point
├── index.html           # HTML template
├── package.json         # Project dependencies and scripts
└── eslint.config.js     # ESLint configuration

API Usage

This app uses the Imgflip API to fetch meme templates. The API provides:

• A list of popular meme templates
• High-quality images ready for text overlay
• No API key required for basic usage

Contributing

Feel free to submit issues and enhancement requests!

License

This project is for educational purposes.