UNIT 6

Full Stack Capstone Project

Class 9 • 7 Weeks • Complete Study & Project Guide
7 Topics | 21 Examples | 21 Exercises | Full Project Roadmap

📅 7-Week Project Roadmap

Week Topic Deliverable

Week 1 Project Planning — Problem statement, Project Proposal Document
wireframes, tech stack
Week 2 Database Design — ER diagram, schema Complete DB schema & seed data
design, seed data
Weeks 3– Back-End Development — Flask API, REST Functional API with 5+ endpoints
4 endpoints, auth
Week 4–5 Front-End Development — React, routing, Connected front-end interface
API integration
Week 5–6 Integration & Testing — End-to-end Fully integrated working application
testing, bug fixing
Week 6 Deployment — Firebase/Render/Vercel, Live deployed app with URL
domain, env vars
Week 7 Project Exhibition — Demo, Q&A, Annual Tech Exhibition
documentation, peer review

TOPIC 1: Project Planning

Problem statement · Target users · Features · Wireframing · Tech stack

What is Project Planning?

Project planning is the first and most important step in building any software. A well-planned project
saves weeks of wasted work. In this phase, you decide WHAT you are building, WHO it is for, and HOW
you will build it — before writing a single line of code.

🎯 Goal: By the end of Week 1, submit a Project Proposal Document that your teacher approves before
you start coding.

▶ Step 1 — Problem Statement

A problem statement describes the real-world problem your app will solve. A good problem statement is
clear, specific, and focused on a real user need.

Bad problem statement: "I want to make a school app."

Good problem statement: "Students at our school cannot easily track their homework assignments and
deadlines. A web app that lets students log assignments, set due dates, and get reminders would solve
this problem."

✅ Example 1
Three example problem statements for student projects:
Project Idea 1: Library Management
Problem: Students waste time searching for available books.
Solution: A web app where students search, reserve, and track
borrowed books online.

Project Idea 2: Student Attendance Tracker

Problem: Teachers manually take attendance on paper, which is
slow and error-prone.
Solution: An app where teachers mark attendance digitally and
parents can view their child's attendance.

Project Idea 3: School Canteen Order System

Problem: Long queues at the canteen during lunch break.
Solution: Students pre-order food online and pick it up without
waiting in line.

▶ Step 2 — Target Users & Features List

Define exactly who will use your app and what features they need. Use MoSCoW prioritisation:
Must Have: Core features without which the app doesn't work.
Should Have: Important features that improve the app significantly.
Could Have: Nice-to-have features if time allows.
Won't Have: Features explicitly out of scope for this version.

✅ Example 2
Features list for a Homework Tracker app:
Target Users: Class 9 students and their teachers

MUST HAVE:
✅ Student registration & login
✅ Add homework with subject, description, due date
✅ View all pending homework
✅ Mark homework as complete

SHOULD HAVE:
🔶 Filter homework by subject
🔶 Dashboard showing overdue items
🔶 Teacher can post assignments to whole class

COULD HAVE:
🔷 Email/SMS reminders before due date
🔷 Dark mode

WON'T HAVE (this version):

❌ Mobile app
❌ Parent portal
▶ Step 3 — Wireframing
A wireframe is a simple sketch (on paper or a tool like Figma/Excalidraw) showing the layout of each
screen. Wireframes are low-detail — just boxes and labels, no colours or images.

Key screens to wireframe: Login page, Home/Dashboard, Main feature pages, Forms (Add/Edit), Error
pages.

✅ Example 3
Tech stack selection — choosing the right tools:
Tech Stack Decision Template:

FRONT-END:
Framework : [Link]
Styling : CSS / Tailwind CSS
Routing : React Router DOM

BACK-END:
Language : Python
Framework : Flask
Auth : Flask-JWT-Extended or Firebase Auth

DATABASE:
Option A : MySQL (for structured/relational data)
Option B : Firebase Firestore (for real-time/flexible data)

STORAGE:
Firebase Storage (for images/files)

DEPLOYMENT:
Front-end : Firebase Hosting / Vercel
Back-end : Render / Railway

VERSION CONTROL:
Git + GitHub

✅ Tip: Always start with the simplest tech stack that solves the problem. Don't add complexity you don't
need.

✏️ Exercises — Topic 1: Project Planning

