Vibe Coding Masterclass: Full-Stack Web Development with AI

Learners build a dashboard from scratch in V0 dev, emphasizing clear prompts, component-based design (sidebar, main dashboard, link cards), and front-end to back-end integration.

Master prompt modifications to generate a dashboard-like UI, push to Vercel, then refine colors, component details, and titles via component-level prompts and a terminal/cursor workflow.

Pull the v0 dashboard into the cursor project using the downloaded code and terminal commands, install dependencies, and overwrite files as prompted.

Add new dashboard pages by wiring link cards to a detail form, enabling edits that save automatically and reflect across the UI. Build with react basics and a reusable sidebar.

Refactor the dashboard by turning the reusable sidebar into its own tsx component, import it across pages, export it, and streamline code to reduce duplicates and improve scalability.

Create a reusable link modal with a dimmed overlay on the home page, triggered by the create link button, and learn to import and adapt third-party UI components in cursor.

Learn to implement a reactive link creation flow in React using useState to close the link modal, add a link card, and update the link dashboard as changes appear.

Edit and save changes to existing links using reactive states and the useEffect hook. Build out link details, a save button, and the useLinks hook for future database integration.

Add a reusable toast notification system to a feature-rich dashboard to display success, error, and warning messages from actions like creating or editing links, with auto close and bottom-right placement.

Explore getting started with Supabase as a Postgres database with built-in authentication, edge functions managed by Vercel, and set up your project, organization, and region for a Next.js app.

Learn to design a Supabase sql database with users, links, and analytics tables, using uuid, one-to-many relationships, foreign keys, json tags, and cascading deletes.

Connect a database to a Next.js project by configuring env.local with public variables, wiring server.ts, client.ts, and middleware.ts, and discuss row level security and uuid-based access.

Set up row level security (rls) to ensure users can only access their own data in the database. Define policies, uuid-based authentication, and CRUD actions to enable access from Next.js.

Create front end helper functions to interact with Supabase and access user and link data, enabling reusable get, update, delete, and create operations on the dashboard.

Learn to create a link entry and store it in the database using a helper and link modal, with a hard-coded user id and TypeScript validations in Supabase.

Align your database schema with your code by copying the SQL schema, renaming variables to match, and validating with Supabase, including role checks and uuid usage for secure access.

Fetch and render link data on a dashboard with server-side rendering and Supabase. Learn to display, edit, and delete links through dynamic pages.

Learn to view and edit link details using dynamic routes and Supabase, fetch data by id, navigate with router, and persist changes to the database.

Update your database by calling the update link helper from the link detail and use the links data to propagate changes, save changes, and refresh the dashboard.

Implement a slug-based redirect route with a ts file, query Supabase for the destination URL, redirect, and log analytics with id, clicked_at, and link_id.

Create a login and signup page using a magic link with Supabase to authenticate users via an emailed link, with dark mode and an auth folder setup.

Connects Supabase auth with a passwordless email magic link, wires a page.tsx with create client and email validation, and uses toasts to confirm success or errors during sign in.

Protect the dashboard by checking Supabase sessions and redirecting unauthenticated users to the authentication page, then extend protection to analytics pages with a single layout.

Learn to connect authentication to the relational database by linking the users table to the auth table, configuring foreign keys with cascade, and removing manual uuid generation.

Configure a Supabase trigger and function to automatically copy every new auth.users into the users table, ensuring data consistency and reliable analytics.

Reactivate user roles and database policies to secure authentication within the dashboard, then test and troubleshoot with error handling, retry logic, and graceful empty states.

Learn how to replace a hard-coded user id with the session id from Supabase, enabling authentication, triggers to create users, and seamless link creation on the dashboard.

Implement a Google social login through an OAuth flow, exchanging tokens to sign in users with Google, using a pre-built configuration and Google provider in Supabase.

Integrate Google OAuth social login into a React web app by globally loading the Google script, using the client ID, and implementing a JavaScript callback to handle credentials.

Implement a Google sign-in OAuth flow with Supabase, expose the sign-in handler on the window, handle errors, and redirect users to the dashboard after login.

