VibeWeek
Home/Day 1: Create/Day 1: Create

Day 1: Create

⬅️ Day 1 Overview

1.5 Working Prototype

Goal: Expand your landing page hosted at *.vercel.app into a working prototype with core functionality.

Process: Continue your work from sections 1.3 (Landing Page) and 1.4 (Backend Setup) to build a complete application using v0.app with prompts generated by Claude.ai.

Timeframe: 2-4 hours

Table of Contents

1.5.1: Review Existing Progress

Before continuing, ensure you've completed:

  1. Section 1.1: Created a comprehensive product-requirements.md document
  2. Section 1.2: Developed a compelling marketing-story.md and landing-page.md
  3. Section 1.3: Created and deployed your landing page
  4. Section 1.4: Generated Convex schema/queries/mutations with Chef and wired Clerk + Convex

This section will build upon that foundation to create a more functional prototype.

1.5.2: Add Convex Outputs to Project

If using v0, copy the following from your local project into v0 (matching paths):

  • convex/_generated/*
  • convex/schema.ts
  • convex/queries/*
  • convex/mutations/* Then set these in v0 Project Settings:
  • NEXT_PUBLIC_CONVEX_URL
  • CONVEX_DEPLOYMENT
  • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  • CLERK_SECRET_KEY
  • AI_GATEWAY_API_KEY
  • Optional: CLERK_PLAN_ID

Your product-requirements.md, marketing-story.md, and landing-page.md files should already be in place from sections 1.1-1.3.

1.5.3: Task-Based Implementation Strategy

This section explains how you'll build your prototype using a powerful AI-assisted workflow with Claude.ai and v0.app:

  1. Break down your application into small, focused tasks
  2. Use Claude.ai to generate specialized prompts for each task
  3. Feed these prompts to v0.app to implement the code
  4. Test and integrate each completed task

The workflow process:

  1. Task selection: Pick the next task from your implementation plan
  2. Prompt generation: Use Claude.ai to create a detailed prompt for that specific task
  3. Implementation: In your v0.app project, start a new chat and paste the Claude-generated prompt
  4. Iteration: Refine the implementation through follow-up prompts until complete
  5. Testing: Verify the feature works as expected
  6. Integration: Deploy the updated code and fork your project to preserve the working state
  7. Continue: Move to the next task in your plan

This approach keeps your codebase functional throughout development while systematically building out your application piece by piece.

UI Approach: Focus on creating a text-based, minimal UI with simple components. Avoid complex UI elements, animations, or intricate layouts that may distract from core functionality. Prioritize clean, accessible interfaces that communicate clearly through text rather than elaborate visual elements.

1.5.4: Generate Implementation Plan

Start by generating a comprehensive development plan using Claude.ai:

You are an expert senior software architect given a software vision and product requirements. Your task is to create a comprehensive, structured development plan for implementation by AI agents with the following characteristics:

1. Clear task hierarchy with main tasks and numbered subtasks (e.g., 1.1, 1.2)
2. Explicit dependencies between tasks using ID references 
3. Complexity ratings (1-10 scale) with recommendations for complex tasks
4. Priority levels (high, medium, low) to guide implementation order
5. Test strategies for verifying task completion
6. Detailed descriptions that provide context for each task
7. Logical grouping of related tasks into functional areas

The plan should enable:
- Clear visualization of parent-child relationships and task hierarchy
- Easy tracking of completion progress
- Quick identification of tasks ready to work on (no pending dependencies)
- Visual indicators for completion status
- Logical organization that maintains proper task ordering

The implementation process should follow a build-test-iterate cycle, where developers:
1. Select the next available task (no pending dependencies)
2. Implement the specific, focused functionality
3. Test against the provided test strategy
4. Update the codebase with the new feature
5. Mark the task as complete and identify the next task

Each task should be small enough to implement in one focused session, creating a tight development loop that builds the application incrementally while maintaining a functional codebase throughout the process.

The development plan should follow this markdown structure:

# PROJECT_NAME Development Plan

## SECTION_NUMBER. SECTION_NAME

### SECTION_NUMBER.TASK_NUMBER TASK_NAME (Priority: HIGH/MEDIUM/LOW, Complexity: RATING/10)
**Description:** Brief description of the task and its objectives
**Test Strategy:** How to verify the task is complete and working correctly
**Dependencies:** List of dependent task numbers, e.g., 1.1, 2.3
**Recommendations:** Optional - Any special considerations or approaches for complex tasks

/* Repeat task structure for all tasks in the section */

/* Repeat section structure for all major sections */

## Implementation Order

/* Ordered list of implementation sequence with dependencies visualized */

This plan creates a functional product with incremental value at each stage, with complex tasks broken into manageable pieces with clear dependencies and test criteria.

<product-requirements>
{{product-requirements.md}}]
</product-requirements>

<convex-schema>
{{convex/schema.ts}}
</convex-schema>

