AI-Accelerated Web Developer Bootcamp | Build Full-Stack App

Explore the difference between websites and web applications, learn core web technologies (HTML, CSS, JavaScript), and set up a code editor to build a Next.js app locally on localhost:3000.

Explore the Next.js project structure with the app router, page.tsx, and layout.tsx. Review key files like global css, favicon.ico, git ignore, npm dependencies, and tsconfig.json for organization.

Master JavaScript fundamentals with toy problems: syntax, variables, data types, functions, operators, conditional logic, arrays, and loops for building interactive web apps.

Practice HTML, CSS, and JavaScript fundamentals with toy problems and external files. Analyze padding, margin, and simple DOM interactions through hands-on examples like a greeting card.

Explore how React, a JavaScript library for building dynamic user interfaces, uses components and state for smart rerendering via a virtual dom and diffing, and its use with Next.js.

Build a simple to-do app to learn React core concepts: components, jsx/tsx, state management with useState, event handling, conditional rendering, and lists with keys.

Discover Next.js, a React framework for server-side rendering, SEO, and full-stack apps. Explore server and client components, file-system routing, layouts, and server actions.

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.

Create a responsive header and footer for the AI-accelerated web app, with logo, home link, book appointment, theme toggle, sign-in (avatar when logged in), and a static contact footer.

Outline the strategy for building the header left side, including the logo and the application name, a sticky header, desktop designs, and responsive tablet and mobile adjustments using Tailwind.

Extract header specifications from the design and identify background color, height, and padding; implement a sticky header with a 32x32 logo, 12px gap, and an H3 app name.

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.

Fix Tailwind issues and build the left side of the header by creating a root layout with a shared header, and use bracket folders to control header visibility across routes.

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.

Create the header right side with book appointment, sign in, and theme toggle buttons, using a shared CDN button component, and implement a responsive menu client with a side sheet.

Build the header right side with a responsive MenuClient component for desktop and mobile, including a theme toggle powered by Next themes in a Next.js app using TypeScript and Tailwind.

Build the header right side with a home link as a next.js link and a scrolling book appointment button to doctors section; introduce a sign-in avatar with a loading button.

Use the use transition hook to navigate to the sign-in page without freezing the user interface, showing a loading state on the sign-in button as Next.js handles the route.

Continue building the header right side with mobile navigation via a right-side sheet triggered by three dots, preserving the theme toggle, home link, book appointment, and sign in.

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.

Learn to initialize a git repository, check changes with git status, stage files with git add, and commit with a descriptive message of the header and footer components.

Build the Highland Hospital homepage featuring a dynamic banner, department cards, a doctor list with ratings and profiles, and patient testimonials to establish trust; data is currently dummy.

Builds the Highland Hospital home screen by implementing department, doctor profile, and patient testimonial cards, and wires navigation to doctor profiles and the booking flow with date and slot selection.

Build a reusable department card in a Next.js TypeScript Tailwind project using the Shadchan card component, with props for department name and icon.

Build a doctor card component in a Next.js app using Tailwind and TypeScript, incorporating Next.js image optimization, shared CDN components, and a view profile button with a loading state.

Builds a review card for the home screen using Next.js, Tailwind, and TypeScript. Integrates a shared CDN card with header, content, and footer, featuring image, name, rating, testimonial, and date.

Learn to build and style a home screen card component with header, content, and footer sections, using flex column layout, 16px gaps, 24px padding, and responsive sizing for desktop cards.

Learn to build and style home screen cards, including a review card with image, name, a 1–5 star rating, truncation, and a responsive layout with line clamp for testimonials.

Build and integrate the home screen sections for departments, doctors, and patient testimonials using dummy data in a Next.js app with Tailwind and TypeScript, planning to migrate to a database.

Develop the R doctors section and patient testimonials by building Next.js components with TypeScript and Tailwind, reusing the doctor card and review card, and wiring with dummy data.

Build a dynamic home banner component in a Next.js TypeScript Tailwind app, sourcing banner data from dummy data, with an overlay for readable text and admin-controlled updates.

Stitch the home page to the designs, aligning header, banner, departments, doctors, and testimonials with a flex column layout and 1280 px max width to keep the footer at bottom.

Lay the foundation for your app's data layer by defining a Prisma database schema, creating models for users and appointments, generating the Prisma client, seeding dummy data, and enabling reads.

Migrate your app to a database by setting up a Neon database in Vercel, configuring Prisma, defining the schema, migrating, seeding data, and updating data fetching for departments and doctors.

Define the database schema by analyzing the design document, generating an entity-relationship diagram, and drafting a Prisma schema with Gemini, then critique and refine the schema based on requirements.

