personal-notes-app-

A fullstack note-taking app with JWT-based authentication, protected routes, and file-based data persistence. Users can securely sign up, log in, and manage their personal notes.

---

Deployement link

• Backend:https://personal-notes-app-w5ue.onrender.com
• Frontend:https://personal-note-appp.netlify.app/

🚀 Features

• ✅ User Signup and Login with JWT
• ✅ Protected note operations (create, fetch, delete)
• ✅ Notes tied to authenticated users
• ✅ Data saved to users.json and notes.json
• ✅ Responsive frontend with animated background
• ✅ Vanilla JS frontend with clean UI

---

📁 Folder Structure

---

⚙️ Setup Instructions

Backend

1. Navigate to the backend directory:

   cd backend

Install dependencies:

npm install Start the server:

• node server.js
• Ensure data files exist:
• mkdir -p data
• echo "[]" > data/users.json
• echo "[]" > data/notes.json
• Server will run at http://localhost:3000

Frontend

• You can open the HTML files directly in your browser or serve them with a local server.

• Recommended:

• Use the Live Server extension in VS Code.

Example structure to open

• frontend/signup.html
• frontend/login.html
• frontend/dashboard.html

🧪 Sample Note Object

{ "id": "note-id", "title": "My First Note", "content": "Learning fullstack is fun!", "userId": "id-from-jwt", "createdAt": "2025-05-13T10:00:00Z" }--- 🌈 UI Enhancements

• Animated background gradient

• Smooth transitions on form fields and buttons

• Responsive form layout

• ❗ Security Notes

• Passwords are stored in plain text (for learning purposes). Use bcrypt for hashing in production.

• J- WT is stored in localStorage. In real-world apps, use HttpOnly cookies for better security.

📋 Future Improvements

• Edit note (PUT /notes/:id)

• Token expiry handling (auto logout)

• Input validations & error UI

• Password hashing

• Pagination and search for notes

Sign up

Login

Dashboard