{"id":27485772,"url":"https://github.com/wasp-lang/vibe-coding-video","last_synced_at":"2026-03-14T22:13:22.576Z","repository":{"id":288104276,"uuid":"964603597","full_name":"wasp-lang/vibe-coding-video","owner":"wasp-lang","description":"Vibe Coding Full-stack App Starter Template","archived":false,"fork":false,"pushed_at":"2025-04-15T14:57:41.000Z","size":270,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"video-starter","last_synced_at":"2025-04-15T15:46:34.115Z","etag":null,"topics":["full-stack","prisma","shadcn-admin","shadcn-ui","vibe-coding","wasp"],"latest_commit_sha":null,"homepage":"https://env-budget-video-app-client.fly.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wasp-lang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-11T13:33:05.000Z","updated_at":"2025-04-15T14:57:45.000Z","dependencies_parsed_at":"2025-04-15T15:56:48.144Z","dependency_job_id":null,"html_url":"https://github.com/wasp-lang/vibe-coding-video","commit_stats":null,"previous_names":["wasp-lang/vibe-coding-video"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wasp-lang/vibe-coding-video","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasp-lang%2Fvibe-coding-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasp-lang%2Fvibe-coding-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasp-lang%2Fvibe-coding-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasp-lang%2Fvibe-coding-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wasp-lang","download_url":"https://codeload.github.com/wasp-lang/vibe-coding-video/tar.gz/refs/heads/video-starter","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasp-lang%2Fvibe-coding-video/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267866668,"owners_count":24157347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["full-stack","prisma","shadcn-admin","shadcn-ui","vibe-coding","wasp"],"created_at":"2025-04-16T18:00:52.035Z","updated_at":"2026-03-14T22:13:22.570Z","avatar_url":"https://github.com/wasp-lang.png","language":"TypeScript","funding_links":[],"categories":["Code Generation \u0026 Automation"],"sub_categories":["Other IDEs"],"readme":"# Vibe Coding a Full-Stack Budget App: YouTube Series Starter\n\n[![Link to YouTube Video](https://img.youtube.com/vi/WYzEROo7reY/0.jpg)](https://www.youtube.com/watch?v=WYzEROo7reY) \n\nThis repository contains the starter code for the [walkthrough video](https://www.youtube.com/watch?v=WYzEROo7reY) 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).\n\nThe 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. \n\nWe'll be building a collaborative envelope budgeting app inspired by tools like YNAB.\n\n## Tech Stack\n\n*   **Framework:** [Wasp](https://wasp.sh/) - 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.\n*   **UI Components:** [Shadcn-admin](https://github.com/satnaing/shadcn-admin/) - Admin Dashboard UI built with Shadcn and Vite.\n*   **AI Assistance:** [Cursor](https://cursor.sh/) / Gemini 2.5 Pro (or your preferred AI coding tool)\n\n## The Workflow (As Seen in the Video)\n\nThe YouTube video demonstrates a workflow similar to this:\n\n1.  **Understanding the Goal:** Defining the features of the collaborative budgeting app.\n2.  **AI Setup:** Ensuring the AI (Cursor) has access to the project rules (`./cursor/rules/`).\n3.  **PRD (Product Requirements Document):** Collaboratively defining the app's requirements with the AI.\n4.  **Planning:** Breaking down the PRD into actionable, step-by-step implementation tasks suitable for the vertical slice approach.\n5.  **Implementation (Vertical Slices):**\n    *   Pick a small, end-to-end feature slice (e.g., basic manual transaction entry).\n    *   Define the necessary database models (`schema.prisma`).\n    *   Define Wasp operations (queries/actions) in `main.wasp`.\n    *   Implement server logic for operations (`src/server/...`).\n    *   Build the UI components (`src/client/...` or `src/features/...`).\n    *   Connect UI to backend using Wasp operations.\n    *   Test and refine.\n6.  **Documentation:** Asking the AI to document implemented features (e.g., in `ai/docs/`).\n7.  **Iteration:** Repeating the process for subsequent features, building upon the existing foundation, and revising the PLAN on-the-go as needed.\n\n## Getting Started (Following Along)\n\n1.  **Clone the repository:**\n    ```bash\n    git clone https://github.com/wasp-lang/vibe-coding-video.git\n    cd vibe-coding-video\n    ```\n2.  **Install Wasp:** \n    ```bash\n    curl -sSL https://get.wasp.sh/installer.sh | sh\n    ```\n3.  **Database Setup:**\n    * Start a local PostgreSQL instance (make sure to have [docker](https://www.docker.com/) installed and running)\n        ```bash\n        wasp db start\n        ```\n    *   Run the initial database migration:\n        ```bash\n        wasp db migrate-dev\n        ```\n4.  **Start the Development Server:**\n    ```bash\n    wasp start\n    ```\n    This will launch the frontend (React app) and the backend server. Open your browser to `http://localhost:3000`.\n\n## Project Structure \u0026 Key Concepts\n\n### Codebase Structure\n\n*   `main.wasp`: The heart of the Wasp application. Defines routes, pages, operations (queries/actions), auth methods, jobs, APIs, etc. See [Rule 1](.cursor/rules/1-wasp-overview.mdc).\n*   `schema.prisma`: Defines the database models (entities). See [Rule 3](.cursor/rules/3-database-operations.mdc).\n*   `src/`: Contains your custom React (client) and Node.js (server) code.\n    *   `src/features/`: Fullstack code is organized by feature (e.g., `auth`, `transactions`).\n    *   `src/components/`: Reusable UI components, including those based on Shadcn/ui. See [Rule 5](.cursor/rules/5-frontend-styling.mdc).\n*   `.cursor/rules/`: Contains detailed markdown files explaining project conventions, Wasp features, and best practices used in this project. **Crucial for guiding the AI.**\n\n### Project Conventions\nRefer to the `.cursor/rules/` directory for in-depth explanations of:\n*   Wasp Overview \u0026 Core Concepts ([Rule 1](.cursor/rules/1-wasp-overview.mdc))\n*   Project Conventions ([Rule 2](.cursor/rules/2-project-conventions.mdc))\n*   Database, Entities \u0026 Operations ([Rule 3](.cursor/rules/3-database-operations.mdc))\n*   Authentication ([Rule 4](.cursor/rules/4-authentication.mdc))\n*   Frontend \u0026 Styling ([Rule 5](.cursor/rules/5-frontend-styling.mdc))\n*   Advanced Features \u0026 Troubleshooting ([Rule 6](.cursor/rules/6-advanced-troubleshooting.mdc))\n*   Possible Solutions Thinking Command ([Rule 7](.cursor/rules/7-possible-solutions-thinking.mdc)) **pass this in manually with @ in the cursor chat**\n*   Deployment guidelines ([Rule 8](.cursor/rules/8-deployment.mdc))\n\n### Example Prompts\nExample 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwasp-lang%2Fvibe-coding-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwasp-lang%2Fvibe-coding-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwasp-lang%2Fvibe-coding-video/lists"}