Full-Stack Development & Debugging

Turning the plan into a working application, and diagnosing problems when things break.

Day 02 moves from plan to product. You work in a real codebase, use AI assistants as engineering tools, connect authentication and persistent data, and learn to investigate failures instead of regenerating code until something works.

What you will learn

Work with a real codebase in Visual Studio Code
Use AI coding assistants effectively
Connect frontend and backend logic
Implement and consume APIs
Implement user authentication and persistent data
Debug errors and evaluate AI-generated solutions
Use Git and GitHub throughout development

STAGE 04

Build in Visual Studio Code

Visual Studio Code is the primary development environment. You work directly with your application code.

Project files and folders

Source code

Dependencies

The terminal

Running the application locally

Testing changes

Reading errors

Troubleshooting problems

STAGE 05

Develop with Codex and Claude Code

AI assistants act as engineering partners — for generating code, implementing features, explaining code, debugging, refactoring, reviewing implementations, and investigating technical problems.

>Describe the task → Generate or modify code → Review → Run → Test → Debug → Verify

Optional advanced activity

AI Workflow Automation with Hooks

An optional advanced activity. Rather than implementing hooks immediately, ask your AI assistant to analyse how you have been working and suggest useful automation — then evaluate the recommendations and implement selectively.

Use AI → Identify repetitive work → Automate useful tasks → Improve the workflow

AI-generated code should never be assumed to be correct without testing.

STAGE 06

Authentication and Data with Firebase

Firebase introduces two core application concepts: who the user is, and what the application remembers.

Authentication

Sign up
Sign in
Sign out
User-specific access

Persistent Data

Store information
Retrieve information
Update information
Associate information with a specific user

>Frontend ↔ Application Logic ↔ Authentication ↔ Database

STAGE 07

Version Control with GitHub

Use GitHub throughout development rather than uploading your code only at the end. Your repository should show the progression of the project.

Repositories

Commits

Push and pull

Version history

Collaboration

Basic project documentation

/DEBUGGING

When something fails, ask:

01What exactly is failing?
02Can the problem be reproduced?
03What does the error message say?
04Where is the likely source?
05What changed before the error appeared?
06What solution should be tested?
07Did the solution actually fix the issue?

Handouts

The full written material for this workshop, to read along or take away.

READ HANDOUT (HTML) DOWNLOAD PDF

Tools used on this day

Visual Studio Code Codex Claude Code Node.js & npm Browser DevTools Firebase Git GitHub

// KEY PRINCIPLE

Investigate problems systematically instead of regenerating code until something works.

← DAY_01 DAY_03 →