📝 NoteVault

Secure note-taking application with user authentication

A simple yet secure web application for creating, managing, and storing personal notes with JWT-based authentication.

---

🏗️ Project Structure

live-coding-2/
├── backend/
│   ├── app.py              ← Flask API server
│   ├── requirements.txt    ← Python dependencies
│   └── data/
│       └── db.json         ← JSON-based database (auto-created)
└── frontend/
    ├── index.html          ← Main application UI
    ├── script.js           ← Frontend logic
    └── style.css           ← Styling

---

🚀 Setup and Launch

Prerequisites

• Python 3.8 or higher
• A modern web browser
• A local web server for serving static files (e.g., Live Server, Python HTTP server)

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install Python dependencies:

pip install -r requirements.txt

3. Start the Flask server:

python app.py

The backend API will be available at http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Serve the static files using one of these methods:

Option A: Using Python's built-in server

python -m http.server 8080

Option B: Using Live Server (VS Code extension)

• Right-click on index.html and select "Open with Live Server"

Option C: Using Node.js http-server

npx http-server -p 8080

The frontend will be available at http://localhost:8080

---

🔑 Features

Authentication

• User registration with email validation
• Secure password hashing using bcrypt (with salt)
• JWT-based authentication with 1-hour token expiration
• Protected API endpoints requiring authentication

Notes Management

• Create new notes with title and content
• View all personal notes (sorted by last update)
• Edit existing notes
• Delete notes
• Each user can only access their own notes

Security Features

• Password hashing with bcrypt
• JWT token-based authentication
• Email format validation
• Minimum 8-character password requirement
• Authorization checks on all note operations
• Same error message for non-existent users and wrong passwords (prevents user enumeration)
• Input sanitization and length limits
• CORS configuration for allowed origins

---

🔌 API Endpoints

Authentication

• POST /register - Create new user account
• POST /login - Authenticate and receive JWT token

Notes (Requires Authentication)

• GET /notes - List all user's notes
• POST /notes - Create a new note
• GET /notes/<note_id> - Get a specific note
• PUT /notes/<note_id> - Update a note
• DELETE /notes/<note_id> - Delete a note

All authenticated requests must include:

Authorization: Bearer <your_jwt_token>

---

⚠️ Security Considerations

Implemented

• Bcrypt password hashing with salt generation
• JWT tokens with expiration (1 hour)
• Authorization checks on all protected endpoints
• Input validation and sanitization
• Email format validation
• User enumeration prevention
• CORS restrictions

Pending for Production

• Replace hardcoded SECRET_KEY with environment variable
• Implement rate limiting on login and registration endpoints
• Add HTTPS/SSL certificate
• Implement refresh token mechanism
• Add password reset functionality
• Set up proper logging and monitoring
• Database migration (consider PostgreSQL or MySQL for production)
• Add input length validation on frontend
• Implement CSRF protection if using cookies

---

📦 Dependencies

Backend

• flask==3.1.0 - Web framework
• flask-cors==5.0.0 - CORS handling
• bcrypt==4.2.1 - Password hashing
• PyJWT==2.10.1 - JWT token generation and validation

Frontend

• Vanilla JavaScript (no dependencies)
• Modern browser with fetch API support

---

🎯 Usage

1. Open the frontend in your browser at http://localhost:8080
2. Register a new account with your email and password (min 8 characters)
3. Login with your credentials
4. Create, edit, and manage your notes
5. Your session will expire after 1 hour of inactivity

---

🗄️ Data Storage

The application uses a simple JSON file (backend/data/db.json) for data persistence. The database structure:

{
  "users": [
    {
      "id": "uuid",
      "email": "user@example.com",
      "password": "bcrypt_hashed_password",
      "created_at": "ISO_timestamp"
    }
  ],
  "notes": [
    {
      "id": "uuid",
      "user_id": "user_uuid",
      "titulo": "Note title",
      "contenido": "Note content",
      "created_at": "ISO_timestamp",
      "updated_at": "ISO_timestamp"
    }
  ]
}

Note: The database file is automatically created on first run if it doesn't exist.