Learn how to pass user metadata to Supabase during auth flows, using display name or name in metadata to populate a users table and sidebar, with triggers and functions.

Implement a sign-out flow by adding a profile dropdown that triggers Supabase auth sign out, then redirects the user to the login page, securing the dashboard.

Enable supabase real-time updates to analytics by subscribing to a channel and processing payloads to update click counts. Watch the dashboard refresh in real time as analytics data arrives.

Connect the analytics dashboard to the Supabase database to show total link clicks in real time, troubleshoot client side vs server side analytics code, and prepare deployment to Vercel.

Spot and fix common AI coding errors, including server-side vs client-side mismatches with useEffect and useState, async/await pitfalls, and over-abstracted analytics helpers to reduce bloat.

Clean up unused ai generated code before deploying to Vercel by removing testing functions, markdown files, and unused components; review changes, and ensure no leftover test connections remain.

Refines abstraction by consolidating analytics functions into a unified flow, evaluates a master function, and adopts a Supabase RPC approach to sum clicks and simplify data retrieval.

Add error handling for all fetch and database calls using toast notifications to show user-friendly error messages and boost usability.

Assess security by reviewing environment variables, API keys, and Supabase roles. Guard client-side vs server-side code and remove sensitive console logs before deploying to vercel.

Connect Vercel to GitHub, import the vibe AI course project, and deploy a Next.js app; learn to manage environment variables and address build errors for production.

Configure environment variables in Vercel to securely manage API keys and Supabase data, import .env, and redeploy production builds, while understanding client-side exposure and edge function considerations.

Fix linting and TypeScript errors exposed by a full build. Redeploy to Vercel via git push with a clear commit message, enabling automatic builds and safe rollbacks.

Discover how vercel automates deployment on github commits, rebuilding your site with the latest changes, delivering a seamless developer experience and safe rollback to the previous production version.

Configure Vercel firewall bot protection, logging, and challenge rules to block AI bots and reduce 404s. Set up domain linking and observe edge requests for caching and performance.

Install Vercel analytics in your app, add it to the top-level layout and body, deploy, and verify visitor data and page views, noting 30 days on the free plan.

Boost application speed with Vercel speed insights analytics, understand p75 to p99 load metrics, and optimize largest contentful paint, time to first byte, and edge functions for Next.js deployments.

Master react performance with memoization: implement react memo and use memo for static components, and useCallback for stable functions, delivering snappier navigation and optimized loads.

Explore AI integration by building a prompt enhancer that uses OpenAI APIs and whisper for speech input, connecting to the back end and cloud services.

Set up a new dashboard layout, describe the prompt and UI, implement a sign-in with a Sybase OTP magic link, and enable real-time Supabase RPC updates for an AI-backed dashboard.

Set up database, authentication, roles, and helper functions for the cursor app, create a users table with credits and a decrement-credits RPC to manage AI API usage.

Learn to design effective prompts, manage tokens and pricing across Claude Sonnet, Claude Opus, and OpenAI, and optimize costs with system prompts, token limits, and prompt caching.

Discover how to engineer effective prompts for Claude, defining objectives, system prompts, and token limits, and testing workflows to improve AI outputs and reduce errors.

Navigate the OpenAI console to create prompts, configure models, variables, and text reasoning. Export node code, manage api keys, and explore whisper-based audio before sending requests to OpenAI and Claude.

Integrate front-end prompts with a back-end using the anthropic sdk to call Claude, verify user credits, handle api responses, and display results.

Explore MCP, the model context protocol, and how it connects AI to tools like Notion. Wire MCP servers via URL and auth token, and compare to fine tuning.

Learn to make api calls to OpenAI, compare models like GPT variants and Claude, and manage prompts, verbosity, and Node.js integration.

Build an audio transcription workflow using whisper and OpenAI, handling front-end recording, blob-based storage, and back-end routes to transcribe audio into text.

Learn to implement an audio transcription flow using whisper, display transcription for on-screen editing before sending to OpenAI, with UI checks and flexible routing.

Learn how streaming AI API responses improves usability by displaying text chunk by chunk as it arrives, using readable streams and for of loops across OpenAI and Claude integrations.