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-generator
which will create a complete React App pre-configured and pre-installed with all the dependencies. -
Import
Karla
font from google fonts and apply it to theApp
component.
-
Create a
components
folder inside thesrc
directory. -
Create custom components inside the
components
folder. -
Create an
images
folder inside thesrc
directory and add images/logos inside it. -
Create a
styles
folder inside thesrc
directory and add.css
files inside it.
- Delete unnecessary files and code from the directory.
-
Create a
Header
component and basic JSX elements for it. -
Add appropriate
className
s to elements in theHeader
component. -
Add
troll-face.png
image to theHeader
component. -
Import
Header
component insideApp
component. -
Style
Header
andApp
component.
-
Create a
Meme
component and basic JSX elements for it. -
Add appropriate
className
s to elements in theMeme
component. -
Import
Meme
component insideApp
component. -
Add basic style to
Meme
component.
-
Create
Footer
component and basic JSX elements for it. -
Import
Footer
component insideApp
component. -
Style
Footer
component.
-
Change
<form>
to<div>
inside theMeme
component as we don't need to submit our form instead just get ameme image
. -
Create a
memesData.js
inside thedata
folder which is an object of 100 most popular meme images returned after making an API request toimgflip API
. -
Import
memesData.js
asmemesData
object inside theMeme
component. -
Select a random meme image's
url
property,console.log(url)
usingonClick={getRandomImage}
react mouse event property whenGet a new meme image 🖼️
button is clicked. -
console.log(url)
for now as ourUI
won't update if we insert theurl
variable inside theMeme
component. Because this has everything to do with the way react deals with updating theUI
using 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
memeImage
with an empty string as default. -
When the
getMemeImage
function is called, update thememeImage
state to be the random image URL -
Below the
div.form
, add an<img />
element and set the src to the newmemeImage
state 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
randomImage
should default to"http://i.imgflip.com/1bij.jpg"
-
Next, create a new state variable called
allMemeImages
which will default tomemesData
, which we imported at the top ofMeme.js
-
Lastly, update the
getMemeImage
function and the markup to reflect our newly reformed state object and array in the correct way
-
Update
topText
element 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
bottomText
element 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
handleChange
function, 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]: value
using 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
div
withclassName=meme
containingmeme-image
and 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=meme
div
container and<h2>
elements in it.
-
Update state variable called
allMemeImages
toconst [allMemes, setAllMemes] = React.useState([])
, where default state is an empty array. -
Using Effect Hook(
useEffect
), as soon as theMeme component
loads 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
allMemes
state. -
Get rid of
const memesArray = allMemeImages.data.memes;
line in ourgetRandomImage()
function because new state forallMeme
is already an array ofmemes
objects. Update all instances ofmemesArray
variable 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 Preview
and screenshots ✅.
- Use Official Documentation(link) to push the project to GitHub Pages 🎆🎆🎆
- Only show
meme images
that 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
🦝👻😶🌫️