Template

Build a Full-Stack Web App

Build a full-stack web application and put it online: decide what it does, design the data and the interface, build the backend and frontend, test it, deploy it and iterate on real feedback.

This roadmap guides you step-by-step from raw idea to a deployed, live full-stack web application using TypeScript, Next.js, and PostgreSQL. At 10 hours per week across roughly 9 phases, you will learn the necessary fundamentals hands-on by immediately building real components of your application. Finishing this roadmap leaves you with a production web app deployed to real users, an automated continuous deployment pipeline, and the capability to design, build, test, and iterate on full-stack web software.

By the end: You will have designed, built, automated tests for, and deployed a live full-stack TypeScript web application with database persistence and authentication, and collected initial user feedback.

Starting levelBeginnerStyleBuilding things
10h / week9 phases22 tasks~83h total

This is the map — make this roadmap yours

It shows what this journey generally looks like. Tell Kaidoro your version of the goal and it builds the plan around where you are actually starting, what to do first, the hours you really have, and what you have already finished.

1

Product Definition and Thin-Slice Specification

Define the core problem your app solves, document strict scope boundaries, and write user stories before writing any code.

  • Write the one-page product spec and core user flow
    ~3hScope1 resource

    Clear product boundaries prevent scope creep and ensure you build an end-to-end feature before getting distracted by secondary tooling.

    You'll learn

    • User Story — a short, simple description of a feature told from the perspective of the person who desires the new capability
    • Scope Creep — the tendency for a project to grow beyond its original goals over time

    Document the single core problem your app solves, identify the target user, and outline the primary user flow in 3 to 5 clear steps.

    Done when: A one-page document exists defining the target user, the primary problem, and the exact step-by-step path a user takes to get value.

    How to work through it

    1. Write down the single problem the application solves in two sentences
    2. Identify the target audience and their primary motivation
    3. Map the primary user journey from landing on the site to achieving their goal in under 5 steps
  • Define the explicit non-goals and cut features for V1
    ~2hScope

    Writing down what you are deliberately not building keeps your development velocity focused on shipping the core loop.

    You'll learn

    • MVP (Minimum Viable Product) — the simplest version of a product that delivers real value to users
    • Non-Goals — explicit statements of what a project will deliberately avoid doing

    List every secondary feature idea (such as custom avatars, dark mode, social logins, complex billing) and explicitly mark them as excluded from Version 1.

    Done when: A written 'Out of Scope for V1' list contains at least 5 features that will be deliberately ignored until after initial release.

    How to work through it

    1. Brainstorm all secondary feature ideas that come to mind
    2. Categorise features into 'Must have for core loop' versus 'Nice to have later'
    3. Move all 'Nice to have' items to a documented 'V1 Non-Goals' section
2

UI Wireframing and Data Schema Design

Design the screen layouts and data models required to support your core user flow.

  • Sketch low-fidelity UI wireframes for every core screen
    ~4hScope1 resource

    Visualising interface structure before coding saves hours of rewriting markup and CSS layouts later.

    You'll learn

    • Wireframe — a low-fidelity visual guide that represents the skeletal framework of a webpage
    • Information Architecture — the structural design of shared information environments

    Sketch the structural layout for each screen in your application (landing, authentication, main dashboard, creation modal, detail view) using paper or a free design tool.

    Done when: You have wireframe sketches for every screen in the user flow showing layout, buttons, forms, and data display areas.

    How to work through it

    1. Identify every distinct view or modal the user will encounter
    2. Sketch the layout for desktop and mobile screens
    3. Annotate all interactive elements like buttons, inputs, and navigation links
  • Design the relational database schema
    ~4hBuild1 resource

    A clean relational schema ensures data integrity and makes writing backend queries straightforward.

    You'll learn

    • Primary Key — a unique identifier for a database record
    • Foreign Key — a column that creates a link between two database tables
    • Relational Schema — the formal structure of a database defined in terms of tables and relationships

    Map out the database entities, attributes, primary keys, and relationships needed to store your application's state.

    Done when: An entity relationship diagram or written schema lists all tables, column types, and foreign key relationships.

    How to work through it

    1. List all primary entities (e.g. User, Post, Item, Comment)
    2. Define the attributes and data types (text, integer, boolean, timestamp) for each entity
    3. Define primary keys and foreign key relationships (one-to-many, many-to-many)
3

Development Environment and TypeScript Setup

