# 🖼 Meme Generator

A fun React-based web application that allows users to create customized memes by adding their own text to randomly selected images fetched from the Imgflip API.

## ✨ Features

- 🎲 Fetches and displays a random meme image
- 📝 Input fields for adding top and bottom meme text
- 🔁 Dynamically updates meme image and overlay text
- ⚛️ Built using React with functional components and hooks (`useState`, `useEffect`)

## 🧰 Tech Stack

- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [Imgflip API](https://api.imgflip.com/get_memes)
- JavaScript (ES6+)
- CSS (with custom styles and Google Fonts)

## 📁 Project Structure

meme-generator/ ├── components/ │ ├── Header.jsx # Header with logo and title │ └── Main.jsx # Main meme generator UI ├── src/ │ ├── App.jsx # Root React component │ ├── main.jsx # Entry point using ReactDOM │ ├── index.css # Global styles │ └── App.css # Additional styling (optional) ├── public/ ├── index.html # Base HTML file ├── vite.config.js # Vite configuration ├── eslint.config.js # ESLint setup ├── README.md # You're reading it!

## 🚀 Getting Started

### 1. Clone the repository

```bash
git clone https://github.com/yourusername/meme-generator.git
cd meme-generator

npm install

npm run dev

Visit: http://localhost:5173

1. On initial load, the app fetches a list of meme templates from the Imgflip API.
2. When the "Get a new meme image 🖼" button is clicked, a random meme image is selected.
3. Users can enter top and bottom text which is overlaid on the meme image.
4. Everything updates in real time with React state.

Endpoint: https://api.imgflip.com/get_memes

Returns an array of meme objects, each with:

• id
• name
• url
• width
• height

Pull requests are welcome! Please make sure to:

• Follow the existing code style
• Use meaningful commit messages
• Test your changes before submitting