Define and migrate a Prisma schema for a hospital app by mapping user, doctor, and appointment tables, exploring accounts, verification tokens, and relationships, with Gemini-generated models.

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.

Run a database migration to apply the Prisma schema to Neon serverless, generating the Prisma client, then verify tables with Prisma Studio and prepare for seeding.

A three-step seed workflow to populate a health care database: seed basic tables, seed doctor and appointment data, and seed testimonials, using Prisma, Gemini, and dummy data.

Seed and validate the database for a full-stack app using Prisma. Create doctor profiles, appointments, and testimonials with seed scripts, verify results in Prisma Studio, and adjust file paths.

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.

Migrate our doctors section from dummy data to a database by building the get our doctors server action, defining a doctor summary type, and rendering results in the component.

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.

Push your Highland Hospital project to GitHub, run npm run build to catch errors, fix ESLint and Prisma issues, then deploy automatically to Vercel with continuous deployment.

Create a doctor profile page with photo, name, credentials, languages, specialties, and an about section; include paginated patient reviews and an appointment scheduler using dynamic routing in Next.js.

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.

Design and implement the doctor profile top card by defining DoctorDetails, building a get doctor details server action with Prisma, and wiring data to the top card and about sections.

Develop the doctor profile about component in a Next.js TypeScript app, rendering the doctor name and brief inside a styled card with props for name and brief.

Learn how to build a modular doctor reviews section for a patient profile, including a paginated review list, header with average rating, and reusable hooks for pagination.

Define a use paginated reviews custom hook to fetch and paginate doctor reviews, exposing current page, total pages and reviews, loading, error, and a page change handler.

Build the doctor profile reviews section by creating a paginated review list fed by a custom hook, then integrate it into the patient reviews component with star ratings.

Learn to implement doctor profile reviews pagination with a usePagination hook and pagination controls, enforcing first and last pages, configurable siblings, and ellipsis dots to generate dynamic page ranges.

Create a calendar-driven appointment scheduler: navigate months, auto-select first day, forbid Sundays, enable bookings within the current through next-to-next month, fetch and reserve slots, and hide past or booked times.

Build the doctor appointment scheduler in a React component with a calendar. Fetch available slots via a server action and encapsulate logic in a custom hook, outlining authentication gating.

Build an appointment scheduler by implementing use appointment slots to get available doctor slots, pre-select the pending appointment, and test all scenarios on the doctor profile page.

Build a doctor profile appointment scheduler in a Next.js app using TypeScript and Tailwind, wiring a calendar and slot buttons to a custom use appointment slots hook.

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.

Build a complete sign in and sign up flow with validation and secure credential handling. Implement next auth, session management, and protected routes for user profiles.

Implement next auth (auth js) to enable sign up, sign in, and sign out; validate inputs with zod, hash passwords, and manage session with jwt via middleware and catch-all api/auth.

Implement sign in and sign out flows with a header avatar and profile dropdown. Redirect unauthenticated users to sign in and return them to their target page after login.

Build front end for a next-auth login flow using Zod for runtime validations, define sign in form schema in lib/validators.ts, and implement sign in and sign out with header updates.

Implement sign in with credentials and sign out server actions using zod validation, form data, and next-auth with callback URLs and field-level errors.

Build the sign in flow by creating an auth layout, implementing sign in with credentials via a server action, and composing card, label, input, image, link, and toast components.

Improve the sign-in page styling and test error handling, including required fields and wrong credentials. Implement session checks and redirects using a callback URL, and outline sign-out and header updates.

Refine the sign-in flow by removing the success toast, relocate the toaster to the route layout for global notifications, and replace the sign-in button with the user avatar after sign-in.

Learn to enhance header navigation by replacing sign in with user avatar, implement dropdown and dialog menus for profile and sign out on desktop, tablet, and mobile, with admin links.

Enhance sign in and sign out across desktop, tablet, and mobile by using the as child prop for immediate menu closure and closing dialogs before the sign-out server action.

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.

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.

Verify the callback URL flow in a Next.js app by testing sign in and sign up redirects to the user profile page, and demonstrate route testing and protected navigation.

Build a dynamic user profile page with editable personal information, profile picture, and an appointments section featuring cancellation rules by payment type and a review system for completed visits.

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 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.

Improve the error notification component by decoding encoded URL messages and adjusting layout to align start, while enabling long messages to wrap with a break-words class.

Builds a profile header with image upload, where hovering reveals a camera icon and selecting an image updates the header and database via a server action.

Learn to set up image uploading with upload thing in a Next.js app, configure token and app id, and implement a front-end upload button that saves and updates profile images.

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.

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.

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.

Create a personal information component with an edit modal, validate inputs with zod, and update the user profile via a server action using react-hook-form.

