How to Build a Meme Generator App with React and Strapi v4

React and Strapi are two popular technologies in the developer ecosystem, and they make a powerful combination for building applications. React is a widely-used JavaScript library for building user interfaces that allow developers to create reusable components for building complex and interactive web applications. Strapi is an open-source headless CMS that lets developers choose their favorite tools and frameworks while allowing editors to manage and distribute their content using their application's admin panel.

By using React for the front-end and Strapi for the back-end, developers can create a seamless user experience that is fast, reliable, and customizable. Strapi's flexible content modeling and REST API capabilities make managing and retrieving data easy. At the same time, React's component-based architecture provides a powerful toolkit for building interactive and dynamic UIs.

In this tutorial, you will learn how to build a meme generator application that enables users to create and alter humorous pictures or videos. You will use React to retrieve memes from Strapi and add text of your choice.

Prerequisites

Before we start, we need to equip ourselves with the following:

1. Install Node on your local machine.
2. Basic understanding of Strapi - get started with this quick guide.
3. Basic knowledge of React.js.

Creating a New React App

If you have at least npm version 5.2, we can use the tool npx to create a new React project. Check out the React documentation to learn more, and then proceed with the steps below to create a new React app.

But first, ensure node.js is installed on your system.

Next, we need to create a new directory, Memegen

    mkdir Memegen && cd Memegen

Then, run the command below to create the React app:

npx create-react-app name-of-project

OR

npm create-react-app name-of-project

Running this command will initially ask permission to install React temporarily and its associated packages. Once finished, you can start the app by running the command below.

npm start

