• Last updated: September 13, 2025 (Strapi 5 era)
  • 11 min read

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

Strapi v4

Create a meme generator with React using Strapi to retrieve memes & add custom text. Step-by-step tutorial on how to build a simple React app with Strapi.

Screen Shot 2022-02-01 at 10.25.28.png

Opuama Lucky

April 7, 2023

tweet selection
How to Build a Meme Generator with React and Strapi v4.png

    This article refers to Strapi v4. For Strapi v5, use the resources below:

    Core Migration and Setup

    Strapi v5 Migration Tools

    Entity Service to Document Service Migration

    Modern Development Practices

    TypeScript Integration

    Environment Variables and Configuration

    API and Data Fetching

    REST API v5 Updates

    Modern Client Integration

    Frontend Integration Features

    Preview and Live Preview

    • Preview feature documentation covering Live Preview setup with postMessage API integration for React applications

    • Configuration examples for Next.js draft mode and preview URL generation with environment variables

    Admin Panel Customization

    Deployment and Production

    Deployment Configuration

    Node.js and Prerequisites

    Additional Migration Resources

    Plugin and Component Updates

    Backend Customization Examples

    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. Strapi Meme Generator.png

    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. Strapi Quick Installation

    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: Strapi Admin Panel

    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. Media Library Settings

    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. Upload Media Library

    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. Collection 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. Content Manager Strapi

    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. Create Entry Strapi

    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. Meme Generator App

    Adding text to a generated meme image: Meme Generator App_

    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:

    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.

    Strapi Cloud is now available

    tweet selection
    Screen Shot 2022-02-01 at 10.25.28.png
    Opuama Lucky
    Software engineer @strapi