Skip to content
WebDev Path

Full-stack app with accounts

A task manager, booking app or job board where users sign up and manage their own data.

  • Next.js
  • PostgreSQL
  • Drizzle or Prisma
  • Auth.js

The project for module 5, Backend and databases. It proves: apis, database design, authentication, security and testing.

Who it's for

  • As a user, I can sign up, log in and log out
  • As a user, I can create, edit and delete my own items
  • As a user, I can never see someone else's items

Pick your version

Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.

  1. Option A

    Task manager with projects and due dates

  2. Option B

    Booking app for a barber or tutor with time slots

  3. Option C

    Job board where companies post and people save jobs

Warm up first

Two short builds that practise the skills this project needs. About 3.5 hours in total.

Notes REST API

2 h

Create, read, update and delete notes through API routes, tested with curl or Postman.

  1. Build GET and POST on /api/notes and GET, PATCH and DELETE on /api/notes/[id]
  2. Validate every request body with Zod
  3. Return the right status codes: 201, 400, 404
  4. Test each route and save the requests in a file

Done when: Every route returns the right status code for both good and bad requests.

  • Route handlers
  • HTTP status codes
  • Validation

Database for a booking app

1.5 h

Design and create the tables for a booking app: users, services and bookings.

  1. Draw the 3 tables and their relations
  2. Write the schema in Drizzle with foreign keys
  3. Add a unique rule so one time slot can't be booked twice
  4. Write a script that inserts sample data and lists one user's bookings

Done when: Trying to book a taken slot fails with a database error you handle.

  • Relations
  • Constraints
  • Migrations

Build plan

7 steps in order. Each one ends with a clear check, so you always know when to move on.

  1. Design the database

    Draw your tables and how they relate, for example users, projects and tasks.

    Done when: Every table has a primary key, and every item that belongs to a user has a user_id column.

    Stuck? Show a hint

    Draw it on paper first. Changing a drawing is free, changing a live database isn't.

  2. Set up Postgres and the ORM

    Create a free Neon database, write your schema with Drizzle or Prisma, and run the first migration.

    Done when: The tables exist and you can insert a row from a script.

    Stuck? Show a hint

    Keep DATABASE_URL in .env.local and add .env*.local to .gitignore before your first commit.

  3. Add sign-in

    Add Auth.js with GitHub sign-in and protect your app pages.

    Done when: Signed-out visitors are sent to the sign-in page.

    Stuck? Show a hint

    Check the session on the server in every protected page and action, not only in the UI.

  4. Create and list

    Build a form that creates an item with a Server Action, and a page that lists the user's items.

    Done when: New items appear for the user who made them and nobody else.

    Stuck? Show a hint

    Validate input with Zod on the server. Never trust what the browser sends.

  5. Edit and delete safely

    Add edit and delete, checking ownership on every request.

    Done when: Changing an id in the request can't touch someone else's item. Try it.

    Stuck? Show a hint

    Put the owner check in the database query itself: WHERE id = ? AND user_id = ?.

  6. Tests and CI

    Write at least 10 tests for validation and ownership, and run them on every push with GitHub Actions.

    Done when: A green check shows next to your commits on GitHub.

    Stuck? Show a hint

    Test the rules, not the UI: wrong owner, empty title, too-long text.

  7. Ship it

    Deploy on Vercel with your environment variables and write a README with setup steps.

    Done when: A friend can sign up on the live site and use it.

    Stuck? Show a hint

    Add a 'Security' section to the README listing how you protect user data. Clients love that.

Requirements

Tick each one when it's done. Saved to your account.

Go further

Optional. One of these makes your project stand out from the tutorial version.

  • Email verification
  • Role-based access (admin vs user)

Starter kit

Free APIs, tools and docs for this project.

Submit

Tick the 6 remaining requirements to submit.