✏️Exercise 1
Write your own Problem Statement: Think of a real problem in your school or daily life. Write a 3-4
sentence problem statement explaining: (a) who faces the problem, (b) what the problem is, (c) how a
web app would solve it.

✏️Exercise 2
Create a Features List using MoSCoW for your app idea. List at least: 4 Must Have, 3 Should Have, 2
Could Have, and 2 Won't Have features. Justify each Must Have with one sentence.
 ✏️Exercise 3
Choose your Tech Stack: For your project, write down your chosen tech stack with one sentence
justifying each choice. Then draw (on paper) wireframes for at least 3 key screens of your app.

TOPIC 2: Database Design

ER Diagram · Schema design · MySQL or Firestore setup

Why Database Design Comes First?

Your database is the foundation of your application. Poor database design causes bugs, slow
performance, and data loss that are very difficult to fix later. Good design before coding saves enormous
time.

▶ ER Diagram (Entity Relationship Diagram)

An ER diagram visually shows all entities (tables) in your system, their attributes (columns), and the
relationships between them (one-to-many, many-to-many, etc.).

Entity: A real-world thing to store data about. E.g., Student, Teacher, Subject, Order.
Attribute: A property of an entity. E.g., Student has: id, name, email, class.
Relationship: How entities are connected. E.g., Student TAKES many Subjects.

One-to-Many (1:N): One student has many homework entries.

Many-to-Many (M:N): Many students take many subjects (needs a junction table).
One-to-One (1:1): One user has one profile.

✅ Example 1
ER Diagram for a Homework Tracker — entities and relationships:
Entities & Attributes:

USERS
user_id (PK), name, email, password_hash,
role ('student'|'teacher'), class, created_at

SUBJECTS
subject_id (PK), subject_name, teacher_id (FK→USERS)

HOMEWORK
hw_id (PK), title, description, subject_id (FK→SUBJECTS),
teacher_id (FK→USERS), due_date, created_at

SUBMISSIONS
sub_id (PK), hw_id (FK→HOMEWORK),
student_id (FK→USERS), submitted_at, status

Relationships:
USERS ──────< HOMEWORK (teacher posts many homework items)
SUBJECTS ───< HOMEWORK (subject has many homework items)
HOMEWORK ───< SUBMISSIONS (homework has many submissions)
 USERS ──────< SUBMISSIONS (student makes many submissions)

✅ Example 2
MySQL Schema — CREATE TABLE statements with all constraints:
CREATE DATABASE homework_tracker;
USE homework_tracker;

