⬅️ Vibestack Overview

Day 1: Create

Turn your idea into a working prototype with core functionality and key components.

Before you start: Do your planning and requirements work first. VibeReference has everything you need: Product Requirements, Marketing Story, and Landing Page Design.

Introduction

Welcome to Day 1 of the Vibestack workflow! Today you'll build your initial app prototype.

By the end of today, you'll have a working initial version of your application deployed online.

This process typically takes 4-6 hours. You'll need access to an AI assistant like Claude.ai, and accounts for the recommended tools. No coding experience is required—the AI will help you navigate technical challenges.

Building Your Initial App (4-6 hours)

1.4 - Backend Setup (Convex + Clerk)

Goal: Package inputs for Chef, generate Convex schema/queries/mutations, wire Clerk + Convex, add diagnostics, and prep for v0 handoff.

Process

1. Build backend-package/ from your PRD and feature list
2. Use Chef to generate convex/schema.ts, queries, mutations
3. Wire Clerk + Convex providers and routes
4. Create /convex diagnostics page
5. If using v0, copy Convex files and _generated into v0

1.5 - Working Prototype

Goal: Expand your landing page into a working prototype with core functionality using Convex queries/mutations generated by Chef.

Process

1. Review your existing progress from sections 1.3 and 1.4
2. Follow each subsection in working-prototype:
   • 1.5.1: Review Existing Progress
   • 1.5.2: Add Convex files and _generated to project (or v0)
   • 1.5.3: App Implementation Planning
   • 1.5.4: Enhance the Homepage
   • 1.5.5: Navigation Structure
   • 1.5.6: Convex Connection
   • 1.5.7-1.5.10: Implement core features and prepare for deployment
3. By day's end, you'll have a functional prototype that uses your database schema and builds upon your landing page!

Day 1 Completion Checklist

Before moving on to Day 2, ensure you have:

• Backend ready with Convex + Clerk:

  • Convex schema/queries/mutations generated by Chef
  • Clerk wired (middleware + provider) and basic auth flows
  • /convex diagnostics page runs green
  • Env vars set: NEXT_PUBLIC_CONVEX_URL, CONVEX_DEPLOYMENT, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, AI_GATEWAY_API_KEY (and CLERK_PLAN_ID if billing)

• Implemented working prototype with:

  • Basic app functionality deployed online
  • Convex data connected and functioning
  • Core user flows working as expected
  • Navigation structure completed
  • URL where you can access your working application

What's Next: On Day 2, you'll gather feedback on your initial app and begin refining both the user experience and functionality based on that feedback.