Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Copilot Vibe Coding Full Stack: Build an App from scratch
Rating: 5.0 out of 5(1 rating)
5 students

Copilot Vibe Coding Full Stack: Build an App from scratch

Create a fitness web app from scratch using Github Copilot Vibe Coding Style
Created byIulia Carla Sacelean
Last updated 4/2026
English

What you'll learn

  • Practice Github Copilot‑Style Vibe Coding
  • Build a Full‑Stack Fitness Tracker Web App
  • Learn how to build a web app from scratch
  • Develop Coding and Testing Mindset
  • Apply Regression Testing and Bug‑Fixing

Course content

2 sections • 11 lectures • 1h 33m total length

  • Vibe Coding: What are we going to build and how?1:10
  • Welcome !1:03
  • How to install Node.js1:56

    In FitnessTrack360

    • Node.js runs your backend (server.ts) and serves the calendar app.

      https://nodejs.org/en/download

    • npm installs tools like TypeScript, Express, and pg (Postgres client), and manages them in package.json.

    • Together, they form the foundation of your project: Node.js executes the app, npm organizes the ecosystem of libraries that make it work.


  • Install Ngrok Tunnel2:57

    ? Intro to ngrok Tunnels

    ngrok is a tool that creates a secure tunnel from your local machine to the internet. This means you can share a project running on localhost (like your FitnessTrack360 app) with anyone in the world using a public URL. It’s especially useful for demos, testing webhooks, or letting students and collaborators access your app without deploying it to a server.

    ? Installation & Setup

    1. Download ngrok

      • Go to ngrok.com and sign up for a free account.

      • Download and install ngrok for your operating system.

      • Verify installation:

        bash

        ngrok version


    2. Add your Authtoken

      • Copy your authtoken from the ngrok dashboard.

      • Run:

        bash

        ngrok config add-authtoken YOUR_AUTHTOKEN_HERE


    3. Start a Tunnel

      • If your app runs on port 3000:

        bash

        ngrok http 3000


      • ngrok will generate a public URL like:

        Code

        https://abcd-1234.ngrok-free.app -> http://localhost:3000


    4. Optional Config File Save a ngrok.yml for convenience:

      yaml

      version: "2"

      authtoken: YOUR_AUTHTOKEN_HERE

      tunnels:

        fitnessapp:

          proto: http

          addr: 3000


      Then start with:

      bash

      ngrok start fitnessapp


    ? Lesson Outcome

    By the end of this lesson, you will:

    • Understand what ngrok tunnels are used for.

    • Install ngrok and authenticate with their authtoken.

    • Start a tunnel and get a shareable public URL for their local app.

  • Our first Prompt Using Github Copilot5:39

    Visual studio Code: https://code.visualstudio.com/

  • Github Repository - Our Fist Commit to Draft App Project5:20
  • Postgres SQL - Create Database Connection using PG Admin2:19
  • Create Project Structure and Start The App26:37
  • Connect Backend Save Data and Fix our First Classic Bug37:24
  • Add a new Feature to our Fitness AppTrack6:42

Requirements

  • For Begginers. No coding experience needed.

Description

Welcome!

This course takes learners on a practical journey of building a full‑stack fitness tracker application from the ground up. Starting with the frontend, students design an interactive calendar and form that allow users to log workouts, minutes, and notes. They then connect this interface to a backend API, handling requests and responses, and finally link everything to a database so entries persist across sessions. By following this flow, learners experience the complete cycle of modern web development.

Throughout the course, we emphasize Copilot‑style vibe coding — an iterative, collaborative approach where problems are broken into small steps, tested quickly, and refined with confidence. Learners see how progress builds piece by piece, making coding feel approachable and rewarding. Alongside feature development, we introduce regression testing, teaching students to re‑run core functionality after each change to ensure stability. This habit helps prevent accidental breakages and builds professional discipline.

We also tackle classical bugs that every developer encounters, such as off‑by‑one date errors, missing DOM elements, and backend mismatches. Debugging these issues gives learners real‑world problem‑solving experience. By the end, participants will not only have a working fitness tracker but also the confidence to build and maintain frontend, backend, and database systems with clarity, stability, and resilience.

Who this course is for:

  • Learn Vibe Coding from Scratch
  • Build a full‑stack fitness tracker step by step — mastering frontend, backend, database connections, regression testing, and bug‑fixing with Copilot‑style vibe coding.

Report abuse