CREATE TABLE users (

user_id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(60) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
password_hash VARCHAR(255) NOT NULL,
role ENUM('student','teacher') DEFAULT 'student',
class VARCHAR(10),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE subjects (

subject_id INT PRIMARY KEY AUTO_INCREMENT,
subject_name VARCHAR(50) NOT NULL,
teacher_id INT,
FOREIGN KEY (teacher_id) REFERENCES users(user_id)
);

CREATE TABLE homework (

hw_id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(100) NOT NULL,
description TEXT,
subject_id INT,
teacher_id INT,
due_date DATE NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (subject_id) REFERENCES subjects(subject_id),
FOREIGN KEY (teacher_id) REFERENCES users(user_id)
);

✅ Example 3
Seed data — populating test data so you can develop and test:
-- Seed users
INSERT INTO users (name, email, password_hash, role, class) VALUES
('Mrs Sharma', 'sharma@[Link]', 'hashed_pw_1', 'teacher', NULL),
('Alice', 'alice@[Link]', 'hashed_pw_2', 'student', '9A'),
('Bob', 'bob@[Link]', 'hashed_pw_3', 'student', '9A');

-- Seed subjects
INSERT INTO subjects (subject_name, teacher_id) VALUES
('Mathematics', 1), ('Science', 1), ('English', 1);

-- Seed homework
INSERT INTO homework (title, description, subject_id, teacher_id, due_date) VALUES
('Algebra worksheet', 'Complete exercises 1-20', 1, 1, '2025-08-20'),
('Lab report', 'Write up experiment 3', 2, 1, '2025-08-22');

-- Verify
SELECT [Link], [Link], h.due_date
FROM homework h
 JOIN users u ON h.teacher_id = u.user_id
JOIN subjects s ON h.subject_id = s.subject_id;

💡 Pro Tip: Always create seed data before building the front-end. Realistic test data helps you catch bugs
early and makes development much faster.

✏️ Exercises — Topic 2: Database Design

✏️Exercise 1
Draw an ER diagram for your capstone project on paper: (a) List all entities, (b) List attributes for each
entity, (c) Draw the relationships with correct cardinality (1:N, M:N), (d) Identify all primary keys and
foreign keys.

✏️Exercise 2
Write all CREATE TABLE statements for your project's database. Include: (a) appropriate data types, (b)
NOT NULL and UNIQUE constraints, (c) AUTO_INCREMENT primary keys, (d) FOREIGN KEY
references between tables.

✏️Exercise 3
Write seed data INSERT statements: Add at least 3 rows to each table. Make the data realistic and
connected (foreign keys must reference real records). Then write 3 SELECT queries to verify your seed
data is correct.

TOPIC 3: Back-End Development

Flask/Python API · REST endpoints · Authentication · Data validation

⚙️What is a REST API?

A REST API (Representational State Transfer Application Programming Interface) is a set of URL
endpoints that your front-end calls to get, create, update, or delete data. The back-end processes these
requests and returns JSON responses.

HTTP Method What it does

GET Retrieve data (read)
POST Create new data
PUT / PATCH Update existing data
DELETE Remove data

▶ REST Endpoint Naming Convention

GET /api/homework → list all homework
POST /api/homework → create a new homework item
GET /api/homework/<id> → get one homework item
PUT /api/homework/<id> → update one homework item
 DELETE /api/homework/<id> → delete one homework item

GET /api/users → list all users

POST /api/auth/register → register new user
POST /api/auth/login → login and get token

✅ Example 1
Flask app structure and basic GET/POST endpoints:
# [Link] — Flask back-end
from flask import Flask, jsonify, request
from flask_cors import CORS
import [Link], os

app = Flask(__name__)
CORS(app) # Allow React front-end to call this API

def get_db():
return [Link](
host=[Link]('DB_HOST','localhost'),
user=[Link]('DB_USER','root'),
password=[Link]('DB_PASS',''),
database='homework_tracker'
)

# GET all homework

@[Link]('/api/homework', methods=['GET'])
def get_homework():
conn = get_db()
cursor = [Link](dictionary=True)
[Link]('SELECT * FROM homework ORDER BY due_date')
items = [Link]()
[Link](); [Link]()
return jsonify(items), 200

# POST create homework

@[Link]('/api/homework', methods=['POST'])
def create_homework():
data = request.get_json()
if not data or not [Link]('title') or not [Link]('due_date'):
return jsonify({'error': 'title and due_date required'}), 400
conn = get_db()
cursor = [Link]()
[Link](
'INSERT INTO homework (title,description,subject_id,teacher_id,due_date)'
' VALUES (%s,%s,%s,%s,%s)',
(data['title'], [Link]('description',''),
data['subject_id'], data['teacher_id'], data['due_date'])
)
[Link]()
new_id = [Link]
[Link](); [Link]()
return jsonify({'id': new_id, 'message': 'Created'}), 201

if __name__ == '__main__':
[Link](debug=True, port=5000)
 ✅ Example 2
Authentication endpoint — register and login with JWT:
# pip install flask-jwt-extended bcrypt
from flask_jwt_extended import JWTManager, create_access_token,
jwt_required, get_jwt_identity
import bcrypt

[Link]['JWT_SECRET_KEY'] = [Link]('JWT_SECRET', 'dev-secret')

jwt = JWTManager(app)

# REGISTER
@[Link]('/api/auth/register', methods=['POST'])
def register():
data = request.get_json()
email = [Link]('email','').strip()
password = [Link]('password','')
name = [Link]('name','')
if not email or not password or not name:
return jsonify({'error': 'All fields required'}), 400
pw_hash = [Link]([Link](), [Link]())
try:
conn = get_db()
cursor = [Link]()
[Link](
'INSERT INTO users (name,email,password_hash) VALUES (%s,%s,%s)',
(name, email, pw_hash.decode())
)
[Link](); [Link](); [Link]()
return jsonify({'message': 'Registered!'}), 201
except Exception as e:
return jsonify({'error': str(e)}), 409

# LOGIN
@[Link]('/api/auth/login', methods=['POST'])
def login():
data = request.get_json()
conn = get_db()
cur = [Link](dictionary=True)
[Link]('SELECT * FROM users WHERE email=%s', (data['email'],))
user = [Link]()
[Link](); [Link]()
if user and [Link](data['password'].encode(),
user['password_hash'].encode()):
token = create_access_token(identity=user['user_id'])
return jsonify({'token': token, 'name': user['name']}), 200
return jsonify({'error': 'Invalid credentials'}), 401

# PROTECTED route example

@[Link]('/api/profile', methods=['GET'])
@jwt_required()
def profile():
user_id = get_jwt_identity()
# use user_id to fetch user data...
return jsonify({'user_id': user_id})

✅ Example 3
Data validation and error handling in Flask:
 # Validation helper
def validate_homework(data):
errors = []
if not [Link]('title'):
[Link]('Title is required')
if len([Link]('title','')) > 100:
[Link]('Title must be under 100 characters')
if not [Link]('due_date'):
[Link]('Due date is required')
if not [Link]('subject_id'):
[Link]('Subject is required')
return errors

# Use validation in endpoint

@[Link]('/api/homework', methods=['POST'])
@jwt_required()
def create_homework_validated():
data = request.get_json()
errors = validate_homework(data)
if errors:
return jsonify({'errors': errors}), 422
# ... proceed with insert

# Global error handlers

@[Link](404)
def not_found(e):
return jsonify({'error': 'Resource not found'}), 404

@[Link](500)
def server_error(e):
return jsonify({'error': 'Internal server error'}), 500

⚠️ Important: Always validate input on the back-end, even if you validate on the front-end. Never trust
data coming from the client.

✏️ Exercises — Topic 3: Back-End Development

✏️Exercise 1
Build your Flask API skeleton: (a) Set up [Link] with Flask and CORS, (b) Create a database connection
function, (c) Implement 5 REST endpoints for your main resource (GET all, GET one, POST, PUT,
DELETE), (d) Test each endpoint using Postman or curl.

✏️Exercise 2
Add authentication: Implement /api/auth/register and /api/auth/login endpoints. Use bcrypt to hash
passwords. Use JWT tokens to protect at least 3 of your endpoints. Test registering a user and logging
in.

✏️Exercise 3
Add data validation: Write a validation function for your main resource's POST and PUT endpoints.
Validate: (a) required fields are present, (b) string lengths are within limits, (c) numeric fields are positive,
(d) return clear error messages with 422 status.
 TOPIC 4: Front-End Development
React components · Routing · API integration · State management

⚛️React Project Setup

# Create a new React project
npx create-react-app homework-tracker-frontend
cd homework-tracker-frontend

# Install key packages

npm install react-router-dom axios

# Folder structure (recommended)

src/
components/ ← reusable UI components
pages/ ← full page components
services/ ← API call functions
context/ ← global state (AuthContext, etc.)
[Link]
[Link]

✅ Example 1
React Router — setting up page navigation:
// src/[Link]
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import Dashboard from './pages/Dashboard';
import HomeworkPage from './pages/HomeworkPage';
import Navbar from './components/Navbar';

function PrivateRoute({ children }) {

const token = [Link]('token');
return token ? children : <Navigate to='/login'/>;
}

function App() {
return (
<BrowserRouter>
<Navbar/>
<Routes>
<Route path='/login' element={<LoginPage/>}/>
<Route path='/register' element={<RegisterPage/>}/>
<Route path='/' element={
<PrivateRoute><Dashboard/></PrivateRoute>
}/>
<Route path='/homework' element={
<PrivateRoute><HomeworkPage/></PrivateRoute>
}/>
</Routes>
</BrowserRouter>
);
}
 export default App;

✅ Example 2
API integration — calling the Flask back-end from React:
// src/services/[Link] — centralised API service
import axios from 'axios';

const API = [Link]({

baseURL: [Link].REACT_APP_API_URL || '[Link]
});

// Auto-attach JWT token to every request

[Link](config => {
const token = [Link]('token');
if (token) [Link] = `Bearer ${token}`;
return config;
});

export const getHomework = () => [Link]('/api/homework');

export const createHW = (data) => [Link]('/api/homework', data);
export const updateHW = (id, d) => [Link](`/api/homework/${id}`, d);
export const deleteHW = (id) => [Link](`/api/homework/${id}`);
export const loginUser = (data) => [Link]('/api/auth/login', data);
export const registerUser = (data) => [Link]('/api/auth/register', data);

// src/pages/[Link]
import { useState, useEffect } from 'react';
import { getHomework, deleteHW } from '../services/api';

function HomeworkPage() {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
getHomework()
.then(res => setItems([Link]))
.catch(err => setError('Failed to load homework'))
.finally(()=> setLoading(false));
}, []);

