Vibe Coding a Full-Stack Budget App: YouTube Series Starter

This repository contains the starter code for the walkthrough video demonstrating how to "vibe code" a full-featured, full-stack web application using Wasp, React, Shadcn/ui, and AI assistance (like Cursor + Gemini 2.5 Pro).

The goal is to showcase a realistic workflow for building complex applications collaboratively with an AI, focusing on a vertical slice approach to deliver features incrementally.

We'll be building a collaborative envelope budgeting app inspired by tools like YNAB.

Tech Stack

• Framework: Wasp - A full-stack framework using a declarative DSL to integrate React, Node.js, and Prisma. It handles boilerplate like auth, database operations, and build processes.
• UI Components: Shadcn-admin - Admin Dashboard UI built with Shadcn and Vite.
• AI Assistance: Cursor / Gemini 2.5 Pro (or your preferred AI coding tool)

The Workflow (As Seen in the Video)

The YouTube video demonstrates a workflow similar to this:

1. Understanding the Goal: Defining the features of the collaborative budgeting app.
2. AI Setup: Ensuring the AI (Cursor) has access to the project rules (./cursor/rules/).
3. PRD (Product Requirements Document): Collaboratively defining the app's requirements with the AI.
4. Planning: Breaking down the PRD into actionable, step-by-step implementation tasks suitable for the vertical slice approach.
5. Implementation (Vertical Slices):
   • Pick a small, end-to-end feature slice (e.g., basic manual transaction entry).
   • Define the necessary database models (schema.prisma).
   • Define Wasp operations (queries/actions) in main.wasp.
   • Implement server logic for operations (src/server/...).
   • Build the UI components (src/client/... or src/features/...).
   • Connect UI to backend using Wasp operations.
   • Test and refine.
6. Documentation: Asking the AI to document implemented features (e.g., in ai/docs/).
7. Iteration: Repeating the process for subsequent features, building upon the existing foundation, and revising the PLAN on-the-go as needed.

Getting Started (Following Along)

1. Clone the repository:

   git clone https://github.com/wasp-lang/vibe-coding-video.git
   cd vibe-coding-video
2. Install Wasp:

   curl -sSL https://get.wasp.sh/installer.sh | sh
3. Set up Environment Variables:
   • Copy the example server environment file: cp .env.server.example .env.server
4. Database Setup:
   • Start a local PostgreSQL instance (make sure to have docker installed and running)

     wasp db start
   • Run the initial database migration:

     wasp db migrate-dev
5. Start the Development Server:

   wasp start
   This will launch the frontend (React app) and the backend server. Open your browser to http://localhost:3000.

Project Structure & Key Concepts

Codebase Structure

• main.wasp: The heart of the Wasp application. Defines routes, pages, operations (queries/actions), auth methods, jobs, APIs, etc. See Rule 1.
• schema.prisma: Defines the database models (entities). See Rule 3.
• src/: Contains your custom React (client) and Node.js (server) code.
  • src/features/: Fullstack code is organized by feature (e.g., auth, transactions).
  • src/components/: Reusable UI components, including those based on Shadcn/ui. See Rule 5.
• .cursor/rules/: Contains detailed markdown files explaining project conventions, Wasp features, and best practices used in this project. Crucial for guiding the AI.

Project Conventions

Refer to the .cursor/rules/ directory for in-depth explanations of:

• Wasp Overview & Core Concepts (Rule 1)
• Project Conventions (Rule 2)
• Database, Entities & Operations (Rule 3)
• Authentication (Rule 4)
• Frontend & Styling (Rule 5)
• Advanced Features & Troubleshooting (Rule 6)
• Possible Solutions Thinking Command (Rule 7) pass this in manually with @ in the cursor chat
• Deployment guidelines (Rule 8)

Example Prompts

Example prompts that were used in the video can be found in ai/example-prompts.md, along with the PRD (ai/example-prd.md) and plan (ai/example-plan.md) generated from them.