How to Use Cursor To Build a WebApp For Beginners Part 1 (v0, Cursor, Augment, v0, Vercel)

Show Notes

This video walks through turning a Cursor v0ero mockup into a real, internet-visible web app—from planning and scaffolding to the first build steps. It covers the end-to-end flow and sets up the foundation for the parts to come.

Plan the site and information architecture

• Breadboarding / information architecture (IIA): map out pages and the content on each page.
• Define routes and page affordances. Example elements:
  • Social links (link tree)
  • Project links (external)
  • Footer with additional links
  • Blog with articles (blog slug routes)
  • Bio section with copy
  • Activity/overview components (e.g., a view counter)
• Visualize how navigation and content will flow between sections (e.g., blog → articles, footer → internal pages).

From fake to real: exporting from v0ero

• Disassociate from Vzero and Vercel to avoid automatic syncing and “batteries included” behavior.
• Use v0ero to generate screenshots, copy, and a stubbed design quickly (published after about 15 minutes of fiddling).
• Export steps:
  • Download the code
  • Create a new repository and push the code there (disable automatic syncing)
  • Open the code in your IDE and start wiring it up

Scaffolding and architectural choices

• Compare a basic Next.js app vs a monorepo layout:
  • Basic app (single app) vs a multi-app monorepo with API, docs, dashboards, etc.
  • Path changes and imports: adjust tsconfig paths and root aliases to fit your chosen structure.
• Start with a reference codebase (Midday-like architecture) and adapt it to your project.
• Decide on a preferred folder structure (e.g., a dedicated source folder for app code).

Tech stack decisions

• Core stack: Next.js, Tailwind 3, TypeScript
• Data layer and interactivity: TRPC (preferred over server actions for this workflow)
• Data fetching: React Query
• No traditional DB for blog articles (favor file-based or lightweight storage)
• External data sources to pull in:
  • YouTube API (channel data)
  • Strava API (weekly mileage, health stats)
  • GitHub API (stargazer-like metadata)
• Visualization and planning tools:
  • TL Draw or Excalidraw for whiteboard-like diagrams
• Code quality and tooling preferences:
  • Biome for linting/formatting
  • PNPM as the package manager
  • Turbo (Turbo Pack) for fast development workflows

Setup, tooling, and environment hygiene

• Initialize a clean repo and install dependencies:
  • pnpm install
  • pnpm biome to set up formatting and linting defaults
• TypeScript considerations:
  • Update TS version as needed for the project
  • Adjust tsconfig paths when moving from v0ero to your own structure
• Version control hygiene:
  • git init, git add ., git commit
  • Keep a clean node_modules state (pnpm clean) to avoid dependency drift
• Editor and workspace hygiene:
  • Add VS Code workspace settings for biome and the workspace TS version
  • Use project-specific extensions and disable irrelevant ones

Cursor + Augment workflow and project organization

• Use Cursor to manage UI scaffolding and iteration; pair it with Augment for context-driven AI guidance.
• Folder structure for task management:
  • backlog, doing, done
  • Within done: break out by sprint for bite-sized work items
  • References folder for knowledge assets from other projects
  • A dedicated LLMs folder for local prompts and context
• Benefits:
  • Clear task progression and handoff points
  • Potential syncing with GitHub for team collaboration
  • Rich context history to help AI assistants stay aligned with project goals

What’s coming in Part 2

• Scaffold out the AAI (AI-assisted) folder structure
• Implement the view counter, Strava data integration, YouTube data, and GitHub metadata
• Bring in a real data flow rather than fake placeholders
• More on integrating Cursor + Augment with the broader UI and data sources

Actionable takeaways

• Start with a concrete information architecture before touching code: outline routes, pages, and what each page contains.
• Export from v0ero and move the code into a true repo you control; avoid relying on auto-sync.
• Use a reference architecture (like Midday) to bootstrap your scaffolding and adapt to your needs.
• Prefer TRPC over server actions for building robust, scalable interactions early.
• Establish a lightweight task system (backlog → doing → done) and consider sprint-based organization for clarity and scalability.
• Set up linting/formatting (Bi ome) and project-specific VS Code settings to reduce friction and token waste.

Links

• Cursor and Augment (AI-assisted development workflow)
• v0 (the initial mockup/source)
• tRPC and a comparative article by Ravi Coding
• Midday project (architecture reference)
• tldraw / Excalidraw (visual planning tools)
• YouTube Data API, Strava API, GitHub API (data sources)
• PNPM, Biome, Tailwind CSS (tooling and styling)
• Turbo as a reference for fast builds

If you want more depth on any specific part (e.g., setting up TRPC with Next.js, or wiring the YouTube/Strava APIs), I can expand these notes into a step-by-step guide.