Meme-Generator-ReactJS 🤪

Creating a Meme Generator App using ReactJS

Live Preview

About ℹ️

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 🪶

Technologies Used 💻

Includes the following features/components ⚙️

- 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

Usage 🤓

cd meme-generator

npm install

npm start

Steps I followed to complete this project 🪜

1. Initialize Project 🎍

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 the App component.

2. Organize components 🗄️

Create a components folder inside the src directory.
Create custom components inside the components folder.
Create an images folder inside the src directory and add images/logos inside it.
Create a styles folder inside the src directory and add .css files inside it.

3. Clean directory🧹

Delete unnecessary files and code from the directory.

4. Header Component 🧩

Create a Header component and basic JSX elements for it.
Add appropriate classNames to elements in the Header component.
Add troll-face.png image to the Header component.
Import Header component inside App component.
Style Header and App component.

5. Meme Component 🧩

Create a Meme component and basic JSX elements for it.
Add appropriate classNames to elements in the Meme component.
Import Meme component inside App component.
Add basic style to Meme component.

6. Footer Component 🧩

Create Footer component and basic JSX elements for it.
Import Footer component inside App component.
Style Footer component.

7. Get Random Meme 🪄

Change <form> to <div> inside the Meme component as we don't need to submit our form instead just get a meme image.
Create a memesData.js inside the data folder which is an object of 100 most popular meme images returned after making an API request to imgflip API.
Import memesData.js as memesData object inside the Meme component.
Select a random meme image's url property, console.log(url) using onClick={getRandomImage} react mouse event property when Get a new meme image 🖼️ button is clicked.
console.log(url) for now as our UI won't update if we insert the url variable inside the Meme component. Because this has everything to do with the way react deals with updating the UI using variables. ⚠️ Spoiler Alert!!!: React doesn't just insert every variable that is declared inside our component.

8. Add Images to the Meme Generator 🖼️

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 the memeImage state to be the random image URL
Below the div.form, add an <img /> element and set the src to the new memeImage state we created.
Style newly created <img /> element.

9. Refactor State 🔃

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 to memesData, which we imported at the top of Meme.js
Lastly, update the getMemeImage function and the markup to reflect our newly reformed state object and array in the correct way

10. Add Text to Image 📝

Update topText element to have a value={meme.topText}, name="topText" and an onChange={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 a value={meme.bottomText}, name="bottomText" and an onChange={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 with className=meme containing meme-image and two <h2> elements, which will used to show text on top of our meme-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.

11. Get Memes form the API ⬇️

Update state variable called allMemeImages to const [allMemes, setAllMemes] = React.useState([]), where default state is an empty array.
Using Effect Hook(useEffect), as soon as the Meme 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 our getRandomImage() function because new state for allMeme is already an array of memes objects. Update all instances of memesArray variable to allMemes.

12. Make App Responsive 🎨

Change Absolute units to Relative.
Make App responsive for mobile by adding media query . 😃

13. Prepare for Deployment 🪢

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 ✅.

14. Deploy 📤

Use Official Documentation(link) to push the project to GitHub Pages 🎆🎆🎆

Future Changes ♾️

Only show meme images that are compatible with app design(2 text fields - top & bottom).
Update the form based upon the retrieved meme image.

Links to content that helped me with this project 🔗

Quote ✒️

“People think computers will keep them from making mistakes. They're wrong. With computers you make mistakes faster.”
— Adam Osborne

🦝👻😶‍🌫️

hmjatt / meme-generator-reactjs Goto Github PK