<convex-queries>
{{convex/queries/*}}
</convex-queries>

<convex-mutations>
{{convex/mutations/*}}
</convex-mutations>

<convex-generated>
{{convex/_generated/*}}
</convex-generated>

Create an implementation plan for the MVP.

1.5.5: Generate Implementation Prompts

After receiving the implementation plan, ask Claude.ai to generate prompts for each task:

Now please add a prompt or series of prompts for v0.app to implement these tasks from our existing codebase. I want a document organized by 1 task per chat, with multiple prompts and guidance to deliver the task and let us move on to the next.

Assume I already have a one-page landing page and Clerk authentication wired (middleware/provider) with login/logout/email-verification/verification-success, Convex connected, and a `/convex` diagnostics page.

Specifically emphasize that all UI components should be text-based and minimal, avoiding complicated UI elements. Prioritize functional clarity over visual complexity, using simple layouts and standard form elements wherever possible.

This will generate a comprehensive document with prompts for each task in your implementation plan. Save this document for reference throughout your prototype development.

1.5.6: Implementing Your First Tasks

Start with the foundational tasks identified in your implementation plan:

  1. Identify Starting Point: Look for tasks with no dependencies in your implementation plan
  2. Prioritize Core Structure: Begin with tasks that establish the basic application framework
  3. Follow the Implementation Order: Use the suggested sequence from your plan

For each task:

  1. Open a new chat in your v0.app project (not a new project)
  2. Copy the Claude-generated prompt for that specific task
  3. Work through the conversation with v0 until the feature is complete
  4. Test the implementation against the criteria in your plan

Remember that your current codebase already includes:

  • A landing page from section 1.3
  • Authentication system with Clerk
  • Email verification flow
  • Convex integration and a /convex diagnostics page

Focus on extending this foundation rather than rebuilding existing functionality.

1.5.7: Iterative Development Process

As you implement each task:

  1. One Feature at a Time: Complete one task before moving to the next
  2. Regular Deployments: Deploy after each significant feature implementation
  3. Version Control: Fork your project after major milestones to preserve working states
  4. Iterative Testing: Test each component as it's built

This approach lets you:

  • Maintain a working application throughout development
  • See immediate results from each task
  • Make adjustments based on how features work together
  • Build confidence through regular successful deployments

When an implementation doesn't work as expected:

  1. Review the error messages or unexpected behavior
  2. Ask v0.app to help troubleshoot specific issues
  3. Consider breaking complex tasks into smaller sub-tasks
  4. Revisit your implementation plan if dependencies need adjustment

1.5.8: Connecting Components and Services

As your application grows, focus on the connections between components:

  1. Convex Integration:

    • Ensure ConvexClientProvider wraps the app
    • Import and use useQuery/useMutation hooks
    • Keep queries/mutations small and composable

  2. Authentication Flow:

    • Connect user accounts to your application features
    • Implement protected routes
    • Create role-based access if needed

  3. State Management:

    • Choose appropriate state management based on complexity
    • Start with React Context for simpler applications
    • Consider more robust solutions like Zustand as needed

  4. UI Philosophy:

    • Maintain text-centric interfaces with minimal styling
    • Use simple HTML elements rather than complex components
    • Prioritize functionality and content over visual flourishes
    • Rely on semantic HTML and minimal CSS for structure

Ask v0.app to help you establish these connections with prompts specifically focused on integration points and maintaining a text-based, minimal UI approach.

1.5.9: Testing Your Prototype

As you near completion, conduct thorough testing of your prototype:

  1. User Flows: Test complete user journeys from start to finish
  2. Edge Cases: Try unexpected inputs and scenarios
  3. Responsive Design: Check functionality on different screen sizes while ensuring text remains readable
  4. Database Operations: Verify data is properly stored and retrieved
  5. Authentication: Test all authentication pathways and protected resources
  6. Text-based UI: Verify that information is clearly communicated through text without relying on complex visual elements

Create a structured testing plan based on your use cases and user personas. Focus on the features that deliver your core value proposition first, ensuring the text-based UI effectively communicates your application's purpose and functionality.

1.5.10: Deployment and Next Steps

Once your core functionality is implemented:

  1. Final Deployment:

    • Deploy the complete prototype to your Vercel domain
    • Verify all features work in the production environment
    • Check that environment variables are properly configured

  2. Documentation:

    • Document the implemented features
    • Note any limitations or known issues
    • Create a list of planned improvements for Day 2

  3. Gather Initial Feedback:

    • Share your prototype with a small group of trusted users
    • Focus on feedback about core functionality
    • Document the most common issues or suggestions

  4. Prepare for Day 2:

    • Organize the feedback you've received
    • Identify priority improvements
    • Plan your approach for the Refine phase

Your Day 1 prototype doesn't need to be perfect, but it should successfully demonstrate your core value proposition and provide a solid foundation for refinement in Day 2.

Next Steps

Now that you've completed your working prototype, proceed to Day 2 where you'll gather feedback and refine your application based on user insights.