Creating a Meme Generator App using ReactJS
This app generates a meme by reaching out to imgflip API, getting the 100 most popular meme images at that time. One of those meme images will be and users can enter the meme text. The meme text will then be placed over the selected meme image, hence creating a meme 
and users can also press a button to generate a new meme image. By creating this project I learned about Event Listeners in React, React State, Conditional Rendering in React, React Forms, React Hooks(useEffect), etc. After creating the project, it was deployed to GitHub Pages 🐦 Feel free to reach me onTwitter 🪶
- ReactJS
- create-react-app
- Figma Design Template
- imgflip API
- Event Listeners in React
- React State
- React Forms
- Conditional Rendering in React
- React Hooks(useEffect)
- github-pages
cd meme-generator
npm install
npm start
-
Initialize the project using
npx create-react-app meme-generatorwhich will create a complete React App pre-configured and pre-installed with all the dependencies. -
Import
Karlafont from google fonts and apply it to theAppcomponent.
-
Create a
componentsfolder inside thesrcdirectory. -
Create custom components inside the
componentsfolder. -
Create an
imagesfolder inside thesrcdirectory and add images/logos inside it. -
Create a
stylesfolder inside thesrcdirectory and add.cssfiles inside it.
- Delete unnecessary files and code from the directory.
-
Create a
Headercomponent and basic JSX elements for it. -
Add appropriate
classNames to elements in theHeadercomponent. -
Add
troll-face.pngimage to theHeadercomponent. -
Import
Headercomponent insideAppcomponent. -
Style
HeaderandAppcomponent.
-
Create a
Memecomponent and basic JSX elements for it. -
Add appropriate
classNames to elements in theMemecomponent. -
Import
Memecomponent insideAppcomponent. -
Add basic style to
Memecomponent.
-
Create
Footercomponent and basic JSX elements for it. -
Import
Footercomponent insideAppcomponent. -
Style
Footercomponent.
-
Change
<form>to<div>inside theMemecomponent as we don't need to submit our form instead just get ameme image. -
Create a
memesData.jsinside thedatafolder which is an object of 100 most popular meme images returned after making an API request toimgflip API. -
Import
memesData.jsasmemesDataobject inside theMemecomponent. -
Select a random meme image's
urlproperty,console.log(url)usingonClick={getRandomImage}react mouse event property whenGet a new meme image 🖼️button is clicked. -
console.log(url)for now as ourUIwon't update if we insert theurlvariable inside theMemecomponent. Because this has everything to do with the way react deals with updating theUIusing variables.⚠️ Spoiler Alert!!!: React doesn't just insert every variable that is declared inside our component.
-
Save the random meme URL in state and import the react
{ useState }hook. -
Create a new state called
memeImagewith an empty string as default. -
When the
getMemeImagefunction is called, update thememeImagestate to be the random image URL -
Below the
div.form, add an<img />element and set the src to the newmemeImagestate we created. -
Style newly created
<img />element.
-
Update our state to save the meme-related data as an object called
meme. It should have the following 3 properties:topText, bottomText, randomImage. -
The 2 text states can default to empty strings for now, and
randomImageshould default to"http://i.imgflip.com/1bij.jpg" -
Next, create a new state variable called
allMemeImageswhich will default tomemesData, which we imported at the top ofMeme.js -
Lastly, update the
getMemeImagefunction and the markup to reflect our newly reformed state object and array in the correct way
-
Update
topTextelement to have avalue={meme.topText},name="topText"and anonChange={handleChange}event handler which will run{handleChange}function on each key press. On each key press our state changes and React re-renders our component and is in charge of maintaining the state. -
Update
bottomTextelement to have avalue={meme.bottomText},name="bottomText"and anonChange={handleChange}event handler which will run{handleChange}function on each key press. On each key press our state changes and React re-renders our component and is in charge of maintaining the state. -
Create a
handleChangefunction, use Destructuring assignment(ES6) to return a new object i.e., ->const [name, value] = event.target. While keeping the old object(state) intact create a new object(state) by using the spread operator...prevState. -
Override the specific property
[name]: valueusing previous state and arrow functions. Making use of Computed Properties(ES6) allows us to turn a dynamic string(Something Stored in a Variable) and use it as the property name for our Object. -
Create a
divwithclassName=memecontainingmeme-imageand two<h2>elements, which will used to show text on top of ourmeme-image. -
Update our
<h2>elements by using values stored in{meme.topText}, {meme.bottomText}keys inside our meme Object. -
Style
className=memedivcontainer and<h2>elements in it.
-
Update state variable called
allMemeImagestoconst [allMemes, setAllMemes] = React.useState([]), where default state is an empty array. -
Using Effect Hook(
useEffect), as soon as theMeme componentloads the first time, make an API call to "https://api.imgflip.com/get_memes". -
When the data comes in, save just the memes array part of that data to the
allMemesstate. -
Get rid of
const memesArray = allMemeImages.data.memes;line in ourgetRandomImage()function because new state forallMemeis already an array ofmemesobjects. Update all instances ofmemesArrayvariable toallMemes.
-
Change Absolute units to Relative.
-
Make App responsive for mobile by adding
media query. 😃
-
Delete unnecessary files from directory and format code with
Prettier. -
Test for Responsiveness and make changes if need be ✅.
-
Add links to
Live Previewand screenshots ✅.
- Use Official Documentation(link) to push the project to GitHub Pages 🎆🎆🎆
- Only show
meme imagesthat are compatible with app design(2 text fields - top & bottom). - Update the form based upon the retrieved
meme image.
-
The Odin Project
-
Figma Design
-
Scrimba
-
React Official Documentation
“People think computers will keep them from making mistakes. They're wrong. With computers you make mistakes faster.”
— Adam Osborne
🦝👻😶🌫️