AI Fullstack Web Builder: From Zero to Production

Course Details

A 2-day course, 6 hours per day (12 hours in total, 10:00-17:00), run as a hands-on workshop across both days. Beginner to Intermediate level with no programming background required. Learners bring their own laptop (Windows or macOS) with permission to install software; the instructor walks everyone through the full setup on day one. Learners take home prompt templates, spec templates (design.md and spec.md), sample source code from every workshop, and their own web application already deployed to production. This course combines the AI Web App Builder Workshop and the AI Next.js Fullstack Workshop into one continuous path.

Day 1: From Prompt to a Working Web App

Section 1: AI and LLM Fundamentals

• How AI and LLMs work, and why they sometimes answer wrongly with full confidence
• Context and tokens, and their effect on answer quality and cost
• The layers of an LLM system, from the model itself up to the app you actually use
• What AI does well and what still always needs a human check

Section 2: Choosing AI Tools and Controlling Cost

• The categories of AI coding tools and the differences that matter
• Choosing the tool that fits your work and your budget
• Keeping spending under control with continuous use
• What an AI agent is and how it differs from asking one question at a time

Section 3: Workshop, Your First Web Page from a Prompt

• How the traditional coding workflow differs from working with AI
• Describing what you want so the AI gets it right the first time
• Reading the output, checking it and directing changes until the page is right
• Workshop: build your first web page from a prompt and refine its look

Section 4: Installing the Development Tools

• Installing Visual Studio Code and the extensions needed to work with AI
• Installing and using enough Git to save your work and roll back
• Structuring the project folder so the AI edits the right files
• Lab: install the complete toolchain on your own machine

Section 5: The Parts of a Web Application

• How the interface, the processing layer and the database work together
• The difference between a plain website and an app that stores and processes data
• The vocabulary you need to communicate clearly with AI and with developers
• Scoping the work so you can actually finish rather than starting too big

Section 6: Workshop, Building a Web App with React and AI

• Breaking the interface into components and why that makes changes easier
• Directing AI to build screens, add buttons, take user input and show results
• Making the interface work well on both desktop and mobile
• Workshop: build a small working web application with React and AI

Section 7: Planning with Context and Testing

• What goes wrong when you direct AI one command at a time with no overall plan
• Writing a file that describes the project structure and goals for the AI to read first
• Reading error messages and passing them to AI in a way that actually finds the cause
• Lab: write your planning file and fix the issues in your own app

Section 8: Your First Deployment

• Pushing your code to GitHub and connecting it to a deployment service
• Building and deploying to Vercel so the site is reachable from the internet
• Updating the site after deployment and what to watch for once people use it
• Workshop: deploy your own site for real and review what day one covered

Day 2: The Professional Workflow and Fullstack with Next.js

Section 9: AI-Assisted UI Design

• Using AI to draft screens and produce design alternatives quickly
• Evaluating AI-generated design: consistency, real usability and buildability
• Establishing a color system and component set so every screen stays coherent
• Lab: design your project screens with AI and pick the direction to build

Section 10: MCP, Bringing Design into the Editor

• What MCP is and how it lets an AI agent reach external tools and data
• Passing the design into the editor to generate starting code instead of from scratch
• Reviewing and adapting the generated code to fit the real project structure
• Lab: connect your design into the project and get your first screen scaffold

Section 11: Spec-Driven Development

• Why one-question-at-a-time prompting produces code that does not fit the codebase
• Writing design.md to describe the look and behaviour of the system for the AI to read first
• Writing spec.md to define scope, requirements and acceptance criteria per task
• Lab: write design.md and spec.md for your project and have the AI follow them

Section 12: Project and Task Planning with AI

• Having AI plan the project and order the work from the spec you wrote
• Breaking large work into pieces the AI can finish in one pass
• Sequencing tasks so development keeps moving without getting stuck
• Tracking progress and adjusting the plan when requirements change

Section 13: Next.js and TypeScript

• Next.js project structure and the split between server and browser work
• Routing, building APIs and fetching data for display
• Using TypeScript to reduce errors and give the AI a clearer view of the code
• Lab: scaffold a Next.js project with your first screens and API routes

Section 14: Databases with Prisma and Supabase

• Designing the data model and the relationships between tables
• Using Prisma to define the schema and manage structural changes
• Connecting Supabase and reading and writing data from the app safely
• Lab: build your project database and wire it into the screens you made

Section 15: Authentication and User Permissions

• Building signup and login with Better Auth
• Managing sessions and protecting pages that require login
• Defining user roles and checking permissions on the server side
• Lab: add login and restrict access in your own application

Section 16: Debugging and Code Review with AI

• Giving the AI enough context that it can actually find the cause
• Having AI review code and flag security and performance risks
• The limits of AI review and where a human still has to decide
• Delegating work to an AI agent in iterations and reviewing each round

Section 17: Deploying to Production and Wrap-up

• Preparing the project for deployment and the checks to run first
• Setting environment variables and storing secrets safely
• Connecting the production database and updating the app after deployment
• Workshop: deploy your app to production and plan how to apply this workflow