Build Websites and Apps with AI

The AI coding workflow: spec, plan, build, review

AI can write code in seconds, but code you do not understand is a liability. Learn the four-step loop of spec, plan, build in small steps and review that professionals use, and why skipping a step costs more time than it saves.

AI coding tools compared: chat, IDE assistants and agents

There are three kinds of AI coding tools: chat assistants, assistants inside your editor, and agents that work on your project. Learn what each is good at, what it risks, and which free option to start with.

Set up your machine: Node.js, VS Code, Git and a free AI assistant

Install Node.js, VS Code and Git, connect a free AI assistant to your editor, and make your first saved commit. Everything in the rest of this track builds on this setup.

Write a project spec an AI can build from

A spec is the most valuable thing you write in AI-assisted development. Learn a simple template, write a full spec for the Brew & Bean website, let AI interview and review it, and turn it into a plan.

Reading and reviewing AI-written code

AI code often runs and is still wrong. Learn a repeatable way to read it: run it, trace it, ask what could go wrong, test the edges and ask AI to explain or critique it. Practise on a real order-total function with hidden bugs.

Coffee shop website: plan the site with AI

Plan the Brew & Bean website before writing code: decide the users, pages, components and data, get a one-page spec from AI, review it, and split the build into small testable steps. You will use this plan in every lesson of the project.

Start the React project with Vite

Create the Brew & Bean project with Vite and React, add react-router-dom, and build the site shell: header, footer and four routed pages. You will test it, learn what each starter file does, and save your first Git commit.

Build the home and menu pages

Build the real Home and Menu pages for Brew & Bean: a menu data file, a rupee formatter, a reusable MenuCard, a hero with customer favourites, and a category filter. You will learn props, lists, keys and state, and how to review AI-written components.

Add a cart and order form

Add a working cart to the Brew & Bean site: a CartContext with a reducer, Add buttons, a count in the header, quantity controls, localStorage, and an order form with Indian mobile validation that ends in a confirmation. The order is not sent anywhere yet.

Make it responsive, accessible and fast

Test the Brew & Bean site at phone width, fix the layout with flexible grids and media queries, add keyboard and screen reader support, set page titles, and measure speed with a production build and Lighthouse. Every fix is a small change you can check in the browser.

Deploy the site for free

Build the Brew & Bean site for production, push it to GitHub and deploy it to a free host. You will fix single-page routing so /menu works on refresh, test the live site on your phone, learn how updates work and how to debug a failed deploy.

Design the order API with AI

Design the Brew & Bean order API before writing code: endpoints, data, rules, status codes and security, with AI as your assistant. You finish with an API contract that every later lesson builds from.

Build the API with FastAPI

Build the Brew & Bean order API in FastAPI from your contract: menu, orders, status updates, validation and an admin key. You prompt AI, review its code with a checklist, run it and try to break it.

Add a database: SQLite first, then Postgres

Make orders survive restarts: add SQLAlchemy models, run on SQLite, then switch the same code to Postgres with one environment variable. You also learn about migrations and why hosted apps use a managed database.

Test the API with AI-written tests

Write an automated test suite for the order API with pytest and FastAPI's TestClient. AI drafts the tests, you review them with a checklist, run them and prove they catch real bugs.

Connect the website to the API and deploy

Connect the Brew & Bean website to your order API: load the menu with fetch, submit real orders, handle loading and errors, then deploy the database, API and site and test the live shop on your phone.

Debugging with AI: errors, logs and stack traces

Learn to read a Python traceback and a browser error, gather the right evidence, and give AI a debugging prompt that finds the cause instead of guessing. You will fix two real Brew & Bean bugs and lock each fix in with a test.

Refactoring and documenting code with AI

Learn a safe routine for cleaning up AI-written code: write tests first, refactor in small steps, review the diff, and let AI draft comments and a README that you then verify.

Security pitfalls in AI-written code

AI writes code that runs, not always code that is safe. Learn the seven most common security mistakes in AI-generated web code, how to spot and fix them, and a checklist to use before you deploy.

Coding agents: Claude Code, Copilot, Gemini CLI and Cursor

Coding agents can read your project, edit files and run commands. Learn how they work, how the main tools compare, and a safe plan-first routine for giving one a real task in your coffee shop project.

When not to trust AI, and why fundamentals still matter

AI writes plausible code that is sometimes wrong. Learn the typical failures, see a realistic React bug that only fundamentals can catch, and build habits that keep you in control of what you ship.