if (loading) return <p>Loading...</p>;

if (error) return <p style={{color:'red'}}>{error}</p>;

return (
<div>
<h2>Homework ({[Link]})</h2>
{[Link](hw => (
<div key={hw.hw_id}>
<h3>{[Link]}</h3>
<p>Due: {hw.due_date}</p>
<button onClick={() => deleteHW(hw.hw_id)}>Delete</button>
</div>
))}
</div>
);
}
 ✅ Example 3
State management — AuthContext for global login state:
// src/context/[Link]
import { createContext, useContext, useState } from 'react';
import { loginUser } from '../services/api';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {

const [user, setUser] = useState(
[Link]([Link]('user')) || null
);

async function login(email, password) {

const res = await loginUser({ email, password });
[Link]('token', [Link]);
[Link]('user', [Link]([Link]));
setUser([Link]);
}

function logout() {
[Link]('token');
[Link]('user');
setUser(null);
}

return (
<[Link] value={{user, login, logout}}>
{children}
</[Link]>
);
}

export const useAuth = () => useContext(AuthContext);

✏️ Exercises — Topic 4: Front-End Development

✏️Exercise 1
Set up your React project: (a) Create the project with create-react-app, (b) Install react-router-dom and
axios, (c) Set up Routes for at least 4 pages (Login, Register, Dashboard, Main feature), (d) Create a
Navbar component with navigation links.