Initialize your full-stack repository with TypeScript, Next.js, Git, and styling tooling.

  • Set up Node.js, Git, and initialize a Next.js TypeScript project
    ~3hBuild1 resource

    Starting with a unified TypeScript full-stack framework provides a single build toolchain for both frontend pages and backend endpoints.

    You'll learn

    • Node.js — JavaScript runtime environment for executing code outside the browser
    • TypeScript — typed superset of JavaScript that compiles to plain JavaScript
    • Next.js — full-stack React framework providing routing, server components, and API routes
    • Git — distributed version control system for tracking code changes

    Install Node.js and Git on your system, initialize a Git repository, and scaffold a full-stack Next.js project configured with TypeScript and Tailwind CSS.

    Done when: Running npm run dev serves a starter page at localhost:3000 with TypeScript compilation passing without errors.

    How to work through it

    1. Install Node.js LTS and Git
    2. Run `create-next-app` with TypeScript, ESLint, and Tailwind CSS options enabled
    3. Make an initial commit and push the repository to GitHub
  • Configure linting, formatting, and strict TypeScript types
    ~2hBuild

    Strict TypeScript settings catch potential runtime bugs at compile time before they ever reach a browser.

    You'll learn

    • ESLint — static code analysis tool for identifying problematic patterns in JavaScript/TypeScript
    • Prettier — opinionated code formatter that enforces consistent style across files

    Configure Prettier for automated code formatting and enable strict type checking in tsconfig.json.

    Done when: Running npm run lint and npx tsc --noEmit exits cleanly with zero errors on the initial codebase.

    How to work through it

    1. Ensure `strict: true` is enabled in `tsconfig.json`
    2. Install Prettier and configure an automated format script in `package.json`
    3. Run lint and type checks to confirm clean execution
4

Database Provisioning and ORM Integration

Set up a local or hosted PostgreSQL database and connect it to your application using Prisma ORM.

  • Provision a PostgreSQL database and install Prisma
    ~3hBuild1 resource

    An ORM translates TypeScript models into database tables and provides type-safe query methods.

    You'll learn

    • PostgreSQL — powerful, open-source object-relational database system
    • Prisma — modern type-safe ORM for Node.js and TypeScript
    • Environment Variables — external configuration values stored outside code repositories

    Provision a cloud PostgreSQL instance (e.g. via Supabase or Neon) or local Docker Postgres, install Prisma CLI, and connect your app using an environment variable connection string.

    Done when: The Prisma client successfully connects to the PostgreSQL database from a simple Node script.

    How to work through it

    1. Provision a free PostgreSQL database instance
    2. Install Prisma and initialize it in your project with `npx prisma init`
    3. Add the database connection string to your `.env` file and test connection
  • Write Prisma schema and execute initial database migration
    ~4hBuild

    Database migrations track schema changes over time in version control, making environments reproducible.

    You'll learn

    • Database Migration — controlled, reversible changes to a database schema over time
    • Prisma Schema — declarative configuration file defining data models and relations

    Translate your relational schema into Prisma schema syntax and run a migration to generate database tables.

    Done when: Running npx prisma migrate dev creates all designated tables and Prisma Studio displays the empty models.

    How to work through it

    1. Define models, fields, types, and relations in `prisma/schema.prisma`
    2. Run `npx prisma migrate dev --name init` to apply changes to PostgreSQL
    3. Inspect created tables using `npx prisma studio`
  • Create a database seed script with sample data
    ~3hBuild

    Having realistic test data immediately available lets you develop UI components without manually typing placeholder content.

    You'll learn

    • Database Seeding — populating a database with an initial set of data for development or testing

    Write a TypeScript seed script that populates your database with realistic dummy records for development testing.

    Done when: Running npx prisma db seed fills the database with at least 10 realistic test records across all primary models.

    How to work through it

    1. Write `prisma/seed.ts` using `@prisma/client` to insert sample records
    2. Configure the seed command in `package.json`
    3. Run the seed script and verify records inside Prisma Studio
5

Backend API Routes and Server Actions

Build type-safe backend endpoints to handle Create, Read, Update, and Delete (CRUD) operations on your database.

  • Implement input validation using Zod schemas
    ~3hBuild1 resource

    Validating input at the API boundary protects your database from invalid data types and malicious inputs.

    You'll learn

    • Zod — TypeScript-first schema declaration and validation library with static type inference
    • Input Sanitization — cleaning and checking untrusted user input before processing

    Define Zod schemas that validate request payloads before they are passed to database queries.

    Done when: Valid data passes parsing and invalid payloads throw clear, descriptive validation errors.

    How to work through it

    1. Install Zod in your project
    2. Create validation schemas matching the required fields for creation and update actions
    3. Write helper functions to safely parse and return typed validation results
  • Build CRUD server actions and route handlers
    ~5hBuild

    Server actions provide direct, type-safe execution of backend logic from frontend components without boilerplate API routing.

    You'll learn

    • Server Actions — asynchronous functions executed on the server called directly from client components
    • CRUD — the four basic operations of persistent storage: Create, Read, Update, Delete

    Implement server actions or API route handlers that query the database using Prisma and return typed responses.

    Done when: You can create, read, update, and delete entities via server actions and verify database changes.

    How to work through it

    1. Create server functions for fetching lists and individual items with Prisma
    2. Create mutation functions for adding, updating, and deleting items with Zod validation
    3. Add error handling with try-catch blocks and explicit error status returns
