Skip to content

🎨 Meme Generator App built with React! Users can generate random memes and add custom text. This project showcases useState, useEffect, and useRef for state, API fetching, and scroll behavior. A fun, responsive project highlighting key React concepts and interactivity.

Notifications You must be signed in to change notification settings

Khan4218/React-Meme-Generator-project-4

Repository files navigation

πŸš€ My React Journey

Welcome to My React Journey – a personal log of everything I'm learning as I dive into React.js. This repo includes practice projects, challenges, and code snippets that reflect my progress through the fundamentals of React.

βœ… Section 4 Highlights (Completed)

  • Meme Generator Starting Point
  • Managing state for meme data
  • Controlled Components (Part 1 & 2)
  • Planning and performing data fetches
  • Functional programming in React
  • Fetching meme data from an API
  • Introduction to useEffect
  • useEffect syntax and default behavior
  • Understanding the dependencies array
  • useEffect with empty dependency array
  • useEffect quizzes and practical exercises
  • Using useEffect to fetch memes
  • Combined state and effect practices
  • Cleanup functions in useEffect
  • Generating a random meme
  • Introduction to useRef
  • Practical use: scrollIntoView() with useRef
  • Fixing iframe scroll bug

πŸ“Œ Project 4: Meme Generator App

A fun and interactive project to generate memes with random images and custom text. Focus areas:

  • Working with form inputs
  • Fetching and managing meme data from an API
  • Generating and displaying random images
  • Leveraging useEffect and useRef

πŸ”— Live Demo: akbar-react-project-4.netlify.app πŸ“‚ Folder: React-project-4


βœ… React Course Completed!

πŸŽ‰ I've officially completed the entire React course!
From static pages to full interactivity with forms, APIs, and hooks β€” this journey has been transformative.

πŸ”œ What’s Next

I'm now planning to:

  • Start building full-stack projects using React + external APIs
  • Explore advanced patterns like context, reducers, and custom hooks
  • Learn TypeScript for safer React development
  • Dive into backend technologies (Node.js, Express, MongoDB)
  • Deploy professional-level React apps

πŸš€ How to Run Any Project Locally

cd project-folder-name npm install npm run dev 

About

🎨 Meme Generator App built with React! Users can generate random memes and add custom text. This project showcases useState, useEffect, and useRef for state, API fetching, and scroll behavior. A fun, responsive project highlighting key React concepts and interactivity.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published