Vibe Coding Bootcamp: Build Any App, Game or Website with AI

Explore vibe coding tools to create websites and games, extend projects with GitHub Copilot, and publish full-stack apps using Replit and Lovable, including a bmi calculator and a virtual menu platform.

Build full stack apps with Replit using React and TypeScript; create a two-tab fitness calculator with BMI and water intake, test inputs, preview the UI, and deploy.

Define your app with a PRD outlining goals, key features, functional requirements, and wireframes, and map data with a database schema detailing tables, fields, data types, and relationships.

Create a prd to build a platform that displays and manages a virtual restaurant menu, with admins handling categories, items, and their order, plus guest viewing.

Refining the prd for a virtual menu app, this lecture guides reviewing and simplifying the document in a Google doc, aligning admin and guest features for an online solution.

Craft a Prisma-based database schema from the refined PRD, documenting models, fields, and data types in a Google Doc, review with AI, and align with PRD features before building.

Build a virtual menu app with lovable, guided by the PRD and database schema using a free account. Preview the app in React and TypeScript, explore code, enable GitHub sync.

Connect Supabase to turn the demo into a real backend, enabling login and sign up, user accounts, real data, and features like email notifications, payments, and scheduled tasks.

Build and connect login and register pages to Supabase, enable authentication, confirm emails, and verify sign up and login flow in the app dashboard.

Connect the admin dashboard to the database to enable account owners to create and publish menus, manage categories, items, and settings, replacing mock data with live data on Supabase.

Add and manage restaurant categories and menu items, control display order and active status, and store images to build a functional menu with category-driven item creation and updates.

Enable the banner image upload on the settings page and preview the menu with a chosen image, managing sql execution and daily credits.

Create address, phone, and opening hours fields on the settings page and ensure the preview menu page dynamically reflects this contact information in the database.

Build the preview menu page by displaying the selected banner, restaurant title and description, and a full item list with images, prices, and filters for appetizers, main courses, and drinks.

Publish your project with lovable to a live domain, review security, implement server side validation, and let restaurants create accounts, add menus, and customers search the preview menu.

Maintain your lovable project locally with GitHub Copilot by connecting to GitHub, cloning the repo, installing dependencies, running npm run dev, and publishing updates.

Learn to modify a project by adding a hero banner to the landing page and publish updates to the live version using Visual Studio Code, git, and GitHub Copilot.

Learn to guide GitHub Copilot to generate code that follows modern standards and best practices while you structure a React.js project, organize components, and write clean, maintainable logic.

Explore production-grade web practices in a React shop: add to basket, adjust quantities, and view an order summary, while organizing code into modular components and separate CSS with Copilot guidance.

Break the UI into single responsibility components, such as product list and product card, and organize folders, state management, utility functions, and styles for scalable, maintainable web apps.

Separate code into components with a single responsibility to enable scalable development. Use CSS modules for component-specific styles to scope rules and prevent conflicts.

Plan state management early by creating a shop context and provider to centralize basket state, avoid prop drilling, and use context API for medium apps and Redux for complex domains.

Leverage the shop context to add and remove items from the basket, avoiding prop drilling, and ensure product list and cards read from the context.

Update the cart by adjusting item quantities and keeping selections intact, using context methods to increment and decrement, and compute the total with reduce for an up-to-date order summary.

Discover how to select and implement tests for your app with GitHub Copilot in VS Code, including setting up Jest and validating features like product lists and cart behavior.

write and run unit tests to verify cart functionality, ensuring clicking a product adds it to the cart and updates the cart summary, with automated checks for regressions.

Match a Figma prototype to production-grade pages by using prompt engineering with code and GitHub Copilot to enforce pixel-perfect layouts, branding guidelines, and a cohesive design system.

Apply advanced prompt engineering to build a one page consulting site by establishing a project knowledge base and UI design guidelines, including color palettes, Albert Sans typography, and button styles.

Learn incremental prompting to break a website project into simple subtasks, using a centralized cloud based design document to define global css, html structure, and ui guidelines.

Design the hero section using UI guidelines and the clear framework, applying precise values such as 20px margins and 110px bottom padding on a main dark background.

Add a client logos section below the hero. Place five 60 by 60 logo placeholders per row, distributed evenly across the page container, with 60 pixels top and bottom padding.

Build a three-section page header with a left logo, centered navigation, and right call-to-action, featuring an 80-pixel tall main dark header, 18-pixel nav spacing, and an outline button.

Move your project to a local setup using Visual Studio Code and Live Server. Leverage GitHub Copilot to see changes instantly, add missing images, and speed up development.

Move styles to a separate style.css and link it. Replace image placeholders with real assets by exporting from Figma into an images folder, updating paths, using Copilot.

Position and resize hero section images using absolute and relative layouts, explore options with a white silhouette or a real team photo, and adapt for mobile below 1200px.

Build a services section by arranging three cards per row with a 40-pixel gap, white background, 60-by-60 icons, and 24-pixel semibold main-dark title with a details button and an arrow.

Create a contact us section with a white background and office cards featuring 1:1 images, 20px paddings, 40px gaps, and subtle shadows using ai-assisted design and GitHub Copilot.

Perform a final audit and corrections on a one-page landing page, fixing links, adding smooth scrolling, and updating sections, then prepare for publishing with Firebase.

Learn to publish your website with Firebase hosting, including project setup, npm installation, and deploying via Firebase deploy. Navigate the console login, hosting setup, and deployment steps to publish.

Learn a practical workflow to add a mobile menu feature, including a hamburger icon, HTML, CSS, and JavaScript, test on live vs local, and deploy with Firebase to publish.

Vibe coding bootcamp closes with encouragement to keep exploring, building, and learning across new tools and platforms. Leave a quick review to help others discover the course and keep coding.