Skip to content

Latest commit

 

History

History
117 lines (87 loc) · 2.95 KB

README.md

File metadata and controls

117 lines (87 loc) · 2.95 KB

SyncNote

React Node.js Express MongoDB CSS Vercel Render

A full-stack cloud-based note-taking application with secure authentication, protected routes, and a modern dashboard. SyncNote allows users to create, edit, delete, and organize notes seamlessly across devices.

🚀 Features

  • Authentication – Signup/Login with JWT tokens.
  • Protected Routes – Only authenticated users can access notes.
  • Notes CRUD – Add, edit, delete, and view notes.
  • Categories – Organize notes into categories.
  • Cloud Storage – MongoDB Atlas ensures persistence.
  • Contact Form – Messages stored in DB with backend handling.
  • Responsive UI – Built with plain CSS.

🛠 Tech Stack

Frontend (client): React (Vite), CSS, Axios
Backend (server): Node.js, Express.js, MongoDB, JWT Authentication
Database: MongoDB Atlas
Deployment: Vercel (frontend), Render/Railway (backend)

Project Structure

SyncNote/
│
├── client/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ ├── App.jsx
│ │ ├── main.jsx
│ │ └── App.css
│ ├── index.html
│ ├── vite.config.js
│ ├── package.json
│ └── vercel.json
│
├── server/
│ ├── controllers/
│ │ ├── authController.js
│ │ ├── contactController.js
│ │ └── noteController.js
│ ├── middleware/
│ │ └── authMiddleware.js
│ ├── models/
│ │ ├── Contact.js
│ │ ├── Note.js
│ │ └── User.js
│ ├── routes/
│ │ ├── authRoute.js
│ │ ├── contactRoutes.js
│ │ └── noteRoute.js
│ ├── app.js
│ ├── package.json
│ └── LICENSE
│
├── .gitignore
└── README.md

⚙️ Installation

1. Clone the Repository

git clone https://github.com/your-username/syncnote.git
cd syncnote

2. Project Setup Guide

a. Backend Setup (server)

cd server
npm install

b. .env file setup (server)

MONGO_URI=your_mongodb_atlas_url
JWT_SECRET=your_secret_key
PORT=5000

c. Run backend

nodemon app.js

d. Frontend Setup

npm install

e. Run frontend

npm run dev