The main goal of this project is to learn about MERN technical stack by building a Full-Stack Notes application.
The aim of this project is to create a notes site with a user system. In other words, a CRUD system for notes and an AUTH system for users.
For this project, I followed the RoadsideCoder's YouTube Playlist, taking a few liberties.
So, what is MERN ?
MERN is a technical stack that uses the following technologies :
- TailwindCSS : CSS Framework to simplify front-end design.
- Redux : Open-source JS library for centralized status management.
- Mongoose : MongoDB object modeling for NodeJS.
- BcryptJS : Hash password library.
- JSONWebToken : JSON Web Token generator.
- Postman : API platform for building and using APIs.
A landing page should make users want to use the application. However, I wanted to focus on the implementation of functionalities.
Picture 1 : Landing page.
Firstly, by registering and logging in users, and updating their information.
Registering and logging pages are pages with form to create user in the MongoDB database, update those information through ProfilePage, and finally retrieve information to log the user.
Picture 2 : Register page.
Picture 3 : Login page.
Secondly, CRUD functionality for the notes model.
First of all, what's CRUD system ?
CRUD, which means Create Retrieve Update Delete, are the main functions for managing a model.
Picture 4 : Profil page.
Picture 5 : Notes page.
On this page, we can find all the notes of the logged-in user, as well as a filter function by name.
PORT = 5000
MONGO_URI = link
NODE_ENV = development
JWT_SECRET = word