How a Student Becomes a Full-Stack Developer in 6 Months

// expenses.js — add items and show a running total
const form = document.querySelector("#expense-form");
const list = document.querySelector("#expense-list");
const totalEl = document.querySelector("#total");
const expenses = [];

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const name = form.elements.name.value.trim();
  const amount = Number(form.elements.amount.value);
  if (!name || amount <= 0) return;

  expenses.push({ name, amount });
  const li = document.createElement("li");
  li.textContent = `${name}: ₹${amount}`;
  list.appendChild(li);

  const total = expenses.reduce((sum, e) => sum + e.amount, 0);
  totalEl.textContent = `₹${total}`;
  form.reset();
});

# Daily Git routine
git status
git add .
git commit -m "Add responsive navbar"
git push

# New feature on a branch
git switch -c feature/expense-total
# ...work...
git commit -am "Show running total"
git switch main
git merge feature/expense-total

# main.py — pip install fastapi uvicorn
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field

app = FastAPI()

class Expense(BaseModel):
    name: str = Field(min_length=1)
    amount: float = Field(gt=0)

expenses: list[Expense] = []

@app.post("/expenses", status_code=201)
def add_expense(expense: Expense):
    expenses.append(expense)
    return expense

@app.get("/expenses/{index}")
def get_expense(index: int):
    if index < 0 or index >= len(expenses):
        raise HTTPException(status_code=404, detail="Not found")
    return expenses[index]

# Run: uvicorn main:app --reload   -> docs at /docs

-- PostgreSQL schema for the expense app
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE expenses (
  id SERIAL PRIMARY KEY,
  user_id INT NOT NULL REFERENCES users(id),
  name TEXT NOT NULL,
  amount NUMERIC(10, 2) NOT NULL CHECK (amount > 0),
  category TEXT,
  spent_on DATE NOT NULL
);

-- Monthly total per category for one user
SELECT category, DATE_TRUNC('month', spent_on) AS month, SUM(amount) AS total
FROM expenses
WHERE user_id = 1
GROUP BY category, DATE_TRUNC('month', spent_on)
ORDER BY month, total DESC;

// ExpenseList.jsx
import { useEffect, useState } from "react";

export default function ExpenseList({ apiUrl }) {
  const [expenses, setExpenses] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch(`${apiUrl}/expenses`)
      .then((res) => {
        if (!res.ok) throw new Error("Request failed");
        return res.json();
      })
      .then(setExpenses)
      .catch((err) => setError(err.message));
  }, [apiUrl]);

  if (error) return <p role="alert">{error}</p>;
  return (
    <ul>
      {expenses.map((e, i) => (
        <li key={i}>{e.name}: ₹{e.amount}</li>
      ))}
    </ul>
  );
}

DEPLOYMENT CHECKLIST

[ ] API reads secrets from environment variables, not code
[ ] CORS allows only the frontend's domain
[ ] Database migrations run on the server
[ ] Frontend uses the live API URL from config
[ ] HTTPS on both frontend and API
[ ] Seed demo account for reviewers
[ ] README: features, tech stack, screenshots, live link,
    how to run locally, what I would improve next

WEEKLY LOG — Week __ of 24

Topic this week   : ____________________
Hours studied     : __   Hours building: __
Commits pushed    : __
What I built      : ____________________
What confused me  : ____________________
How I solved it   : ____________________
Next week's goal  : ____________________

CAPSTONE CHECKLIST

Frontend
[ ] Responsive on mobile
[ ] Loading and error states
[ ] Form validation messages

Backend
[ ] CRUD endpoints with validation
[ ] Authentication
[ ] Tests for each endpoint

Database
[ ] Schema with keys and constraints
[ ] At least one reporting query

Delivery
[ ] Deployed with a live URL
[ ] README with screenshots

RESUME — PROJECTS SECTION

Expense Tracker (Full-Stack)        [Live] [GitHub]
React, FastAPI, PostgreSQL
- Built REST API with authentication and validation;
  covered every endpoint with pytest tests
- Designed relational schema and monthly reporting queries
- Built responsive React UI with loading and error states
- Deployed frontend and API with environment-based config