Name: AI-Accelerated Web Developer Bootcamp | Build Full-Stack App
Rating: 4.5 (124 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byJackson Kailath

Last updated 2/2026

English

What you'll learn

Use the Senior Dev method to learn to code
Learn to Code with the help of an LLM, Get the first draft written, Read the code and understand the code and make modifications
Next JS 15, React 19
Typescript, Javascript, Tailwind 4
Be able to use shadcn components, zod , Prisma

Course content

21 sections • 442 lectures • 87h 3m total length

Welcome7:46
Accelerate full-stack development from day one with AI-powered coding and a senior dev workflow, mastering React 19, Next.js 15, and Prisma.
Approach, Mindset, and Course Details20:10
Demo of what we will be building12:08
Git repo0:04

Introduction to Web development and Project Setup1:31:19
Explore NextJS project structure26:58
Javascript (JS) Basics with Toy problems1:18:35
Master JavaScript fundamentals with toy problems: syntax, variables, data types, functions, operators, conditional logic, arrays, and loops for building interactive web apps.
What is DOM ? How to use JS to manipulate DOM ?3:09
Understanding Arrow Functions, Objects2:00
Html CSS JS Basics with Toy problems54:13
Important HTML tags2:31
Introduction to React33:26
React Core concepts with a simple Todo App1:06:25
Introduction to NextJS & NextJS Core concepts1:48:42
Typescript Basics3:22
Tailwind Basics, Box Model, Responsiveness2:58
Getting started with Figma ( to access the designs of Highland Hospital)36:26
Learn to access and import the two Figma files—Highland Hospital final designs and annotations—read the design system and measurements to build reusable components.

What we will do in this section4:52
Strategy Discussion for Header Left Side - Part 121:55
Strategy Discussion for Header Left Side - Part 26:22
Theory: Understanding Design Systems and How to Extend Them with Tailwind 49:03
Theory: Introduction to Shadcn ( INITIALIZE BEFORE modifying globals.css)1:43
Theory: Miscellaneous (used while building Header Left side)3:23
Starter Code, Prompts and Gemini Code : Header Left1:00
Build the Header - Left side (Part 1) [ globals.css modified here]34:09
Build the left side header by integrating the design-system driven global CSS with Tailwind v4, applying atomic design in a Next.js TypeScript app.
Build the Header - Left side (Part 2)7:53
Build the Header - Left side (Part 3)11:33
Refactor the header left side to import the app name from a constants file, with env var fallback, and demonstrate responsive behavior and styling for the logo and title.
Final Code: Header Left0:20
Theory: Quick review Concepts we will encounter Building the Header (Right Side)3:53
Starter Code,Prompts, Gemini code: Header Rigth side4:15
Build the Header - Right side (Part 1)22:10
Build the Header - Right side (Part 2)54:06
Build the Header - Right side (Part 3)30:21
Build the Header - Right side (Part 4)27:59
Build the Header - Right side (Part 5)52:38
Final Code: Header2:56
Starter Code,Prompts, Gemini Code: Footer0:44
Build Footer36:42
Build a responsive footer component in a Next.js app using TypeScript and Tailwind, matching provided designs and integrating with the layout and header for a cohesive full-stack UI.
Final Code: Footer0:43
Git Commit : Theory + Practical6:14

What we will do in this section4:01
Starter Code / prompts: Review Card, Doctor Card, Department Card5:15
Miscellaneous Theory3:07
Build: Home Screen Cards - 12:21
Build: Home Screen Cards - 241:12
Build: Home Screen Cards - 31:02:59
Build: Home Screen Cards - 413:29
Build: Home Screen Cards - 516:13
Build: Home Screen Cards - 627:10
Final Code:Review Card, Doctor Card, Department Card2:19
Starter Code / Prompts:home screen Sections & Banner Image Component8:15
Our Departments33:04
Our Doctors Section and Patient Review Section32:53
Home Screen Banner Section23:56
Final Code: home screen Sections & Banner Image Component, next.config.ts2:49
Build: put everything together in the Home Page33:51
git commit0:01
Final code : Home page, globals.css, MenuClient1:11

What we will do in this section1:04
Task and Resources0:01
Theory: async / await3:21
Theory: Server actions2:43
Theory:prisma3:03
types/index.ts - standardize data shapes2:27
Starter Code / Prompts: Seed Scripts, Schema, db/prisma.ts12:07
Starter Code / Prompts: Using Server Actions in Components7:17
Build: Migrate to DB Part 125:30
Build: Migrate to DB Part 2- Define Scheme20:15
Build: Migrate to DB Part 3 - Define Scheme continued35:51
Build: Migrate to DB Part 4 - Define Scheme continued55:17
Define and map data models in Prisma schema, including enums, relationships, and UUID generation, then migrate the database and prepare the Prisma client for seeding.
Build: Migrate to DB Part 5 - DB Migration and Prisma client18:27
Build: Migrate to DB Part 6 - Seed data25:25
Build: Migrate to DB Part 7 - Seed data continued22:54
Build: Migrate to DB Part 8 - Server action40:19
Migrate home screen data fetching to a database using server actions, define a reusable server action response type, implement get departments with Prisma, and wire it into the departments component.
Build: Migrate to DB Part 9 - Server action continued30:54
Build: Migrate to DB Part 10 - Server action continued1:06:03
Learn to migrate server actions to query testimonials and banners from a database, define typings, convert UTC to local time with date-fns, and integrate Prisma in a full-stack app.
Build: push to Github and Vercel deployment28:03
Final Code: prisma.schema,10:11
Final Code: Server actions and updated data fetching in components5:40

What we will do in this section3:53
Miscellaneous Theory: Concepts for the Doctor Profile Page4:37
Build: Getting started with Building the Doctor Profile Page23:11
Builds the doctor profile page in a Next.js app by creating a dynamic route with doctor id and scaffolding four components for a mobile-first layout.
Final Code of Doctor Profile Page0:14
Starter Code / Prompts: DoctorProfile Top Card and About Section10:15
Build : DoctorProfile Top Card2:10:44
Build : DoctorProfile About Section12:40
Final Code: DoctorProfile Top Card and About Section3:42
Starter Code / Prompts: Reviews Section in Doctor Profile page12:49
Build : Doctor Profile - Reviews section Part 142:32
Build : Doctor Profile - Reviews section Part 231:37
Build : Doctor Profile - Reviews section Part 339:12
Build : Doctor Profile - Reviews section Part 41:48:56
Final Code: DoctorProfile Reviews Section6:13
Strategy for the Appointment Scheduling Section9:08
Starter Code / Prompts: Appointment Scheduling Section21:32
Build : Doctor Profile - Appointment Scheduling Section Part 11:22:45
Build : Doctor Profile - Appointment Scheduling Section Part 21:20:53
Build : Doctor Profile - Appointment Scheduling Section Part 31:27:24
Final Code: Appointment Scheduling Section7:36
Testing Appointment Scheduler and Git Commit28:05
Test the doctor appointment scheduler by seeding doctor leaves, simulating pending and booked appointments, and validating slot visibility against leaves, payments, and past-time constraints, with git commits and vercel deployment.

What we will do in this section0:58
THEORY: Introduction to zod3:04
Miscellaneous THEORY: Benefits of NextAuth ,JWT ,cookie,Password hashing etc.5:43
BUILD: Short version to Implement Next Auth (Detailed version in Appendix)1:04:57
Final Code: Next Auth2:14
Strategy Sign in and Sign out5:39
Starter Code / Prompts: Sign in and Sign out11:22
BUILD: sign in , sign out, modify header - Part 126:57
BUILD: sign in , sign out, modify header - Part 235:03
BUILD: sign in , sign out, modify header - Part 343:53
BUILD: sign in , sign out, modify header - Part 442:34
BUILD: sign in , sign out, modify header - Part 56:32
BUILD: sign in , sign out, modify header - Part 61:26:46
BUILD: sign in , sign out, modify header - Part 77:56
Final Code: Sign in and Sign out6:08
Starter Code / Prompts: Sign Up2:38
Build: Sign up1:02:44
Build a sign-up page by extending the sign-in base with a zod signup schema, a server action to create a user and auto sign in, and default form values.
Final Code: Sign up3:49
Add Auth Secret in Vercel1:46
Add and configure the auth secret in both your dot env file and vercel environment variables to enable next auth sign-in, then redeploy to apply changes.
Check if callback URL is working11:21
Final Code: Sign in , Sign up2:05

What we will do in this section3:50
Theory: React Hook Form4:30
Prompt / Starter Code: page.tsx , patient-profile-client.tsx , Error notif.11:37
Build : patient-profile-client.tsx , Error notification component - part 11:08:41
Build a patient profile page with editable personal details, image upload, and appointments, using server and client components and server actions for user details and appointments, with error handling.
Build : patient-profile-client.tsx , Error notification component - part 21:04:23
Build a patient profile page in a Next.js app using TypeScript and Tailwind, fetching details and appointments via server actions, handling errors with redirects and a home-page error notification component.
Build : patient-profile-client.tsx , Error notification component - part 33:31
Final Code:patient-profile-client.tsx , Error notification component4:59
Prompt / Starter Code: Profile Header8:06
Build : Profile Header Part 19:00
Build : Profile Header Part 221:07
Build : Profile Header Part 31:42:34
Develop a hoverable profile header with an invisible upload button, implement an image upload flow, extract file keys from URLs, and update the profile image via a server action.
Build : Profile Header Part 414:55
Develop and refine the profile header component, fix TypeScript errors, optimize React hooks with useCallback and suspense boundaries, then build, commit, and deploy the app for live updates.
Build : Profile Header Part 56:32
Force client components to remount with a unique key to discard stale session data after sign out and sign in, ensuring the header shows the new user's avatar and name.
Final Code: Profile Header4:41
Prompt / Starter Code: Personal Information, Edit Modal8:30
Build : Personal Info Part 136:14
Build : Personal Info Part 251:05
Build : Personal Info Part 331:59
Build : Personal Info Part 43:21
Final Code: Personal Information, Edit Modal4:59
Prompt / Starter Code: Appointment Section and Associated Models15:25
Build: Appointments Section Part 141:19
Build: Appointments Section Part 226:59
Build: Appointments Section Part 336:19
Build: Appointments Section Part 417:47
Build: Appointments Section Part 551:54
Build: Appointments Section Part 61:10:31
Write a server action to submit patient reviews and validate data with a schema. Update doctor profiles and testimonials, and connect a review dialog with a stateful user interface.
Build: Appointments Section Part 727:48
Build: Appointments Section Part 89:19
Final Code: Appointment Section and Associated Models8:08

What we will do in this section7:14
Prompt / Starter code: Doctor Profile to Patient details Page17:34
Build: Doctor Profile to Patient details Page - Part 11:02:28
Build: Doctor Profile to Patient details Page - Part 227:22
Build: Doctor Profile to Patient details Page - Part 349:18
Build: Doctor Profile to Patient details Page - Part 418:00
Build: Doctor Profile to Patient details Page - Part 55:52
Final code: Doctor Profile to Patient details Page7:35
Prompt/Starter Code: PatientDetails (page.tsx) and related things6:45
Build: PatientDetails (page.tsx) and related things - Part 14:58
Build the patient details page in a two-step booking flow, handling myself or someone else with prefilled profile data and onward navigation to payment and success.
Build: PatientDetails (page.tsx) and related things - Part 241:31
Build the patient details page under appointments using server and client components. Fetch and validate appointment data with server actions, handle guest sign-in, and update guest appointments with user IDs.
Build: PatientDetails (page.tsx) and related things - Part 332:20
Develop and complete a patient details page in a full-stack next.js app, defining types for appointment and patient data, wiring server actions, and rendering a client component.
Build: PatientDetails (page.tsx) and related things - Part 434:18
Final code: PatientDetails (page.tsx) and related things4:43
Prompt/Starter Code: PatientDetailsClient2:47
Build: PatientDetailsClient54:35
Final Code: PatientDetailsClient1:24
Prompt/Starter Code: PatientDetailsForm12:49
Build: PatientDetails Form Part 125:36
Design and validate a patient details form by building a base schema plus patient-type variants (myself or someone else), with reusable phone and date validators including alternate phone logic.
Build: PatientDetails Form Part 216:11
Build: PatientDetails Form Part 31:27:00
Build: PatientDetails Form Part 423:55
Build: PatientDetails Form Part 527:48
Learn to validate and process patient details from the patient details form using a server action that checks login, time zones, and creates or updates appointments.
Final Code: PatientDetailsForm7:01
Build - Part 6 - Testing + Allow to go to Profile page to make changes35:44
Final Code7:09

What we will do in this section3:49
Theory: Communicating with External Services (like PayPal)3:18
Try to write PaymentPage (page.tsx)0:12
Strategy discussion Build : Payment Part 18:23
Build : Payment Part 226:24
Prompt / Starter code: PaymentClient component3:47
Build : Payment Part 314:42
Build : Payment Part 436:30
Build : Payment Part 56:21
Prompt / Starter code : PayPal BE14:13
Build : Payment Part 627:28
Build : Payment Part 717:45
Build : Payment Part 846:59
Task: PayPal checkout Buttons4:21
Build : Payment Part 9 (Paypal Checkout Buttons)48:37
Prompt / Starter code: Cash payment6:49
Build : Payment Part 10 (Cash Payment)33:34
Build : Payment Part 11 (Styling)44:17
Final Code10:15

Requirements

Access to any LLM such as Gemini (can avail 1 month for free), Claude, Chatgpt etc.

Description

Have you ever wanted to build a real-world web application but didn't know where to start? Or are you an experienced developer looking to modernize your workflow? Welcome to the AI-Accelerated Web Developer Bootcamp—the only course you need to go from zero to full-stack developer, the modern way.

Whether you have never written a single line of code or you’re a professional developer, this course is designed for you. We believe the best way to learn is by building, so we'll dive straight into creating a complete, professional application from the ground up.

In today's tech landscape, the way we build software has fundamentally changed. Engineers at top companies leverage the power of AI to build faster and smarter. This course teaches you this exact modern workflow. Our core philosophy is Just-in-Time Learning: you'll learn precisely what you need, right when you need it, and apply it immediately.

How We Learn (The "Senior Dev" Method):

This course is not about blindly copy-pasting code from an AI. We will use an LLM (like Gemini) as a powerful learning tool, mirroring the workflow of a senior developer:

Define the Goal: We'll break down a feature into a clear requirement.
Draft with AI: We'll craft a precise prompt to have an AI generate the first draft of our code.
Analyze & Understand: This is the most critical step. We will go line-by-line through the AI-generated code to understand the "what" and the "why".
Refine & Refactor: You will then take the lead—fixing bugs, making improvements, and integrating the code perfectly, just like a senior engineer would.

By the end of this course, you will not only have an incredible project for your portfolio but, more importantly, the confidence and skill to bring any of your own ideas to life.

Who This Course Is For

This course is designed for a wide range of learners, and we've built a specific path for you, no matter your skill level.

For Absolute Beginners (with Zero Coding Experience): If you're new to coding, this is the perfect place to start. Our dedicated "Foundations" module will gently guide you through the essentials of HTML, CSS, JavaScript, and React, giving you the solid groundwork needed to tackle the main project with confidence. You don't need any prior experience—just a desire to build!
For Experienced Developers: If you're already a developer, this course will level up your skills. You will learn how to integrate a cutting-edge, AI-accelerated workflow and master the latest features of the modern web stack, including React 19, Next.js 15 Server Components, and advanced database management with Prisma.
For All Learners: This course is perfect for anyone tired of fragmented tutorials who wants to build a single, comprehensive portfolio project and learn a practical, momentum-driven approach to development.

What You'll Learn

Adopt a Modern AI-Accelerated Workflow: Learn to use AI as a co-pilot to write code faster and more effectively.
Master a Full-Stack, In-Demand Tech Stack: Build expertise in Next.js 15, React 19, TypeScript, Prisma, NextAuth v5, Zod, Tailwind CSS, and Shadcn UI.
Build a Complete, Real-World Application: Create a full-featured hospital appointment and admin management system ("Highland Hospital") from scratch.
Develop Production-Ready Features: Implement critical features like secure authentication, patient profile management, appointment scheduling, payment processing with PayPal, and file uploads.
Build a Comprehensive Admin Dashboard: Create a secure, role-based admin system to manage doctors, appointments, users, and site content.
Master Modern Next.js Features: Work with React Server Components, Server Actions, and advanced file-based routing.
Think Like a Builder: Develop the momentum and problem-solving skills to overcome challenges and complete complex projects.

Technologies

This course is a comprehensive deep-dive into the modern web development ecosystem. Here are the technologies and concepts you will master:

Frameworks: Next.js 15, React 19
Language: TypeScript
Styling: Tailwind CSS v4, Shadcn UI, Responsive Design, Box Model
Database & ORM: Prisma, PostgreSQL (or your preferred SQL DB)
State Management: React Hooks, Server Components, Client Components
Data Fetching & Mutations: Server Actions, Data Caching & Revalidation
Authentication & Authorization: NextAuth v5, Role-Based Access Control (RBAC), Auth Guard
Form Management: React Hook Form, Zod (for schema validation)
Payments: PayPal Integration (@paypal/react-paypal-js)
File Uploads: UploadThing
UI & UX: Custom Hooks (useDebounce), Modals & Dialogs, Data Tables, Toasts & Notifications
Data Visualization: Recharts (for charts and graphs)
Utilities: date-fns, date-fns-tz (for date/time management), Lucide React & React Icons (for icons)
Development & Tooling: Project Setup, VSCode, Git, Node.js, npm/yarn/pnpm
Core Concepts: Full-Stack Development, Web Development, API Routes, CRUD Operations, Component-Based Architecture, UI Design, Admin Dashboard, Web Application, Single Page Application (SPA).

Who this course is for:

Beginners who want to learn to code quickly
Experienced devs who want to incorporate a modern workflow
Anyone wanting to learn by Building a Full Stack web app

What you'll learn

Explore related topics

Course content

Day 0 - Start Here !4 lectures • 40min

Foundations (First 2 videos start the Next JS project + Rest Optional)13 lectures • 8hr 30min

Day 1 and 2 : Build the Header and the Footer23 lectures • 5hr 45min

Day 3 and 4: Complete the Home Page18 lectures • 5hr 14min

Day 5 and 6: Data from Database for the Home Page, Initial deployment21 lectures • 6hr 57min

Day 7 and 8: Doctor Profile Page21 lectures • 12hr 28min

Day 9 and 10: Authentication21 lectures • 7hr 14min

Day 11 and 12: User Profile Page30 lectures • 12hr 50min

Day 13 and 14: Appointment Flow: Patient Details Page26 lectures • 10hr 22min

Day 15 and 16: Payment Page19 lectures • 5hr 58min

Requirements

Description

Who this course is for: