Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 2, 2020 09:52 am GMT

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

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 !


Original Link: https://dev.to/viclafouch/a-full-stack-meme-generator-with-react-hooks-express-5dc7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To