6

Frontend Interface and State Management

Build interactive React components, forms, and responsive layouts connected to your backend.

  • Build reusable UI components and layout shell
    ~4hBuild1 resource

    Building a consistent component library first prevents repetitive styling and simplifies page assembly.

    You'll learn

    • Tailwind CSS — utility-first CSS framework for rapid UI styling
    • React Props — mechanisms for passing data into components
    • Responsive Design — designing interfaces that adapt gracefully across viewport sizes

    Implement the shared navigation bar, footer, button variants, input fields, and modal containers using Tailwind CSS.

    Done when: Reusable button, input, and layout components render consistently across both desktop and mobile viewports.

    How to work through it

    1. Build the global responsive navigation and footer shell in `app/layout.tsx`
    2. Create base form components (Button, Input, Textarea, Badge)
    3. Ensure accessible HTML tags and mobile-responsive breakpoints
  • Build data display views and list filters
    ~5hBuild

    Handling loading, empty, and populated states ensures the application feels solid and polished under varying data conditions.

    You'll learn

    • Server Components — React components rendered on the server that reduce client-side bundle size
    • URL Search Params — query parameters stored in the browser URL to maintain shareable filter state

    Construct pages that render database items with pagination or search filters and empty states when no items match.

    Done when: Navigating to the main dashboard displays items loaded from the database, handles search filtering, and shows an empty state if no records exist.

    How to work through it

    1. Fetch data server-side and render item cards or table rows
    2. Implement URL search params for filtering and query state
    3. Add empty state visual components when data arrays are empty
  • Build interactive forms with validation and pending states
    ~5hBuild

    Clear loading indicators and inline errors give users confidence that their actions are processing correctly.

    You'll learn

    • Form Handling in React — managing input state, submit events, and server synchronization
    • Optimistic UI — updating the interface immediately before receiving server confirmation

    Build forms for creating and editing records, showing inline field validation errors and disabling submission buttons during loading.

    Done when: Submitting an invalid form displays inline errors, and submitting valid data shows a loading indicator, updates the database, and redirects to the updated list.

    How to work through it

    1. Create form components using React hooks (`useActionState` / `useTransition`)
    2. Wire form submissions to backend server actions
    3. Display field-level error messages returned from Zod validation
    4. Implement optimistic updates or router revalidation on successful submit
7

User Authentication and Authorization

Implement secure user signup, login, session persistence, and data ownership protection.

  • Integrate authentication provider with NextAuth or Clerk
    ~5hBuild1 resource

    Using a vetted authentication library avoids critical security vulnerabilities associated with custom password hashing and session tokens.

    You'll learn

    • JWT (JSON Web Token) — compact, URL-safe means of representing claims between parties
    • Session Management — tracking a user's authenticated status across multiple requests

    Install and configure an authentication library (such as Auth.js / NextAuth or Clerk) to support email/password or OAuth login.

    Done when: A new user can sign up, log in, view their protected profile session, and log out successfully.

    How to work through it

    1. Install auth library and configure session providers
    2. Set up auth environment secrets and API route handlers
    3. Build login, signup, and user menu interface components
  • Enforce row-level ownership and route protection
    ~4hBuild

    Authentication identifies who a user is; authorization enforces what they are allowed to see and modify.

    You'll learn

    • Authentication vs Authorization — verifying identity versus verifying permissions
    • Next.js Middleware — code that runs before a request is completed to inspect and modify requests/responses

    Protect private routes with middleware and update database queries to guarantee users can only read, edit, or delete records they own.

    Done when: Unauthenticated users are redirected to login when accessing private routes, and attempting to edit another user's record returns a 403 Forbidden error.

    How to work through it

    1. Add Next.js middleware to intercept and protect dashboard routes
    2. Associate newly created records with the authenticated user ID
    3. Add authorization checks to server actions preventing unauthorized mutations
8

Automated Testing and Quality Verification

