> ## Documentation Index
> Fetch the complete documentation index at: https://blueprint.codeandcreed.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Tech Stack

> Learn the tech stack we use to build full-stack products

<Note>
  Before diving in, make sure you have completed the [Software Engineer](/roadmaps/software-engineer) roadmap or have equivalent experience (HTML, CSS, JS/TS, React at a bare minimum)
</Note>

This guide will prepare you with the tech stack needed to build products using our opinionated codebases for rapidly building and launching full-stack products.

## Choose Your Stack

We offer two battle-tested stacks depending on your preferences:

<Note>
  Estimated time to complete: 2-3 weeks

  Or just a few hours if you're semi-familiar with some of the technologies and just want to rapidly build something. (Looking at you, indie hackers! ;)
</Note>

<Steps>
  <Step title="(Recommended) Option 1: Kaizen (React Router v7 + Convex)">
    [Kaizen](https://kaizen.codeandcreed.tech/) is our modern React Router v7 boilerplate designed for speed and correctness:

    **Tech Stack:**

    * React Router v7 for full-stack React development
    * Convex for real-time database and serverless functions
    * Clerk for authentication as a service
    * Polar.sh for subscription billing and payments
    * Resend for email as a service
    * OpenAI for AI chat capabilities (optional)

    **Best for:** Developers who want maximum type safety, real-time features, and AI-friendly code generation with minimal backend complexity.
  </Step>

  <Step title="Option 2: Titan (Next.js + Supabase)">
    [Titan](https://titan.codeandcreed.tech/) is our Next.js-based stack for rapid product development:

    **Tech Stack:**

    * Next.js 15 for full-stack development
    * Drizzle for type-safe database access
    * Supabase for authentication and realtime features
    * Tanstack Query for data fetching
    * Webhooks for third-party integrations

    **Best for:** Developers who prefer Next.js, want direct SQL control, or need specific Supabase features.
  </Step>

  <Step title="Getting Up to Speed Quickly">
    Choose your learning path based on the stack you selected:

    ### 📚 Kaizen Stack Learning Path

    <Check>[Kaizen Stack Tutorial Playlist](https://youtube.com/playlist?list=PLUxlPfFPDnAEI0roJMdV49n29gFFzmEQ5\&feature=shared) - Complete tutorial series for the Kaizen stack</Check>

    **Core Technologies:**

    * React Router v7 for full-stack React development
    * Convex for real-time database and serverless functions
    * Clerk for authentication as a service
    * Polar.sh for subscription billing and payments

    After completing this playlist, you'll be ready to start building with [Kaizen](/building-with-kaizen/kaizen).

    ### 🔧 Titan Stack Learning Path

    <Check>[NextJS Crash Course](https://youtu.be/w1vKPuvM9kY?feature=shared) - Learn NextJS fundamentals</Check>
    <Check>[PostgreSQL Course](https://youtu.be/zw4s3Ey8ayo?feature=shared) - Database fundamentals</Check>
    <Check>[Tanstack Query Crash Course](https://youtu.be/8K1N3fE-cDs?feature=shared) - Data fetching library</Check>
    <Check>[Drizzle Crash Course](https://youtu.be/7-NZ0MlPpJA?feature=shared) - Type-safe ORM for PostgreSQL</Check>
    <Check>[Supabase Course](https://youtu.be/dU7GwCOgvNY?feature=shared) - Database as a Service</Check>

    <Note>
      For Supabase, focus on authentication, real-time subscriptions, and database sections most relevant to your project.
    </Note>

    ### 🌐 Universal Concepts (Both Stacks)

    <Check>[How Webhooks Work](https://youtu.be/oQaJn6RdA3g?si=rAXWs77pmpW4r9bt) - Essential for third-party integrations</Check>

    After completing your chosen learning path, you'll be able to build production-ready applications with authentication, database, and payment processing.
  </Step>

  ### Extra helpful content:

  * [All 29 Mistakes Beginners Make in NextJS](https://youtu.be/5QP0mvrJkiY?si=9bmVuii4hevgx6cG)
  * [Database Migrations](https://youtu.be/dJDBP7pPA-o?feature=shared)
</Steps>

## Which Stack Should You Choose?

**Choose Kaizen if you:**

* Want the fastest development experience
* Prefer type-safety across the entire stack
* Like real-time features out of the box
* Want AI to help generate backend code
* Prefer managed services over database management

**Choose Titan if you:**

* Already know Next.js well
* Want direct control over your database
* Need specific PostgreSQL features
* Prefer SQL over TypeScript functions
* Want more granular control over your backend

## Design & Development Tools

### Visual Development

* [Onlook](https://onlook.com/) - "Cursor for Designers" - Visual React editor:
  * Visually edit React websites with real-time code changes
  * AI-powered website building and design
  * Figma-like interface for React apps styled with Tailwind
  * Local development environment that writes code back to your files
  * Open source with full code ownership

## Next Steps

After completing this tech stack guide, you'll be ready to start building entire products.

**If you chose Kaizen:** Head to [Building with Kaizen](/building-with-kaizen/kaizen) to get started.

**If you chose Titan:** Head to [Building with Titan](/building-with-titan/titan) to get started.

If you want to build your own startup, continue to the [Philosophy](/company-building/philosophy) section to understand our approach to company building and then register a company.