Keeper - Notes Management Full stack project

Table of Contents

• Overview
• Features
• Tech Stack
• Prerequisites
• Installation
• API Documentation
• Error Handling
• Environment Variables
• License

Overview

Keeper is a secure and full stack MERN application for managing personal notes. It provides comprehensive note-taking functionality with user authentication and data persistence.

Features

• authentication using local login and using google oaouth
• authorization using jsonwebtoken
• CRUD operations of notes
• responsive design
• changing background

Tech Stack

Frontend

• react: for creating UI the tntirement of the react is vite
• react-router-dom: for navigation
• axios: for creating APIs
• bootstrap: for some prebuild component
• react mui: for some prebuild component
• HTML, css and js for styling structuring

Backend

• Node.js: Server-side runtime environment.
• Express: Web framework for building the REST API.
• MongoDB: NoSQL database for storing user information and notes.
• bcrypt: Password hashing for security.
• Authentication: jsonwebtoken

Prerequisites

basic knowledge of mern stack and jsonwebtoken and google developer console

Installation

Start Frontend

1. Clone the Repository

git clone https://github.com/bashirafarhin/keeper.git

2. Navigate to the Project Directory

cd keeper/client

3. Install Frontend Dependencies

npm install

4. Configure Frontend Environment Variables

• Create a .env file in the client directory
• Copy the contents from .SampleEnvFile.txt present in client folder and fill it with your credentials

5. Start Frontend Development Server

npm run dev

The frontend will run on http://localhost:5173

Start Backend

1. On a new terminal, Navigate to Server Directory

cd keeper/server

2. Install Backend Dependencies

npm install

3. Configure Backend Environment Variables

• Create a .env file in the server directory
• Copy the contents from .SampleEnvFile.txt present in server folder and fill it with your credentials

4. Start Backend Server

nodemon index.js

The backend server will run on http://localhost:8000

API Documentation

Notes:

• All routes requiring authentication expect a valid token to be sent in the Authorization header as Bearer <jwt-token>.
• Headers:

{
  "Authorization": "Bearer <jwt-token>"
}

Register User

POST /register

Request:

{
  "email": "user@example.com",
  "password": "userPassword123"
}

Response:

• 201 Created:

{
  "token": "<jwt-token>",
  "user": {
    "_id": "<user-id>",
    "email": "user@example.com",
    "notes": ["consist notes objects"],
    "backgroundImageIndex": 0
  }
}

Login User

POST /login

Request:

{
  "email": "user@example.com",
  "password": "userPassword123"
}

Response:

• 200 Created:

{
  "token": "<jwt-token>",
  "user": {
  "_id": "<user-id>",
  "email": "user@example.com",
  "notes": ["consist notes objects"],
  "backgroundImageIndex": 0
  }
}

Register User Using Google

POST /registerGoogle

Request:

{
  "email": "user@example.com"
}

Response:

• 201 Created:

{
  "token": "<jwt-token>",
  "user": {
  "_id": "<user-id>",
  "email": "user@example.com",
  "notes": ["consist notes objects"],
  "backgroundImageIndex": 0
  }
}

Login Using Google

POST /loginGoogle

Request:

{
  "email": "john@doe.gmail.com"
}

Response:

• 200 OK:

{
  "token": "<jwt-token>",
  "user": {
  "_id": "<user-id>",
  "email": "user@example.com",
  "notes": ["consist notes objects"],
  "backgroundImageIndex": 0
  }
}

Logout User

GET /logout

• Requires token in the header for authorization

Response:

• 200 OK:

 { "message": "Logged Out Successfully" }

Delete User Account

DELETE /deleteAccount

• Requires token in the header for authorization

Response:

• 200 OK:

 { "message": "Account Deleted Successfully" }

Create a note

POST /user/addNote

• Requires token in the header for authorization

Request:

{
  "title": "title",
  "content": "content"
}

Response:

• 201 Created:

{
  "note": {
    "_id": "63b12f4c8c2a5b2f4f123abc",
    "title": "Sample Title",
    "content": "Sample Content"
  },
 "message": "Added note successfully."
}

Update a note

PUT /user/updateNote/:id

• id represents mongodb id of the note in the database
• Requires token in the header for authorization

Request:

{
  "title": "title",
  "content": "content"
}

Response:

• 200 Created:

{
 "message": "Updated note successfully."
}

Update the background

POST /user/updateBackground

• Requires token in the header for authorization

Request:

{
  "index": "index"
}

Response:

• 200 Created:

{
 "message": "Updated background successfully."
}

Delete a note

DELETE /user/deleteNote/:id

• id represents mongodb id of the note in the database
• Requires token in the header for authorization

Request:

Response:

• 200 Created:

{
 "message": "Note deleted successfully"
}

Gets user profile

GET /profile

• Requires token in the header for authorization

Response:

• 200 Created:

 {
 "user": {
  "_id": "<user-id>",
  "email": "user@example.com",
  "notes": ["contains notes object"],
  "backgroundImageIndex": "default background index or user defined"
  }
 }

---

Error Handling

Common Errors:

• 400 Bad Request:

  { "message": "Invalid input, Custom message will be shown" }

• 401 Unauthorized:

  { "message": "Unauthorized" }

• 500 Internal Server Error:

  { "message": "Something went wrong." }

Some Error Images

Environment Variables

Client

VITE_BACKEND_URL=
VITE_GOOGLE_CLIENT_ID=

Server

FRONTEND_URL=http://localhost:5173
GOOGLE_PASSWORD_SECRET=
GOOGLE_DEFAULT_PASSWORD='google'(you can enter any random string)
MONGODB_URL=mongodb://127.0.0.1:27017/keeper(if connecting locally)
JWT_SECRET=secret(you can enter any random string)

License

MIT License