loading...
Cover image for A Full-stack Meme Generator with React Hooks + Express

A Full-stack Meme Generator with React Hooks + Express

viclafouch profile image Victor de la Fouchardière ・3 min read

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

Meme Studio

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

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:

Model Meme

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:

Model TextBox

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

Model Translations

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

Here the relationships :

Sequelize hasMany

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

Express Validator

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):

React Context API

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.

React useLayoutEffect

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

Developer Meme

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 !

Posted on Jun 2 by:

viclafouch profile

Victor de la Fouchardière

@viclafouch

@youtube & @GoogleChrome Product Expert for @google / Web Developer at @seald 🤖

Discussion

markdown guide
 

Awesome thanks for sharing!

I see that you made the resize and drag and drop functionalities from scratch in React and TS instead of taking a package! I've also tried making these functionalities using the canvas but eventually switched to using just div's and transforming them with CSS for my UX-skeleton generator.

 

Thanks for sharing! I'll use your project as an example in my Web class next saturday. There I'll be discussing react in conjunction with Express. Meme generator has just the grip I want to interest my students!
Thanks!

 
 

Nice project. I enjoyed project structure even more

 
 

This is fantastic. Thanks for sharing!

 
 

As a meme lover myself this is great! :D Congrats on the project!