✏️Exercise 2
Build the API service layer: (a) Create src/services/[Link] using axios, (b) Add the JWT interceptor, (c)
Export functions for all your API endpoints, (d) Test by calling one endpoint from a useEffect and
displaying results on screen.

✏️Exercise 3
Implement AuthContext: (a) Create AuthContext with login/logout functions, (b) Wrap [Link] with
AuthProvider, (c) Create a Login page that uses useAuth, (d) Create PrivateRoute that redirects to login
if not authenticated.

TOPIC 5: Integration & Testing

End-to-end testing · Bug fixing · Cross-browser testing · Performance

🧪 What is Integration Testing?

Integration testing checks that all parts of your application work together correctly — the front-end
communicates with the back-end, the back-end correctly reads/writes to the database, and the full user
journey works from end to end.

▶ Testing Levels
Unit Testing: Test one function or component in isolation.
Integration Testing: Test that multiple components work together (e.g., login flow: form → API → DB →
token → redirect).
End-to-End (E2E) Testing: Test the entire user journey in a real browser, as a real user would
experience it.

✅ Example 1
API testing checklist — test every endpoint:
Manual API Testing with Postman or curl:

AUTH ENDPOINTS:
✅ POST /api/auth/register
- with valid data → 201 + success message
- with duplicate email → 409 + error
- with missing fields → 400 + error

✅ POST /api/auth/login
- with correct credentials → 200 + JWT token
- with wrong password → 401 + error
- with unregistered email → 401 + error

HOMEWORK ENDPOINTS:
✅ GET /api/homework
- without token → 401 Unauthorized
- with valid token → 200 + array of homework

✅ POST /api/homework
- with valid data → 201 + new id
- with missing title → 422 + validation error

✅ DELETE /api/homework/<id>
- valid id → 200 + deleted message
- nonexistent id → 404 + not found

✅ Example 2
Common bugs and how to fix them:
BUG TYPE 1: CORS Error
Error: 'Access-Control-Allow-Origin' missing
Fix: Add CORS(app) in Flask, check allowed origins
from flask_cors import CORS; CORS(app)

BUG TYPE 2: JWT token not sent

Error: 401 Unauthorized on protected routes
Fix: Check axios interceptor is adding Authorization header
[Link]([Link]('token'))

BUG TYPE 3: React state not updating after API call

Error: UI shows old data after create/delete
Fix: Re-fetch data after mutation, or update state locally
setItems(prev => [...prev, newItem])

BUG TYPE 4: Database foreign key error

Error: Cannot add or update a child row
Fix: Ensure referenced record exists before inserting

BUG TYPE 5: Env variable undefined in production