This should open up the URL (http://localhost:3000) on your default browser.

Designing the Meme Generator

Meme Generator is very easy to use. The app design is straightforward. When creating memes, the user can only change the image and the text, so you don't have to worry about formatting or design.

We will design a meme generator app for our project. First, open your React app Memegen in a code editor, navigate through the src folder, and create a file meme.jsx, and paste the code below:

1    import react from "react";
2    import "./style.css";
3    function Meme() {
4      return (
5        <div className="meme-container">
6          <nav className="navbar">
7            <img className={props.memeLogo} src="" alt="memeLogo" />
8            <p className="title">Strapi Meme Generator</p>
9          </nav>
10          <div className="input-field">
11            <input
12              type="text"
13              placeholder="Enter the first line..."
14              name="firstline"
15            />
16            <input
17              type="text"
18              placeholder="Enter the second line..."
19              name="secondline"
20            />
21          </div>
22          <button className="generateBTN">Load random image</button>
23        </div>
24      );
25    }
26    export default Meme;

Following that, add a logo to our nav bar. Navigate to your src folder and replace the code within the App.jsx with the following:

1    import react from "react";
2    import Meme from "./meme.jsx";
3    import "./style.css";
4    import memeLogo from "./images.jpg";
5    function App() {
6      return (
7        <div className="app-container">
8          <Meme memeLogo={memeLogo} />
9        </div>
10      );
11    }
12    export default App;

To get the logo image, you can download any meme image, paste it into your src folder, and save it as images.jpg.

From the code above, pass memeLogo as a prop to the meme component. Next, create another file style.css``, in our src folder for a little styling.

1    *{
2        margin: 0px;
3        padding:0px;
4        box-sizing:border-box;
5        font-family:sans-serif;
6        user-select:none;
7        color: white;
8    }
9    .memeLogo{
10    height:90px;
11    }
12    .app-container{
13       max-width: 400px;
14       height: auto;
15       background-color: black;
16       margin: 30px auto;
17       border-radius: 35px; 
18       overflow: hidden;
19       border-radius: 15px;
20    }
21    .navbar{
22        display:flex;
23        align-items: center;
24        justify-content: space-between;
25        background-color: #1c1c1c;
26        padding: 6px 33px;
27        width: 100% ;
28    }
29    .title{
30        font-size: 16px;
31        font-weight: bold;
32        color: #94BD9C ;
33    }
34    .input-field{
35        display: flex;
36        justify-content: center;
37        flex-wrap: wrap;
38        align-items: center;
39        margin: 18px 0px;
40    }
41    input{
42        padding: 9px;
43        font-size: 15px;
44        margin: 5px 2px;
45        color: black;
46        width: 180px;
47        border: none;
48        outline: none;
49        background-color: white;
50        color: black;
51        border-radius: 9px;
52    }
53    ::placeholder{
54        color: black;
55    }
56    input:focus{
57        outline:2px solid #ffbd08;
58        color:black;
59    }
60    .generateBTN{
61        margin:1px auto;
62        padding:9px;
63        background-color:#6aca7d ;
64        color: black;
65        font-weight: bold;
66        margin-left: 30%;
67        border-radius: 9px;
68    }
69    .generateBTN:active {
70        background-color: #4ed08a;
71    }
72    .meme-image{    
73        margin: 21px auto;
74    }
75    .imageMeme {
76    max-width: 350px;
77    height: auto;
78    margin: 12px 10px 20px 25px; 
79    border-radius: 9px;  
80    border: 2px solid white;
81    }
82    .first{
83        position: absolute;
84        top:18rem;
85        /* right: 5px; */
86        padding-left: 50px;
87        color: white;
88    }
89    .second{
90        position: absolute;
91        top:28rem;
92        /* right: 5px; */
93        padding-left: 220px;
94        color: white;
95    }

Ensure your src/index.js is the same as this:

1    import React from "react";
2    import ReactDOM from "react-dom/client";
3    import App from "./App.jsx";
4    const root = ReactDOM.createRoot(document.getElementById("root"));
5    root.render(
6      <React.StrictMode>
7        <App />
8      </React.StrictMode>
9    );

If you follow this tutorial, your browser should display something similar to the image below.

Setting up Strapi Project

To set up Strapi for our project, first, create a new directory in Command Prompt (CMD) mkdir strapi-back-end, and then run the command below to create a new Strapi project:

    npx create-strapi-app@latest my-project --quickstart

or

    yarn create strapi-app my-project --quickstart

When you run the command above, you will be prompted to choose your preferred installation method; select Quick Start to proceed. As shown in the screenshot, you will also be asked if you want to use a template; if you do not, Strapi will complete the installation quickly. After the installation, the Strapi app should launch in your browser and display the following page. Or copy and paste the http://localhost:1337 link from your cmd into your browser.

Enter the open the administration, then signup or log in if you have already registered. You should have a page on your browser like this:

Integrating Meme with Strapi

Now upload meme images into your Strapi back-end using the media library.

Media Library allows you to upload images, videos, audio, or documents. Using the media library, you can quickly find the right asset, edit it, and reuse it.

Now, on your Strapi admin pane, go to settings, and click on media. If not enabled, enable responsive friendly upload, and save.

Uploading Meme Images into Media Library We have completed the configuration of our media library. It will appear on your dashboard automatically. Next, click on the media library, then click on the add new assets button, add any meme image, and hit upload 1 asset to the media library just like the image below.

Creating Collection Types To make a collection type, go to the content-type builder on your admin homepage and create a new collection type called Meme which carries two fields:

• name: text
• meme: single media

The name has a text field, whereas the meme has a media field where we will publish all of our meme images.

Note: don’t forget to enable the permissions for find and findOne. You can do that by going to settings > roles > public and choosing the meme content type.

Next, we must publish the meme images uploaded to our media library. To do so, go to the Content Manager, select Meme collection type, and click the Create New Entry button.

Next, fill in the input field name and a meme image from the media library. Save and Publish. You can publish as many meme images as you want for your project.

After that, navigate to Settings, choose Roles, and select Public. To allow all application activities, we scroll down to Permissions, click on Meme, and then select all. This procedure allows us to access our API completely.

Generating Meme from Strapi Back-end

Now you will fetch the meme images from the Strapi back-end to our meme generator application. Strapi API does not retrieve relations, media fields, components, or dynamic zones by default. We'll use the populate parameter to retrieve all fields from our API. For more information, visit Strapi populating fields. Next, navigate to src/meme.jsx and add the following code:

1    import react from "react";
2    import "./style.css";
3    import React, { useState, useEffect } from "react";
4    function Meme(props) {
5      const [appData, setAppData] = useState({
6        firstline: "",
7        secondline: "",
8      });
9      // const [newMemeData, setNewMemeData] = useState([]);
10      const [memeList, setmemeList] = useState([]);
11      const [randomMeme, setrandomMeme] = useState(null);
12      function meme() {
13        fetch("http://localhost:1337/api/memes?populate=meme")
14          .then((res) => res.json())
15          .then((meme) => {
16            setmemeList(meme.data);
17          });
18      }
19      useEffect(() => {
20        meme();
21      }, []);
22      function getRandomMeme() {
23        const randomNumber = Math.floor(Math.random() * memeList.length);
24        let randomMemeURL =
25          memeList[randomNumber].attributes.meme.data.attributes.url;
26        setrandomMeme(randomMemeURL);
27      }
28      function enterLine(event) {
29        setAppData((prevAppData) => {
30          return {
31            ...prevAppData,
32            [event.target.name]: event.target.value,
33          };
34        });
35      }
36      console.log(appData);
37      return (
38        <div className="meme-container">
39          <nav className="navbar">
40            <img className="memeLogo" src={props.memeLogo} alt="memeLogo" />
41            <p className="title">Strapi Meme Generator</p>
42          </nav>
43          <div className="input-field">
44            <input
45              type="text"
46              placeholder="Enter the first line..."
47              name="firstline"
48              onChange={enterLine}
49              value={appData.firstline}
50            />
51            <input
52              type="text"
53              placeholder="Enter the second line..."
54              name="secondline"
55              onChange={enterLine}
56              value={appData.secondline}
57            />
58          </div>
59          <button className="generateBTN" onClick={getRandomMeme}>
60            Load random image
61          </button>
62          {randomMeme !== null && (
63            <div className="meme-image">
64              <img
65                className="imageMeme"
66                src={`http://localhost:1337${randomMeme}`}
67                alt="Meme Not Responding "
68              />
69              <h2 className="first">{appData.firstline}</h2>
70              <h2 className="second">{appData.secondline}</h2>
71            </div>
72          )}
73        </div>
74      );
75    }
76    export default Meme;

Let's examine how the functions mentioned in the code above work in our project.

• meme(): it uses the populate parameters to retrieve all of our data from the Strapi back-end.
• getRandomMeme(): This function is used to retrieve random meme images.
• enterLine(event): We use this function to compute the text on our meme image.

Testing our project

Since the data in our application depends on Strapi, we must first start the Strapi server because the application won't run otherwise. First, open a new terminal window, change to the directory where our Strapi app was created, and launch the app by typing the following commands:

npm run develop

To run your React app:

npm start

Whenever you click the Load Strapi Meme button, a random image will appear on your meme generator app, just like the image below.

Adding text to a generated meme image:

Conclusion

We used React js to create a meme generator app, add meme images to our media library, and share them on our meme field. We also obtained the media API by using the populate parameter. Furthermore, by clicking the Load Strapi Meme button, we could send a random image from our Strapi API to our meme generator application. You can expand the functionality of your application.

Here's a link to codes on my GitHub repository.

If you would like to learn more about how to customize a Strapi and React-powered application, check these resources:

• Strapi Authentication with React
• Implementing A/B Testing With Strapi, React, and Optimizely
• Strapi Internals: Customizing the Backend

Continue discussing this topic further or connect with more people using Strapi on our Discord community. It is a great place to share your thoughts, ask questions, and participate in live discussions.