Nota project documentation

here is a video for the project

By Eng.Bassem Hazem Mahmoud

Github Linkedin

Overview

This is a complete web application "Nota" app deveoped with MERN stack , that allow you to add notes , edit it and delete with a login and signup system that use tokens , email verify , validation and error system. The skills used are :

HTML , CSS , Bootstrap , JS , React -> for the Front-End (client) section

Node.js , MongoDB , Express , Api , Web tokens , Validation -> for the Back-End (server) section

Details

Front-End

React Features:

The front-end uses React framework with routing system, Bootstrap for styling , css custom styling and API requests to the backend. Key features include:

  • Login and Register: a complete system that alerts you with any error in validation , existing email or wrong password etc...
  • Create a New Note: Users can create new notes by entering a title and description.
  • Edit Notes: Existing notes can be edited easily by selecting the note and modifying its content.
  • Delete Notes: Notes can be permanently deleted with a alert of confirmation.
  • Persistent Storage: Notes are saved in the database, ensuring that data is not lost.
Main Functions:
  • signIn(e): Handles user sign-in by sending credentials to the server. If successful, stores the token, navigates to the home page, and stops loading. Displays errors if any occur.
  • signUp(e): Registers a new user by sending their data to the server. On success, redirects to the login page. Displays errors if any occur.
  • fetchNotes(): Retrieves all notes for the current user using the authorization token. Sets the notes in state or displays errors if any occur.
  • addNote(e): Adds a new note after checking required fields. Sends the note data to the server with the authorization token. Refreshes the notes list on success or shows errors.
  • deleteNote(id): Deletes a note using the note ID and authorization token. Refreshes the notes list after successful deletion, or shows errors if any.
  • updateNote(id): Fetches the note by ID for editing, updates the note form fields, and enables editing mode.
  • saveNoteUpdate(e): Sends updated note data to the server to save changes. Refreshes the note list and exits editing mode after a successful update. Displays errors if any occur.
  • PrivateRoute({ children }): Checks if the user is authenticated by verifying a token stored in localStorage. It decodes the token to match the user's email. If authenticated, the user can access the protected route; otherwise, they are redirected to a "Not Found" page.

Back-End

API Endpoints:
  • User

[POST] /user/signup

  • Request:
    •         {
            "name":"Bassem Hazem",
            "email":"bassemhazemmahmouddev@gmail.com",
            "age":20,
            "password":"Alej2223",
            "cPassword":"Alej2223",
            "role":"admin"
        }

  • Response:
    •         {
            "message": "success"
        }

    [POST] /user/signin

  • Request:
    •         {
            "email":"bassemhazemmahmouddev@gmail.com",
            "password":"Alej2223"
        }
  • Response:
    •         {
            "message": "success",
            "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
            eyJ1c2VySWQiOiI2NmYzMzZhZGFkYzMwNTY3ZDU3MWQ5Nz
            ciLCJuYW1lIjoiQmFzc2VtIEhhemVtIiwiZW1haWwiOiJi
            YXNzZW1oYXplbW1haG1vdWRkZXZAZ21haWwuY29tIiwiaW..."
        }

    [GET] user/verify/:verify email token

  • Response:
    •         {
            "message": "success"
        }

    • Notes

    [GET] /note/all

  • Authorization:
    •         Bearer Token  "token"
  • Response:
    •         {
            "message": "success",
            "notes": [...]
        }

    [GET] /note/:id

  • Authorization:
    •         Bearer Token  "token"
  • Response:
    •         {
            "message": "success",
            "notes": [...]
        }

    [POST] /note/add

  • Authorization:
    •         Bearer Token  "token"
  • Request:
    •         {
            "title":"My day",
            "description":"good"
        }
  • Response:
    •         {
            "message": "success"
        }

    [PUT] /note/update

  • Authorization:
    •         Bearer Token  "token"
  • Request Body:
    •         {
            "_id":"66f33abcad1d1d0baa16babe",
            "title":"My day 2",
            "description":"good 100%"
        }
  • Response:
    •         {
            "message": "success",
            "updatedNote": {
                "_id": "66f33abcad1d1d0baa16babe",
                "title": "blog",
                "description": "good 100%",
                "createdBy": "66f336adadc30567d571d977",
                "__v": 0
            }
        }

    [DELETE] /note/delete/:id

  • Authorization:
    •         Bearer Token  "token"
  • Response:
    •         {
            "message": "done",
            "deleted": {
                "_id": "66f33abcad1d1d0baa16babe",
                "title": "blog",
                "description": "good 100%",
                "createdBy": "66f336adadc30567d571d977",
                "__v": 0
            }
        }

    Database Schema:
    • Notes
      • _id (ObjectId, primary key): Unique identifier for the note by the MongoDB.
      • title (String): The title of the note.
      • description (String): The description of the note.
      • createdBy (ObjectId, ref: 'User'): The ID of the user who created the note.
    • Users
      • _id (ObjectId, primary key): Unique identifier for the user by the MongoDB.
      • name (String): The name of the user.
      • email (String): The email address of the user.
      • age (Number): The age of the user.
      • password (String): The password of the user.
      • role (String): The role of the user, which can be either 'admin' or 'user', with a default value of 'admin'.
    Validation: using Joi
    User validation
    • signUpSchema:
      • name: Required string, minimum 3 characters, maximum 30 characters.
      • email: Required, valid email with com or net TLDs.
      • age: Required number.
      • password String matching the pattern: uppercase letter, followed by lowercase letters or numbers (3-10 characters).
      • cPassword: Must match password.
      • role: Required string.

    • signInSchema:
      • email: Required, valid email with com or net TLDs.
      • password String matching the pattern: uppercase letter, followed by lowercase letters or numbers (3-10 characters).
    Note validation
    • addNoteSchema:
      • title: Required string, minimum 3 characters, maximum 30 characters.
      • description: Required string.
      • createdBy: String of length 24 (for ID).

    • updateNoteSchema:
      • _id: Required string of length 24 (for ID).
      • title: Optional string, minimum 3 characters, maximum 30 characters.
      • description: Optional string.
    Additionals