🎭 A Full-stack Meme Generator with React Hooks + Express 🪐

Hey guys 😃

I finally released the first version of my personnal project called Meme Studio, a simple and fast website to create and share memes. It's been created in Typescript (and a little bit of Javascript) with React.js for the frontend, and Express.js for the backend.

2 languages available : English and French

Website : https://www.meme-studio.io
Github repository : https://github.com/viclafouch/meme-studio

Here a list of some packages I use for Meme Studio :

• React - For building user interfaces
• React-Helmet - Manage the document head (title, meta-description, lang, etc..)
• React-i18next - Internationalization
• React-Router - Declarative routing for React
• React-Loadable - Loading components with promises (code splitting)
• Immer - Create a immutable state by mutating the current one
• ExpressJS - Server side
• Sequelize - Database

The development lasted about 7 months, I wanted to create something quite complete and to be able to improve my skills in React and more precisely with the Hooks (the current version is the 16.13.1).

Below are a few lines of interesting code for the development of the application (available on desktop and mobile).

Backend

Database tables (3)

A Meme by definition:

A meme can be customized with texts and we can change its color, font size, shadow, text align, etc...

We can also change a position of a text by moving it. A text can be duplicated, removed or added.

A Text Box by definition:

And for the translation, I created another table with a relation to a Meme model (So we can search for a meme in the application).

A Meme Model can have multiple translations (FR, EN_GB, etc..) and text boxes.

Here the relationships :

REST API

It's a simple REST API and I'm only using 2 routes using Express.js :

• /memes to get the list of meme available.
• /meme/:id to get details of the selected meme including its text boxes.

The API also uses express-validator to check the parameters sent in the request. For example, for my pagination, check that the page parameter is a number ; check that the id parameter of a meme exists in the database; ...

Frontend

Front side, that's the part that took the longest time.

I had to create a global state because the components were getting deeper and deeper. I used the React Context API, using Immer.js to manage the immutability of my objects.

Below the interface of my editor state (everything related to the canvas display):

To create the textual content of a meme, I use the <canvas> element.

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. I use this element for creating a combination of text + photo.

Take a look at the documentation of the <canvas> element here.

Note that each time you customize the meme (example: edit the text color), the canvas need to redraw everything from 0.

Below is the effect hook to draw the meme customization.

For those who use canvas in their project, I strongly advise you to follow these recommendations in order to optimize the performance of your application.

After creating your meme, you have 3 choices (for now) :

• Download the image as a PNG file
• Copy your image to the clipboard
• Share directly on Twitter

You've seen some of the application code, but you can have a detailed look at this GitHub link: https://github.com/viclafouch/meme-studio.

Meme Studio is an open source project that you are free to contribute.

I appreciate any feedback and suggestions.

Take care !