Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
CoursesWorkshopSchedule
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
Articles
About us
About IT GeniusInstructorsPortfolioOur clientsPayment methods
Contact usOnline
Theme
Language
THENLA
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Web Development / Detail
Web Development · WDC-117

AI Fullstack Web Builder: From Zero to Production

AI Fullstack Web Builder: From Zero to Production is a course that takes non-programmers to building web apps with AI agents, from React and deployment to MCP, spec-driven development, Next.js, Prisma, Supabase and Better Auth. It suits beginners, business owners and career changers moving into web development, and you leave able to ship a fullstack app with a database and user accounts.

Updated
AI Fullstack Web Builder จากศูนย์สู่ Production ด้วย AI Agent
From 8,550 THB / person 9,500 −10% excl. VAT 7% · group rates available
Corporate training quote See open rounds
PDFDownload the course outline
  • Duration12 hours · 2 days
  • FormatOnsite / live online
  • Next round5–6 Jan 27
  • CertificateIncluded

Course overview

This course walks learners the whole way in two days: from never having written code to building a fullstack web application with a database and user accounts, then deploying it to production, all through systematic work with an AI agent. Day one lays the groundwork: how AI and LLMs work, choosing tools and controlling cost, directing AI to build web pages, installing the development toolchain, the parts of a web application, building an app with React, and testing

and deploying for the first time. Day two steps up to the professional workflow: AI-assisted UI design, bringing the design into the editor with MCP, spec-driven development that keeps the AI inside a documented frame, planning and breaking down work, building with Next.js and TypeScript alongside Prisma and Supabase, authentication and user permissions, AI code review, and deploying to production with safe configuration. (2 days, 6 hours per day, 12 hours in total, Beginner to Intermediate level.)

What you’ll gain

  • Understand how AI and LLMs work and direct them to the results you want
  • Choose the right AI tool for the job and keep spending under control
  • Install and use the development toolchain: VS Code, Git and GitHub
  • Build a web app with React and an AI agent and publish it to the internet
  • Use AI for UI design and bring the design into the editor through MCP
  • Write spec files that keep AI output aligned with the design
  • Build a fullstack app with Next.js and TypeScript alongside Prisma and Supabase
  • Implement signup, login and user permissions in the application
  • Debug, review code with AI and deploy to production safely

Who this course is for

  • Beginners who want to reach the point of building an app with a database and accounts
  • Business owners and entrepreneurs who want a system for their own operation
  • Career changers moving into web development who want to start by building
  • Frontend developers moving into backend and database work
  • Teams standardizing how they develop web applications with AI

Prerequisites

  • No programming background required; day one builds the foundation from scratch
  • General computer skills, such as installing software and using a browser
  • Some HTML, CSS or JavaScript background makes day two go more smoothly
  • Bring your own laptop (Windows or macOS) with permission to install software

Curriculum

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

Schedule & training options

For individuals — public rounds

5–6January
Classroom5–6 Jan 27
20 seats left
16–17March
Classroom16–17 Mar 27
20 seats left
11–12May
Classroom11–12 May 27
20 seats left
21–22July
Classroom21–22 Jul 27
20 seats left
14–15September
Classroom14–15 Sep 27
20 seats left
11–12November
Classroom11–12 Nov 27
20 seats left

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

What is the difference between an ordinary website and a web app?

An ordinary website mainly shows the same information to everyone, such as a company profile. A web app takes input from users, processes it and stores it in a database, as a booking or membership system does. A web app therefore has three parts working together: the frontend, the backend and the database. Understanding these parts helps you brief AI tools and talk to developers more precisely.

What is a React component, and why does it make changes easier?

A component is a small piece of the interface, such as a button, a product card or a menu bar, written as its own function that receives values through props and is combined with others to make a page. To change the button, you edit one component and every page using it updates. Small pieces also make AI instructions more precise, because you can say exactly what to change without affecting anything else.

What are the steps to add login to a Next.js web app?

Start by choosing an authentication library such as Better Auth and creating the user and session tables in your database. Build the sign-up and login pages so a session is created on successful login, then protect pages that require login and check permissions on the server every time, rather than just hiding buttons in the interface. Keep secrets in environment variables, never in the code.

Who is the AI Fullstack Web Builder: From Zero to Production course for, and what should I know beforehand?

It suits beginners who want to reach the point of building web apps with a database and user accounts, business owners who want their own systems, people changing career into web development, and frontend developers moving into backend work. No programming experience is needed, as the course starts from the basics, though some HTML, CSS or JavaScript makes the Next.js part smoother.

What will I be able to do after the AI Fullstack Web Builder: From Zero to Production course?

You will be able to build pages from prompts, set up VS Code and Git, build a React web app with AI and deploy it to Vercel, then move on to a professional workflow: designing UI with AI, using MCP, writing specs for the AI to follow, and building a fullstack app with Next.js, Prisma, Supabase and Better Auth, complete with a database and user accounts. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

What do I need to bring to the AI Fullstack Web Builder course?

Bring your own Windows or macOS laptop with permission to install software, as you will install Visual Studio Code, the necessary extensions and Git, then use that machine to build and deploy your own project throughout the course. Bringing an idea for a system you want to build helps you leave with work that fits your own needs.