Write automated unit tests for business logic and end-to-end tests for the critical user path.

  • Write unit and integration tests with Vitest
    ~4hTest1 resource

    Fast unit tests verify that edge cases and validation rules behave predictably without needing a browser.

    You'll learn

    • Vitest — fast unit test framework powered by Vite
    • Unit Testing — testing individual functions in isolation from external dependencies

    Set up Vitest and write unit tests for your data validation schemas, helper functions, and database query logic.

    Done when: Running npm run test executes all unit tests and reports 100% passing results.

    How to work through it

    1. Install Vitest and test configuration
    2. Write tests verifying valid and invalid Zod schema inputs
    3. Write tests verifying data transformation and utility functions
  • Write an end-to-end test for the critical user flow using Playwright
    ~5hTest1 resource

    End-to-end tests ensure that your frontend, backend, and database all interact successfully in a real browser environment.

    You'll learn

    • Playwright — framework for automated end-to-end web testing across modern browser engines
    • End-to-End (E2E) Testing — testing the entire application flow from the UI layer to the database

    Install Playwright and write an automated browser test that logs in, creates a new item, verifies it appears in the list, and deletes it.

    Done when: Running npx playwright test opens a headless browser, executes the full CRUD user journey, and passes cleanly.

    How to work through it

    1. Install Playwright with `npm init playwright@latest`
    2. Write an E2E test file covering the primary user story from start to finish
    3. Run Playwright in both UI mode and headless mode to verify stability
9

Production Deployment, CI/CD, and Feedback Loop

Deploy your application to production infrastructure, configure continuous deployment, and test with real users.

  • Deploy the database and application to production
    ~4hShip1 resource

    Deploying early to a production environment exposes configuration bugs and environment differences before inviting users.

    You'll learn

    • Vercel — cloud platform for serverless and frontend deployment optimized for Next.js
    • Continuous Deployment — automatically releasing changes to production when code is pushed

    Deploy your PostgreSQL database to production and deploy your Next.js project to Vercel or Railway with production environment variables.

    Done when: The web application is accessible over HTTPS on a public URL and all CRUD features work in production.

    How to work through it

    1. Run production database migrations on the live database
    2. Link your GitHub repository to Vercel or Railway
    3. Configure production environment variables in the hosting dashboard
    4. Trigger a deployment and verify the live public URL
  • Configure GitHub Actions automated test pipeline
    ~3hShip1 resource

    Automated CI ensures that broken code cannot be merged without failing visible checks.

    You'll learn

    • CI (Continuous Integration) — practice of automating the integration and verification of code changes
    • GitHub Actions — workflow automation tool built into GitHub for building and testing code

    Set up a GitHub Actions workflow that automatically runs TypeScript checks, linting, and tests on every git push or pull request.

    Done when: Pushing a commit to GitHub automatically triggers a GitHub Actions run that passes with a green checkmark.

    How to work through it

    1. Create `.github/workflows/ci.yml` in the repository
    2. Define steps to install dependencies, run linting, check types, and run tests
    3. Push a test branch to GitHub and confirm workflow execution
  • Conduct user observation sessions with 3 real users and log feedback
    ~4hShip

    Observing real people using your software reveals usability bottlenecks and broken assumptions you cannot see yourself.

    You'll learn

    • Usability Testing — evaluating a product by testing it on representative users
    • Think-Aloud Protocol — method where test participants speak their thoughts continuously as they perform tasks

    Share the live URL with 3 real people, observe them attempting to complete the core user flow without your assistance, and document friction points.

    Done when: You have written notes from observing 3 users including at least 3 concrete usability bugs or points of confusion to fix.

    How to work through it

    1. Send the live deployment link to 3 target users
    2. Ask them to complete the primary goal while sharing their screen or thinking aloud without hints
    3. Record unexpected roadblocks, confusing error messages, and failed attempts into an issue tracker
  • Ship an iteration release addressing top user feedback
    ~4hShip

    Completing the loop by iterating on real user feedback transforms a static project into responsive, maintained software.

    You'll learn

    • Iterative Development — refining software through repeated cycles of implementation, feedback, and refinement
    • Regression Testing — testing existing features to ensure new changes have not broken existing functionality

    Fix the top 2-3 usability issues discovered during user observation, push changes to trigger automated tests, and deploy the updated release.

    Done when: An updated version is live on your production URL resolving the documented friction points with all automated tests passing.

    How to work through it

    1. Prioritize the top 2 usability fixes from user observation notes
    2. Implement code fixes and add regression tests where appropriate
    3. Commit and push changes to master, verifying CI checks pass and production redeploys

How the plan fits together

