Full-Stack Project Walkthrough

This walkthrough ties the whole Web Development track together by planning a small Notes app.

1. Requirements​

2. Data model​

users(id, email, password_hash, created_at)
notes(id, user_id -> users.id, title, body, created_at, updated_at)

3. API design​

See REST APIs and Authentication.

4. Repository layout​

notes-app/
  server/
    src/ (routes, controllers, services, middleware)
    tests/
  client/
    src/ (components, pages, hooks, api.js)
  docker-compose.yml
  README.md

5. Build order​

1. Backend skeleton: Express, health route, config from env.
2. Database: schema + migrations, connection pool.
3. Auth: register/login, hashed passwords, session cookie.
4. Notes API: CRUD with ownership checks and validation.
5. Front end: pages (login, notes list, editor), a small API client, loading and error states.
6. Tests: unit tests for services, API tests for auth and ownership, one end-to-end flow.
7. Deploy: containerise, set environment variables, run migrations, add CI.

6. Definition of done​

• A new user can register, create, edit and delete notes
• Another user cannot read or edit those notes (verified by a test)
• Empty and long inputs are validated on client and server
• README with screenshots, setup steps and a live link
• CI passes (lint, tests, build)

7. What to say in an interview​

Describe the problem, your data model, one trade-off (for example sessions vs JWT), the hardest bug and what you would improve next (caching, full-text search, offline support).