Meme Generator App

This is a simple meme generator web application built using Node.js, Express, Handlebars, Multer (for file uploads), and Jimp (for image processing). The app allows users to create their own memes by adding top and bottom text to selected images or custom-uploaded images. The generated memes are stored temporarily, with automatic storage management to keep only the latest 10 memes.

Features

Core Functionalities

• Meme Creation: Users can select a pre-loaded image or upload a custom image to generate a meme with custom top and bottom text.
• Text Styling: The meme text is rendered in uppercase with a white font and black outline, making it stand out on any background.
• Image Preview: Live preview for both selected and uploaded images.
• Gallery: Displays the 9 most recent memes generated by users, with clickable thumbnails to view each meme in full size.

Storage Management

• Storage Limit: Only the 10 most recent memes are kept in storage. The oldest meme is automatically deleted when a new one is generated.
• Uploads Management: Custom-uploaded images are deleted immediately after the meme is generated to avoid unnecessary storage accumulation.

Middleware

• Logging Middleware: Logs the HTTP method and URL of each request to the console, providing simple logging for debugging and monitoring.
• Gallery-Loading Middleware: Loads the 9 most recent memes, excluding the oldest file, ensuring the gallery is always up-to-date and limited to the latest content.

Technologies Used

• Express: Backend framework used for routing and handling HTTP requests.
• Handlebars: Template engine to render dynamic HTML pages.
• Multer: Middleware for handling file uploads.
• Jimp: Image processing library used to resize images, add text, and create the final meme.
• Node.js: JavaScript runtime environment.

Project Structure

├── public
│   ├── css
│   │   └── style.css           # Styling for the app
│   ├── outputs                 # Directory for generated memes
│   ├── templates               # Directory for pre-loaded meme templates
│   └── uploads                 # Temporary directory for uploaded images
├── views
│   ├── layouts
│   │   └── main.hbs            # Main layout for Handlebars templates
│   └── meme.hbs                # Template for meme generation page
├── app.js                      # Main application file
├── package.json                # Project dependencies and scripts
└── README.md                   # Documentation for the project

Installation

Prerequisites

• Node.js and npm installed on your machine.
• Vercel account for deployment.

Steps

1. Clone the Repository:

   git clone https://github.com/your-username/meme-generator.git
   cd meme-generator

2. Install Dependencies:

   npm install

3. Run the App Locally:

   node app.js

   The app should be accessible on http://localhost:3000.

Deployment on Vercel

1. Install Vercel CLI (if you haven’t already):

   npm install -g vercel

2. Login to Vercel:

   vercel login

3. Deploy the App: From your project directory, run:

   vercel

   Follow the prompts to set up and deploy your app.

4. Access the Live URL: After deployment, Vercel will provide a live URL for your app.

Project Details

Middleware

• Logging Middleware: Logs each request’s HTTP method and URL to the console.

  app.use((req, res, next) => {
    console.log(`${req.method} request for '${req.url}'`);
    next();
  });

• Gallery-Loading Middleware: Reads and sorts the files in public/outputs, excluding the oldest and keeping only the latest 9 images.

  app.use((req, res, next) => {
    fs.readdir('public/outputs', (err, files) => {
      if (err) {
        console.error("Error reading outputs directory:", err);
        req.galleryImages = [];
      } else {
        const sortedFiles = files
          .map(file => ({
            name: file,
            time: fs.statSync(`public/outputs/${file}`).mtime.getTime()
          }))
          .sort((a, b) => a.time - b.time);
        req.galleryImages = sortedFiles.slice(-9).map(file => `/outputs/${file.name}`);
      }
      next();
    });
  });

Storage Management

• Auto-Deletion of Old Memes: Ensures that only the 10 newest memes are kept in the storage directory (public/outputs). The oldest file is deleted whenever a new meme is generated if the file count exceeds 10.

  fs.readdir('public/outputs', (err, files) => {
    if (err) {
      console.error("Error reading outputs directory:", err);
    } else {
      const memeFiles = files
        .map(file => ({ name: file, time: fs.statSync(`public/outputs/${file}`).mtime.getTime() }))
        .sort((a, b) => a.time - b.time);
      if (memeFiles.length > 10) {
        const filesToDelete = memeFiles.slice(0, memeFiles.length - 10);
        filesToDelete.forEach(file => {
          fs.unlink(`public/outputs/${file.name}`, (err) => {
            if (err) console.error("Error deleting old meme file:", err);
          });
        });
      }
    }
  });

• Temporary File Management: Uploaded images are temporarily stored in public/uploads and automatically deleted after they’re processed, ensuring minimal storage usage.

Customization

• Adding New Meme Templates: Simply add new images to the public/templates directory, and they will automatically appear in the selection dropdown on the app.
• Adjustable Text Size: The app uses Jimp for image processing, which can be customized in app.js if you need different font sizes or colors.

License

This project is open-source and available under the MIT License.