Module 14 — Capstone Project
Your final project — a real, deployed, full-stack application that is yours.
Overview 📋
The capstone is a full-stack web application that you design, build, and present. You choose the idea. You make the product decisions. You write all the code. It brings together everything from the program: React, Express, PostgreSQL, authentication, deployment, and clean code. The final presentation is in front of an audience at the end of the program.
Why This Matters 💡
The capstone is your primary portfolio piece. When you are job searching, this is what you will show employers. The quality of the idea matters less than the quality of the execution — a well-built, deployed, clearly-explained project stands out far more than an ambitious idea with rough code. Focus on doing the core features well.
Learning Goals 🎯
By the end of the capstone you will have:
- Built and deployed a full-stack application from scratch
- Made real product and architecture decisions independently
- Debugged and unblocked yourself across the entire stack
- Presented a technical project to an audience
- Written a README that explains the project clearly
Project Requirements
Your capstone must include:
- A React frontend with multiple views/routes (React Router)
- An Express backend with at least 4 working API routes
- A PostgreSQL database with at least 2 tables
- User authentication — users can sign up, log in, and their data is protected
- Full CRUD for at least one resource
- Deployed — live frontend URL and live backend URL, both working
- A README that explains what the app does, how to run it locally, and the tech stack
Nice to have (not required):
- External API integration
- Image upload
- Real-time features (WebSockets)
- Polished, responsive UI
Planning Guide
Start with the user, not the code. Ask:
- Who uses this app? One specific type of person.
- What problem does it solve for them?
- What are the 3 most important things they can do? These are your MVP features.
- What does each screen look like? Sketch it — even a rough drawing helps.
- What data do you need to store? These become your database tables.
Define your MVP early
An MVP (minimum viable product) is the smallest version of your idea that still demonstrates value. Cut features ruthlessly until you have something achievable in the time you have. A finished MVP is worth 10x more than an unfinished full vision.
Data model example
For a recipe app:
users
id, email, password_hash, created_at
recipes
id, title, description, instructions, user_id (foreign key), created_at
ingredients
id, name, quantity, unit, recipe_id (foreign key)
Build Phases
Build in this order:
- Idea & Setup — finalize your idea, create repos, scaffold frontend and backend
- Data model — design tables, generate models, run migrations
- Backend API — build and test all routes with Postman before touching the frontend
- Authentication — set up sign up, log in, and protected routes
- Frontend — build the UI one feature at a time, connecting to the API as you go
- Polish — clean up UI, handle edge cases, add error states
- Deploy — get it live before the presentation
- README — write clear setup instructions and describe the project
Common Pitfalls
- Trying to build too much. Cut scope early and often. Ship a working MVP.
- Skipping the planning phase. Jumping into code without a data model or wireframe leads to major rewrites later.
- Building frontend and backend simultaneously. Build and test the backend first. Connecting a frontend to a broken API doubles your confusion.
- Waiting until the last minute to deploy. Deployment almost always reveals issues. Deploy early and redeploy often.
- Neglecting error states. If your app crashes when data fails to load, that is what the audience will see. Handle errors.
- Skipping the README. Employers look at your GitHub. A repo with no README looks unfinished.
Presentation Tips
Your final presentation is approximately 10 minutes:
- What is the app? One or two sentences. What problem does it solve?
- Demo the app. Walk through the main user flow live. Have a backup (recording or screenshots) if live demo is risky.
- Show some code. Pick one part you are proud of — an interesting query, a component, a hook — and walk through it.
- What did you learn? One or two specific technical challenges you overcame.
- What would you add? If you had more time, what is next?
Practice out loud at least once before the real thing. Talking through your own code is a skill — it is exactly what technical interviews ask you to do.
Exercise 🏋️
All capstone work is tracked in the class repository:
ttpr-lagcc-spring-2026 → Capstone (opens in new tab)
Submit your project idea, repo links, and deployed URLs through the class repo. Check in with your instructor during the designated capstone sessions for feedback and unblocking.
Additional Resources 📚
- README template (opens in new tab) — a solid starting point for your project README
- Excalidraw (opens in new tab) — wireframe your UI and data model before building
- dbdiagram.io (opens in new tab) — visualize and design your database schema
- JWT.io (opens in new tab) — understand JSON Web Tokens for authentication
- Render docs — Deploy a Node.js app (opens in new tab) — production deployment reference
- Netlify docs (opens in new tab) — frontend deployment reference
Capstone Checklist
- My idea is defined and scoped to an achievable MVP
- I have a data model with at least 2 tables and a foreign key relationship
- My backend has at least 4 working API routes (tested in Postman)
- Users can sign up, log in, and their data is protected
- The frontend has multiple views connected to the API
- At least one resource has full CRUD in the UI
- The app is deployed — live frontend and backend URLs work
- My README explains what the app does and how to run it locally
- I have practiced my presentation out loud at least once