Error: API_URL is undefined after deployment
Fix: Set environment variables in hosting dashboard

✅ Example 3
End-to-end testing checklist and performance checks:
E2E USER JOURNEY TESTS:

Journey 1: New User Registration

1. Open app → redirected to login
2. Click Register → registration form appears
3. Fill form → submit → success message
4. Login with new credentials → redirected to dashboard

Journey 2: Create and Delete Homework

1. Login as teacher
2. Click 'Add Homework' → fill form → submit
3. New homework appears in list immediately
4. Click Delete → homework removed from list

CROSS-BROWSER TESTING:
✅ Chrome (primary)
✅ Firefox
✅ Edge
✅ Safari (if available)
✅ Mobile: Chrome on Android / Safari on iPhone

PERFORMANCE CHECKS:
✅ Open DevTools → Network tab
✅ API responses under 500ms
✅ No unnecessary API calls on every render
✅ Images are compressed
✅ No console errors or warnings
✏️ Exercises — Topic 5: Integration & Testing
✏️Exercise 1
API Testing: Using Postman, test EVERY endpoint in your API. For each endpoint test at least: (a) the
happy path (correct input → correct response), (b) missing fields → correct error, (c) invalid token →
401. Write down the results in a test report table.

✏️Exercise 2
Bug Hunt: Deliberately introduce 3 bugs into your code (e.g., remove token from header, use wrong field
name, skip commit()). Fix them using browser DevTools, [Link], and the Network tab. Document
what caused each bug and how you fixed it.

✏️Exercise 3
E2E Testing: Manually walk through 3 complete user journeys in your app. Test in Chrome AND Firefox.
Check mobile view using DevTools (F12 → mobile icon). List any issues found and fix them.

TOPIC 6: Deployment
Firebase Hosting / Render / Vercel · Environment variables · Domain setup

🚀 Deployment Strategy
Deployment means making your app available on the internet. A full-stack app has two parts to deploy:
the React front-end and the Flask back-end. Each part is deployed separately.

Part Recommended Service

React Front-End Firebase Hosting or Vercel (free)
Flask Back-End Render or Railway (free tier)
MySQL Database PlanetScale / Render Postgres / Railway MySQL
Environment Vars Set in hosting dashboard (never in code)

✅ Example 1
Deploying Flask back-end to Render:
# Step 1: Create [Link]
pip freeze > [Link]

# Must include:
flask
flask-cors
flask-jwt-extended
mysql-connector-python
bcrypt
gunicorn

# Step 2: Create a Procfile (tells Render how to run the app)

web: gunicorn app:app

# Step 3: Push to GitHub

 git init
git add .
git commit -m 'Initial commit'
git push origin main

# Step 4: On [Link]
# → New Web Service → Connect GitHub repo
# → Build Command: pip install -r [Link]
# → Start Command: gunicorn app:app
# → Add Environment Variables (DB_HOST, DB_USER, etc.)
# → Deploy!

# Your API is now live at:

# [Link]

✅ Example 2
Environment variables — keeping secrets safe:
# .env file (LOCAL development only — NEVER commit to Git!)
DB_HOST=localhost
DB_USER=root
DB_PASS=mypassword
DB_NAME=homework_tracker
JWT_SECRET=my-super-secret-key-change-this

# .gitignore — add this so .env is never uploaded

.env
node_modules/
__pycache__/

# Flask — reading env variables

import os
from dotenv import load_dotenv
load_dotenv() # pip install python-dotenv

DB_HOST = [Link]('DB_HOST', 'localhost')

SECRET = [Link]('JWT_SECRET', 'fallback-secret')

# React — environment variables

# In .env file:
REACT_APP_API_URL=[Link]

# In code:
const API_URL = [Link].REACT_APP_API_URL;

# In production (Vercel/Firebase): set REACT_APP_API_URL

# to your deployed Render URL in the hosting dashboard

✅ Example 3
Deploying React front-end to Vercel and connecting domains:
# Option A: Vercel (easiest for React)
npm install -g vercel
vercel login
vercel # follow prompts — auto-detects React
# Live at: [Link]
 # Option B: Firebase Hosting
npm run build
firebase init hosting
firebase deploy
# Live at: [Link]

# ── AFTER DEPLOYING BOTH PARTS ─────────────────────

# Update React's API URL to point to live back-end:

# In Vercel dashboard → Settings → Environment Variables:

