Hey guys 😃
2 languages available : English and French
Here a list of some packages I use for Meme Studio :
- React - For building user interfaces
React-Helmet - Manage the document head (
- 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).
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 :
It's a simple REST API and I'm only using 2 routes using Express.js :
/memesto get the list of meme available.
/meme/:idto 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; ...
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
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 !