Builds a personal information edit modal using Zod schema, React Hook Form, and a Next.js server action to update the profile with Prisma in a TypeScript app.

Create an edit profile modal with react-hook-form and zod validation, fix server action errors by date conversion, update session data, and refresh the header and page for live changes.

Complete the personal info component and edit model, fix unused variables during build, and push updates to GitHub for deployment; post deployment, expect brief image warm-up and re-login if needed.

In this lecture, we build the appointments section and the appointment card for an ai-accelerated web developer bootcamp project, including pagination, status badges, and modals for canceling and reviewing appointments.

Build a responsive appointments section by styling the appointment card to match designs, map over the appointments array from the server, and prepare cancel and review actions with mobile-first layout.

Build the appointments section component in the patient profile, reusing the appointment card and pagination, and implement handle page change to update the URL and fetch page-specific data.

Implement a cancel modal for upcoming appointments, handling cash and PayPal payments via an admin workflow, and update the appointment status to cancelled using a server action.

Develop the appointments section by implementing a two-dialog cancellation flow for upcoming bookings and cash payments, wiring state, props, and server actions with use transition for pending UI feedback.

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 a review dialog with a star rating using React Hook Form and controller, implement submission, validation, and styling tweaks on the user profile page.

Finish the user profile and appointments section, fix build-time errors, and commit the changes. Deploy on Vercel, adjust the page size to three appointments, and verify the updated profile view.

Build the patient details page in the booking flow with a conditional form for myself or others, prefill from the user profile, and inline validation guiding to the payment step.

Explore implementing the first step of the appointment flow—from doctor profile to patient details—handling logged-in and guest reservations with slot availability checks and server actions.

Build or update a create or update appointment reservation server action for logged-in users, convert times to UTC, manage pending reservations and slot availability, revalidate cache, and return appointment ID.

Develop a use appointment reservation hook to manage bookings for logged-in and guest users, routing to the patient details page with the appointment id and handling slot conflicts.

Implement a server action to purge expired payment-pending reservations on visiting a doctor profile page, enforce admin booking restrictions, and validate with Prisma client and hashed passwords.

Diagnose and fix TypeScript errors in appointment queries using Prisma ORM, validate where clause arrays, commit changes, and push to deploy the doctor profile to patient details page.

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 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.

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.

Learn to build a patient details page with server actions, robust error handling via a redirect to error page, and data fetching for appointment, user, and guest scenarios.

Build the patient details client by creating a booking steps component, then add the patient details client, wiring it with types, Next.js pages, and tailwind styling.

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.

Infer and export patient details form values from the schema, then build a Next.js form component with TypeScript, Tailwind, and React Hook Form validations using shared Shadchan components.

Learn to build a patient details form using react hook form and shadchan components, with the form, form control, and form field wrappers, plus validation and conditional fields.

Wire the patient details form to a process appointment booking server action, validating input, building appointment submission data, and checking slot availability with time zone and utc handling.

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.

Learn to implement and test the appointment flow in a Next.js app, creating patient details and payment routes, debugging routing issues, and enabling profile navigation back to the appointment.

implement a payment page that shows appointment details, offers pay at the counter and payPal options, requires agreement to terms, and handles PayPal checkout as well as cash payment flow.

Design and implement the payment page with cash at the counter or PayPal options, update appointment status and transaction records, and reflect revenue on the admin dashboard.

Build the payment page by retrieving the appointment id from the URL and fetching server-side appointment data. Pass billing data to the payment client component for UI, deferring PayPal integration.

Build a Next.js payment client component using TypeScript and tailwind. Wire appointment data types, booking steps, navigation, and placeholder PayPal and cash options.

Builds and refines a payment client for appointments, enabling cash or PayPal options, editing details, and aligning the UI with designs while updating patient data.

Set up PayPal in sandbox mode by creating personal and business sandbox accounts, configuring an app, and storing client id, secret, and api base url in a dot env file.

Learn to implement PayPal payments in a full-stack workflow by creating and capturing orders with the PayPal JavaScript SDK, including access token handling and server actions.

Implement PayPal payment flow by creating and capturing orders via V2 checkout endpoints, handling access tokens, and updating the Prisma appointment with PayPal order details at a fixed $150 price.

Master PayPal payment flow in a full-stack app by building an approved PayPal order, capturing payments, and updating the appointment and transaction records to reflect booking status.

Learn to build a PayPal checkout button in a React app using the PayPal JS library, including PayPal script provider integration, create order, and on approve flows.

Implement cash payment by adding a confirm cash appointment server action that marks the appointment as cash and revalidates pages, guiding cash flow integration in the payment client.

Apply payment page styling to match the provided designs using Next.js and Tailwind utilities. Then implement components, padding, typography, and separators for a polished full-stack app.