Diving into Reactjs

undrthegraveyard

Shiv

Posted on October 19, 2024

Diving into Reactjs

Meme Generator

Version

Meme Generator is a fun and interactive web application that allows users to create custom memes using various templates. I've been learning about software development from an educational platform for a couple of months, and this project was part of the curriculum.

Table of Contents

  1. Demo
  2. Features
  3. Tech Stack
  4. Installation
  5. Usage
  6. Author
  7. License
  8. Show Your Support

Demo

Want to see the Meme Generator in action? Check out our live demo!

Click here to view the demo <!-- Add your demo link here -->

Features

  • Dynamic Meme Generation: Fetch random meme images from an API.
  • Customizable Text: Add top and bottom text to create unique memes.
  • Responsive Design: Optimized for both desktop and mobile viewing.
  • Real-time Preview: See your meme update as you type.
  • Clean UI: Simple and intuitive user interface.

Tech Stack

  • Frontend: React.js
  • Build Tool: Vite for fast and efficient development
  • Styling: LESS for advanced styling capabilities
  • State Management: React Hooks (useState, useEffect)
  • API Integration: Fetch API for retrieving meme templates

Installation

  1. Clone the repository:
   git clone https://github.com/undrthegraveyard/meme_generator.git
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the project directory:
   cd meme_generator
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Start the development server:
   npm run dev
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Open the application in your browser.
  2. Click the "Get a new meme image" button to load a random meme template.
  3. Enter your desired text in the "Top text" and "Bottom text" fields.
  4. The meme will update in real-time as you type.
  5. Save or share your created meme (feature to be implemented).

Author

šŸ‘¤ Shivam Agarwal

License

This project is licensed under the MIT License.

Show your support

Give a šŸ‘šŸ» if you liked it!

šŸ’– šŸ’Ŗ šŸ™… šŸš©
undrthegraveyard
Shiv

Posted on October 19, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related