🎭 React Meme Generator

Create hilarious memes with ease! A modern React application for generating and downloading custom memes.

🌐 Live Demo

🚀 Try the Meme Generator - Create your own memes instantly!

✨ Features

• 🖼️ Random Meme Templates - Access hundreds of popular meme templates from ImgFlip API
• ✏️ Custom Text - Add your own top and bottom text to any meme
• 📱 Responsive Design - Works perfectly on desktop and mobile devices
• 💾 High-Quality Downloads - Download your memes as PNG files with transparent backgrounds
• ⚡ Fast & Modern - Built with React 19 and Vite for optimal performance
• 🎨 Professional Styling - Clean, modern UI with gradient backgrounds
• 🔧 Configurable - Easy-to-modify configuration for API settings and download options
• 🛡️ Error Handling - Robust error handling with user-friendly messages

🚀 Quick Start

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/scottfully/meme-generator-react.git
   cd meme-generator-react

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to the URL given by vite to see the meme generator in action! 🎉

🎮 How to Use

1. Generate a Random Meme 📸

   • Click "Get a new meme image 🖼" to load a random meme template

2. Add Your Text ✍️

   • Enter your custom text in the "Top Text" and "Bottom Text" fields
   • Text updates in real-time on the meme

3. Download Your Creation 💾

   • Click "Download Meme" to save your meme to an image file

⚙️ Configuration

The app uses a centralized configuration system located in config/memeConfig.js. You can customize various aspects of the application:

🔧 API Configuration

export const API_CONFIG = {
    memeApiUrl: "https://api.imgflip.com/get_memes"
}

🖼️ Default Meme Settings

export const DEFAULT_MEME = {
    topText: "One does not simply",
    bottomText: "Walk into Mordor",
    data: {
        // Default meme template data
    }
}

📥 Download Configuration

export const DOWNLOAD_CONFIG = {
    defaultFilename: "meme",
    fileFormat: "png",
    quality: 0.9,
    canvasOptions: {
        backgroundColor: null,  // Transparent background
        useCORS: true,
        allowTaint: true,
        scale: 2,              // Higher resolution
        logging: false
    }
}

🛠️ Customization Options

• Change default text: Modify DEFAULT_MEME.topText and DEFAULT_MEME.bottomText
• Adjust download quality: Change DOWNLOAD_CONFIG.quality (0.1 to 1.0)
• Modify filename: Update DOWNLOAD_CONFIG.defaultFilename
• API endpoint: Replace API_CONFIG.memeApiUrl with a different meme API

🛠️ Built With

• React 19 - UI library with latest features
• Vite - Fast build tool and dev server
• html2canvas - Screenshot library for downloads
• ImgFlip API - Meme template provider

📜 Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm start        # Start development server (alias)

🎨 Styling

The app uses modern CSS with:

• Flexbox and CSS Grid layouts
• CSS custom properties for theming
• Responsive design principles
• Gradient backgrounds
• Professional typography with Karla font

🙏 Acknowledgments

• Adapted from the example Scrimba React course
  • Refactored code to use components, config files, default memes and more...
  • Added download button
• Thanks to ImgFlip for providing the meme API
• Inspired by the classic meme generator format

Happy coding! 👨‍💻