REACT_APP_API_URL = [Link]

# In Render dashboard → your service → Environment:

CORS_ORIGIN = [Link]

# Update Flask CORS to allow production origin:

CORS(app, origins=[[Link]('CORS_ORIGIN','[Link]

# ── CUSTOM DOMAIN (optional) ───────────────────────

# Vercel: Settings → Domains → Add Domain
# Enter: [Link]
# Add the CNAME record in your domain registrar
# SSL is automatic!

⚠️ Important: Never put database passwords, API keys, or JWT secrets directly in your code or push
them to GitHub. Always use environment variables.

✏️ Exercises — Topic 6: Deployment

✏️Exercise 1
Deploy your Flask API to Render: (a) Create [Link] and Procfile, (b) Push to GitHub, (c)
Connect to Render and set environment variables, (d) Deploy and test all endpoints via the live URL.

✏️Exercise 2
Deploy your React app to Vercel or Firebase Hosting: (a) Set REACT_APP_API_URL to your Render
URL, (b) Build and deploy, (c) Verify the live app connects to the live API, (d) Test the full login and main
feature flow on the live URL.

✏️Exercise 3
Environment variable audit: (a) Check your codebase for any hardcoded passwords or secrets, (b) Move
them to .env files, (c) Add .env to .gitignore, (d) Set all required variables in both Render and Vercel
dashboards. Verify the app still works.

TOPIC 7: Project Exhibition

Presentation · Demo · Q&A · Documentation · Peer review
🎤 Annual Tech Exhibition — What to Prepare
The Project Exhibition is your opportunity to showcase everything you have built and learned. You will
present your project to teachers, peers, and potentially external judges. Strong preparation is the key to
a confident, impressive exhibition.

▶ The 4 Components of Your Exhibition

1. Presentation (5-7 min): Slides explaining your project — problem, solution, features, tech stack,
challenges.
2. Live Demo (3-5 min): Show the working app live. Walk through the key user journeys.
3. Q&A (3-5 min): Answer questions from judges about your technical decisions and code.
4. Documentation: Submit a project report and your GitHub repository.

✅ Example 1
Presentation slide structure (8-10 slides recommended):
Slide 1: Title slide
- Project name, your name, class, date

Slide 2: Problem Statement

- The real problem you identified
- Who is affected and why it matters

Slide 3: Your Solution

- Brief description of your app
- Key features (bullet points)

Slide 4: Tech Stack

- Front-end: React
- Back-end: Flask / Python
- Database: MySQL / Firestore
- Deployment: Vercel + Render

Slide 5: Architecture Diagram

- Simple diagram: Browser → React → Flask API → MySQL

Slide 6: Database Schema

- ER diagram / table structure

Slide 7: Key Features (screenshots)

- Login screen, dashboard, main feature

Slide 8: Challenges & Learnings

- 2-3 technical challenges you faced and how you solved them

Slide 9: Live Demo

- Mention: 'Now I'll show you the live app'

Slide 10: Thank You & Q&A

✅ Example 2
Live demo script — what to show and say:
DEMO SCRIPT:
 OPEN: 'I'll now show you the live application at [URL]'

Step 1: Register a new account

Say: 'First, let me register as a new student...'
Do: Fill registration form, submit
Show: Success message or redirect to dashboard

Step 2: Core feature demonstration

Say: 'Now I'll add a homework assignment as a teacher...'
Do: Log in as teacher, create homework entry
Show: New homework appears in the list

Step 3: Student view

Say: 'From the student's perspective, they can see...'
Do: Log in as student, view and mark homework done
Show: Status changes to complete

Step 4: Data persistence

Say: 'The data is saved to our MySQL database...'
Do: Refresh the page — data is still there

CLOSE: 'The app is fully deployed and accessible',

'at [URL] from any device.'

TIPS:
✅ Use realistic-looking test data
✅ Have the app open before starting
✅ Practice the demo 5+ times
✅ Have a backup video if live demo fails

✅ Example 3
Project Documentation — what to include in your report:
PROJECT REPORT STRUCTURE:

1. COVER PAGE
Project name, student name, class, date, teacher

2. ABSTRACT (one paragraph)

Summary of the problem, solution, and technology used

3. PROBLEM STATEMENT
Detailed description of the problem and target users

4. FEATURES LIST
Complete list of implemented features (MoSCoW format)

5. TECH STACK
Each technology used with justification

6. DATABASE DESIGN
ER diagram + all CREATE TABLE statements

7. API DOCUMENTATION
Table of all endpoints: Method | URL | Auth? | Request | Response

8. SCREENSHOTS
 Key screens: login, dashboard, main features, mobile view

9. DEPLOYMENT
Live URL, deployment platform, how to run locally (setup guide)

10. CHALLENGES & SOLUTIONS

3-5 technical challenges and how you solved them

11. FUTURE IMPROVEMENTS

Features you would add with more time

12. GITHUB REPOSITORY LINK

Ensure repo is public with a good README

✅ Tip: Practice your full presentation (slides + demo + likely Q&A questions) at least 3 times before the
exhibition. Time yourself — aim for under 12 minutes total.

▶ Common Q&A Questions — prepare your answers

Question How to Answer
Why did you choose this Explain one reason per technology — e.g., 'I chose Flask because
tech stack? we learned it in Unit 3 and it makes REST APIs simple.'
How does authentication Explain the login flow: user submits credentials → back-end verifies
work in your app? → JWT token issued → stored in browser → sent with every
request.
What was the hardest Pick a real bug. Describe: what the symptom was, how you
bug you fixed? diagnosed it, what the root cause was, how you fixed it.
How is your data Passwords are hashed with bcrypt. JWT tokens expire.
secured? Environment variables protect secrets. Parameterised queries
prevent SQL injection.
What would you add with Mention 2-3 features from your Could Have / Won't Have list. Show
more time? you thought about future growth.
How does the front-end React uses axios to send HTTP requests to Flask REST API
talk to the back-end? endpoints. Responses are JSON. JWT token in Authorization
header authenticates requests.

✏️ Exercises — Topic 7: Project Exhibition

✏️Exercise 1
Create your 10-slide presentation: Follow the slide structure above. Add screenshots of your actual app.
Use a clean, readable design. Practice presenting it out loud and time yourself — aim for 5-7 minutes.

✏️Exercise 2
Write and rehearse your demo script: Write out exactly what you will say and do during the live demo.
Practice it 5 times. Record yourself once and watch it back. Fix any parts where you stumbled.

✏️Exercise 3
Complete your project report and GitHub README: (a) Write the full project report following the structure
above, (b) Create a [Link] in your GitHub repo with: project description, screenshots, tech stack,
setup instructions, and live URL.

📋 UNIT 6 — PROJECT QUICK REFERENCE

Week-by-Week Checklist
Week Must Complete Deliverable
1 Problem statement · Features list · Project Proposal (PDF/Doc)
Wireframes · Tech stack choice
2 ER diagram · CREATE TABLE SQL · Seed data · Schema file + [Link]
DB running locally
3–4 Flask app · 5+ REST endpoints · Auth API URL (localhost:5000)
(register/login) · Postman tested
4–5 React setup · All pages/routes · API Connected front-end
integration · AuthContext (localhost:3000)
5–6 E2E user journeys pass · Cross-browser Zero critical bugs
tested · Bugs fixed
6 Back-end on Render · Front-end on Live URL shared with teacher
Vercel/Firebase · Env vars set
7 Slides ready · Demo rehearsed · Report Exhibition-ready project
written · GitHub public

HTTP Status Codes Cheat Sheet

Code Meani When to use
ng
200 OK 200 Successful GET or PUT
201 Created 201 Successful POST (new resource created)
400 Bad Request 400 Client sent invalid/malformed data
401 Unauthorized 401 No token or invalid token
403 Forbidden 403 Token valid but not allowed to access this
404 Not Found 404 Resource doesn't exist
409 Conflict 409 Duplicate entry (e.g., email already used)
422 Unprocessable 422 Validation failed (data format wrong)
500 Server Error 500 Unexpected error on the server

Git Commands Cheat Sheet

Command Syntax Purpose
Init git init Initialise a git repository
Stage git add . Stage all changes
Command Syntax Purpose
Commit git commit -m 'message' Save a snapshot
Push git push origin main Upload to GitHub
Status git status See changed files
Log git log --oneline View commit history
Branch git checkout -b feature- Create a new branch
name
Merge git merge feature-name Merge branch into main

Unit 6: Full Stack Capstone Project | Class 9 | 7 Weeks | Plan well. Build well. Ship it. 🚀