9 phases in 9 stages. Anything on the same row can be worked on at the same time.

An arrow points from a phase to the work it unlocks: before starting any phase, every phase with an arrow into it has to be finished first.

STARTSTAGE 2STAGE 3STAGE 4STAGE 5STAGE 6STAGE 7STAGE 8STAGE 91Product Definition andThin-Slice Specification2 tasks · ~5h2UI Wireframing and DataSchema Design2 tasks · ~8h3Development Environmentand TypeScript Setup2 tasks · ~5h4Database Provisioning andORM Integration3 tasks · ~10h5Backend API Routes andServer Actions2 tasks · ~8h6Frontend Interface andState Management3 tasks · ~14h7User Authentication andAuthorization2 tasks · ~9h8Automated Testing andQuality Verification2 tasks · ~9h9Production Deployment,CI/CD, and Feedback Loop4 tasks · ~15h

Resources

16 in this plan's library, beyond the links on individual tasks.

Learning & Documentation

Official documentation and guides for TypeScript, Next.js, and Prisma.

  • Auth.js Documentation

    Implement secure authentication, session handling, and route protection integrated with Prisma adapters.

    authjs.dev · Auth.js Team · Official Documentation · Free · Intermediate

  • Full Stack Open

    University-level full-stack course providing deep coverage of TypeScript, automated testing, relational databases, and deployment pipelines.

    fullstackopen.com · University of Helsinki · Course · Free · Intermediate to Advanced

  • Next.js App Router Documentation

    Comprehensive guide for implementing Server Actions, Route Handlers, and React Server Components.

    nextjs.org · Vercel · Official Documentation · Free · Intermediate

  • Next.js Learn (Foundations & Dashboard App)

    Official interactive tutorial for building full-stack applications with Next.js and TypeScript, best used when learning App Router, Server Actions, and authentication workflows.

    nextjs.org · Vercel · Interactive Tutorial · Free · Beginner

  • Playwright Documentation

    Essential reference for writing end-to-end tests to verify user authentication and core CRUD flows.

    playwright.dev · Microsoft · Official Documentation · Free · Intermediate

  • Prisma Documentation & Quickstart Guides

    Comprehensive documentation for modeling relational schemas, running database migrations, and executing type-safe queries using Prisma Client.

    prisma.io · Prisma Data, Inc. · Documentation · Free · Intermediate

  • Tailwind CSS Documentation

    Reference for styling responsive interfaces and composable UI elements rapidly.

    tailwindcss.com · Tailwind Labs · Official Documentation · Free · Beginner

  • The TypeScript Handbook

    Official guide to TypeScript syntax and compiler configuration, ideal for establishing end-to-end static type safety in your project.

    typescriptlang.org · Microsoft · Documentation · Free · Beginner to Intermediate

  • Zod Documentation

    Use to validate incoming form payloads and API parameters with end-to-end static type inference.

    zod.dev · Colin McDonnell · Official Documentation · Free · Intermediate

Developer Tools & Hosting

Cloud hosting platforms, database providers, and CI services.

  • Figma

    Use during Phase 2 to map user journeys and create interactive wireframes before writing frontend code.

    figma.com · Figma · Design Tool · Free tier available · Beginner

  • Neon Serverless Postgres

    Serverless PostgreSQL platform offering instant branching for isolated schema migration testing without production downtime.

    neon.tech · Neon, Inc. · Database Hosting · Free tier available; paid plans start at $19/month · Beginner to Intermediate

  • Playwright

    End-to-end testing library used to automate browser testing across critical user flows like authentication and CRUD operations.

    playwright.dev · Microsoft · Testing Framework · Free · Intermediate

  • Supabase

    Quickly provision a hosted PostgreSQL database instance with connection pooling support for serverless environments.

    supabase.com · Supabase · Cloud Database Provider · Free tier available · Beginner

  • Vercel

    Deployment platform that automates preview environments, production builds, and edge function hosting directly from Git commits.

    vercel.com · Vercel Inc. · Cloud Platform · Free Hobby tier; Pro tier $20/user/month · Beginner

Communities & Feedback

Forums to share builds, ask questions, and recruit user testers.

  • Indie Hackers

    Founder and developer forum ideal for sharing thin-slice specifications, launching MVPs, and gathering user feedback.

    indiehackers.com · Indie Hackers, Inc. · Online Community · Free · Beginner

  • Next.js Discussions on GitHub

    Official developer community hub for troubleshooting Next.js App Router architecture, Server Actions, and deployment issues.

    Vercel / Next.js Community · Discussion Forum · Free · Beginner to Advanced