IT Memes World is a website providing you with the best memes from IT industry. You can create your own account, add new memes, edit or delete them and like/dislike posts. Future development of the app involves a gallery of all memes, meme generator and weekly subscription. See below for more information, changes in code and deployment updates.
Live view: IT Memes World
The project has been created as part of my 'Szkoła Reacta' course and has later been extended with new technologies. The scope of the course is to use what I have learned during the course about React, API, Next.js, etc. Full list of used technologies, languages and libraries you will find below.
For now the project is completed in the basic stage, which makes it usable and available for others. Full list of planned updates and functions is below.
- HTML 5
- CSS, Sass
- React, JavaScript, JSX, TypeScript
- Node.js
- Material UI
- Redux
- MongoDB database
- axios
- jwt-decode
- moment
- react-file-base64
- redux, react-redux, redux-thunk
- uuid
- bcryptjs
- body-parser
- cors
- dotenv
- express
- jsonwebtoken
- mongoose
- passport
- nodemon
The project is designed for desktop and mobile versions.
Project is: completed in basic project.
For now the live preview shows a basic version of a Random Meme Generator. The user can insert their own captions and they will be visible alongside the meme generated. It is a simple application with flaws (the pictures are of different shapes and sizes and they sometimes render incorrectly).
COMPLETED:
- basic components of the Meme Generator,
- basic implementation of styles,
- working JS code,
- backend for handling posts and authentication,
- MongoDB connection,
- creating user accounts,
- upload of memes, deletion and liking/disliking as a logged in user,
- final fixes with mobile views,
- information dialogs: creating client side information dialogs/snackbars for success/info/warning/error informations from the backend,
- refactor of all dialogs and forms.
The following are planned to be implemented:
- pagination: separating the amount of visible posts and creating pages,
- search engine: searching through tags,
- passport authentication strategies for Google and Facebook,
- terms of service, privacy and site rules,
- comments section: comments will be available for logged in users; the post will show itself in a lightbox window with a comments section
- gallery: a full gallery like view of all memes with lightbox,
- generator: meme generator from blank pictures available in the database (or uploaded by the user)/ a generated meme can be either uploaded to the site or downloaded for private use,
- weekly subscription: everyone who signs up for the subscription will receive weekly emails with new uploads,
- how to instructions.
Update 06/06/2022 refactor of dialog forms / disabling like/dislike functionality for creators under their posts
Update 03/06/2022 deployment after fixes / created client side information dialogs/snackbars for informations from the backend; refactor of Auth and Edit forms
Update 26/05/2022 deployment after fixes / final fixes with mobile views
Update 23/05/2022 second deployment after fixes / fix of re-render of page after login/implementation passport-jwt strategy with refactor
Update 20/05/2022 first deployment / merge of working branch with main
The project has been inspired by a few Meme Generator apps that have been created: AnjaliSharma1234 Random Meme Generator lijinke666 react-meme-generator
I have also googled some tutorials and React project ideas: 10 Cool React Projects Ideas You Should Build In 2021 Learn React by Building a Meme Generator