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 :
-
/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; ...
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 !
Top comments (9)
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!
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.
Haha, gotta love that cover image.
Wow. Just wow.
This is fantastic. Thanks for sharing!
Nice project. I enjoyed project structure even more
Great project!
As a meme lover myself this is great! :D Congrats on the project!
Very nice !
Now please add all the files from Neurchi de template