Capstone Projects — JavaScript Course

What you'll learn

The capstone phase turns isolated skills into evidence of engineering judgment. Build progressively, document tradeoffs, and make quality visible through accessibility, tests, security, performance, and deployment.

By the end of this lesson, you'll be able to:

Scope four progressive portfolio projects
Define architecture and acceptance criteria
Present evidence of professional quality

Core mental model

Use this decision table as a compact reference. Focus on what each tool means and when it earns its place in production code.

Concept	What it means	Decision rule
Vertical slice	Small end-to-end feature across real boundaries	Deliver one working journey before broad expansion
Acceptance criterion	Observable statement of done	Write before implementation and verify afterward
Architecture record	Short context, decision, and consequence note	Record choices future reviewers may question

Professional workflow

Build the behavior in small, observable steps. Each step should leave something you can inspect or test.

Describe the portfolio capstone boundary: inputs, outputs, state, timing, and expected failures.
Implement the smallest correct path with names that expose intent.
Add edge cases and failure handling before introducing abstractions.
Verify behavior with realistic data and one deliberately adversarial example.
Refactor only after the observable behavior is protected.

Make behavior observable

Before optimizing or abstracting, make inputs, outputs, state changes, timing, and failure paths visible. JavaScript becomes much easier to reason about when hidden work is exposed.

Guided code lab

Project 1 and 2 progression

Start with browser mastery, then add resilient external data and shareable state.

portfolio-roadmap.txt

PROJECT 1 — Accessible Task Planner
DOM rendering • forms • keyboard interaction • local persistence • modules • unit tests

PROJECT 2 — API-Powered Learning Dashboard
fetch • cancellation • URL state • loading/error/empty states • caching • performance budget

Project 3 and 4 progression

Add trusted server boundaries, then production architecture and operations.

advanced-roadmap.txt

PROJECT 3 — Full-Stack Course Platform
REST API • SQL • transactions • sessions • authorization • integration and E2E tests

PROJECT 4 — Production-Style Capstone
TypeScript • workers/background work • security controls • CI • observability • deployment

Write testable acceptance criteria

Every quality claim becomes observable evidence in the repository or running application.

acceptance.md

- A keyboard-only user can create, edit, filter, and delete a task.
- A cancelled API request cannot overwrite newer dashboard state.
- A learner cannot edit another learner's progress, verified by an integration test.
- The production build passes the agreed performance budget in CI.

Production practice

Contract

Write down the portfolio capstone quality target, ownership boundary, evidence, and acceptable tradeoffs.

Verification

Use repeatable automated checks plus a realistic end-to-end scenario; include failure and recovery behavior.

Operations

Track a small set of user-centered signals and revisit the decision when evidence changes.

Common failure mode

A portfolio with four unfinished feature lists is weaker than one polished vertical slice with clear decisions, tests, and a working deployment.

Independent workshop

Choose a domain you care about and complete the four-project progression, reusing lessons without copying tutorial branding.

Your finished workshop must include:

Live deployment and focused README for each project
Architecture diagram and decision records
Automated checks plus accessibility, security, and performance evidence
A short retrospective describing what you would change

Definition of done

Demonstrate the happy path and at least two edge cases, keep responsibilities separated, and add a short note explaining one design choice.

Recap & quick check

Key takeaways

Ship vertical slices
Acceptance criteria define done
Quality claims need evidence
Tradeoff explanations demonstrate senior judgment
A coherent portfolio tells a progression story

Quick check

1. What should you build first?

2. What makes an acceptance criterion useful?

3. What best demonstrates professional quality?

Keep the workshop. Later modules deliberately build on these decisions, so each exercise can become part of your final portfolio architecture.