Diving into Reactjs

Meme Generator

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 content originally appeared on DEV Community and was authored by Shiv

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
  1. Navigate to the project directory: 
   cd meme_generator
  1. Install dependencies: 
   npm install
  1. Start the development server: 
   npm run dev

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!


This content originally appeared on DEV Community and was authored by Shiv


Print Share Comment Cite Upload Translate Updates
APA

Shiv | Sciencx (2024-10-19T02:15:17+00:00) Diving into Reactjs. Retrieved from https://www.scien.cx/2024/10/19/diving-into-reactjs/

MLA
" » Diving into Reactjs." Shiv | Sciencx - Saturday October 19, 2024, https://www.scien.cx/2024/10/19/diving-into-reactjs/
HARVARD
Shiv | Sciencx Saturday October 19, 2024 » Diving into Reactjs., viewed ,<https://www.scien.cx/2024/10/19/diving-into-reactjs/>
VANCOUVER
Shiv | Sciencx - » Diving into Reactjs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/19/diving-into-reactjs/
CHICAGO
" » Diving into Reactjs." Shiv | Sciencx - Accessed . https://www.scien.cx/2024/10/19/diving-into-reactjs/
IEEE
" » Diving into Reactjs." Shiv | Sciencx [Online]. Available: https://www.scien.cx/2024/10/19/diving-into-reactjs/. [Accessed: ]
rf:citation
» Diving into Reactjs | Shiv | Sciencx | https://www.scien.cx/2024/10/19/diving-into-reactjs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts