📝 Note-Taking App

A full-stack Note-Taking Web Application built using the MERN Stack with user authentication.

Users can securely register, log in, and manage their personal notes.

📸 Screenshots

🔐 Login Page

📝 Register Page

🏠 Home Page (before login)

🏠 Home Page (after login)

➕ Create Note

📋 Note Card (options)

📋 view Note Page

📋 edit Notes Page

👤 Profile Page

👤 Profile Page (change password)

---

🚀 Features

👤 User Authentication

• User Registration
• User Login
• Secure Authentication
• Logout
• Protected Routes
• User-specific notes

📝 Note Management

• Create notes
• View notes
• Edit notes
• Delete notes
• Manage personal notes

🎨 User Interface

• Clean and simple UI
• Responsive design
• Easy navigation
• User-friendly interface

---

🛠️ Technologies Used

Frontend

• React.js
• React Router
• Axios
• Tailwind CSS
• React Icons
• React-Redux

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

Authentication & Security

• JSON Web Token (JWT)
• bcryptjs
• Protected API Routes

---

📂 Project Structure

e-commerce/
│
├── frontend/
│   ├── public/
│   └── src/
│       ├── components/
│       ├── store/
│       ├── assets/
│       ├── App.jsx
│       └── main.jsx
│
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── app.js
│   └── index.js
│
├── imgs/
└── README.md

⚙️ Installation and Setup

1. Clone the Repository

git clone https://github.com/sachinwebdev369/note-app.git
cd note-app

2. Backend Setup

cd note-server
npm install

Create a .env file:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

Start the backend:

node index.js

or:

npm start

3. Frontend Setup

Open a new terminal:

cd note-client
npm install
npm run dev

📡 Main Functionality

Function	Description
Register	Create a new user account
Login	Authenticate an existing user
Logout	Sign out from the application
Create Note	Create a new personal note
Read Note	View saved notes
Update Note	Edit an existing note
Delete Note	Delete a note

🔒 Security

The application includes:

• Password hashing using bcryptjs
• JWT-based authentication
• Protected API routes
• User-specific notes
• Environment variables for sensitive information

🎯 Project Purpose

The main purpose of this project is to build a practical full-stack application using the MERN stack while implementing user authentication and CRUD functionality.

This project demonstrates how a React frontend communicates with a Node.js and Express.js backend and how MongoDB is used to store application data.