Getting Started

Choose Your Path

Welcome to The Architech! We offer two onboarding paths based on your goals:

🚀 Path 1: Quick Demo (60 Seconds)

Perfect for: First-time users, learning the patterns, trying it out
Result: A simple Next.js app that demonstrates our architecture
Setup: Zero configuration required

Jump to Quick Demo →

💪 Path 2: Production SaaS (10 Minutes)

Perfect for: Building a real product, getting all features
Result: Full-featured SaaS with auth, database, payments
Setup: Requires database connection, API keys

Jump to SaaS Starter →

Quick Demo Path

Your First Project in 60 Seconds

Zero external dependencies. Zero configuration. Just see the architecture in action.

Prerequisites

• Node.js 18.x or later
• npm (or pnpm, yarn)
• A code editor

Step 1: Install The Architech CLI

Current Installation (until npm package is published):

# Clone the repository
git clone https://github.com/the-architech-xyz/cli.git
cd cli
 
# Install dependencies and build
npm install
npm run build
 
# Link globally
npm link

After Installation (npm package coming soon):

npm install -g @architech/cli

Step 2: Generate the Hello World Project

architech new my-hello-world --genome hello-world

Alternative ways to choose a genome:

# Interactive picker (choose from list)
architech new my-hello-world
 
# List all genomes first
architech list-genomes
architech new my-hello-world --genome hello-world
 
# Use file path (for custom genomes)
architech new ./my-custom.genome.ts

Step 3: Run It

cd my-hello-world
npm install
npm run dev

Open http://localhost:3000 (opens in a new tab) — it just works!

What Just Happened?

The CLI generated:

• ✅ Next.js 14 with TypeScript and Tailwind CSS
• ✅ Shadcn/ui components (button, card, input, label)
• ✅ A welcome page showing the architecture
• ✅ ESLint and Prettier configured
• ✅ Zero external dependencies (no database, no API keys needed)

Explore the code:

• Open src/app/page.tsx — See the clean Next.js structure
• Check src/components/ui/ — Shadcn/ui components you own
• Look at package.json — All dependencies explicit and up-to-date

What This Demonstrates

This minimal app shows you:

1. The Architech's generation quality — Clean, readable, production-ready code
2. The module system — Framework + UI + Quality tools working together
3. Code ownership — Every file is yours to modify

Next: When you're ready for a real project → Jump to Production SaaS Path

Production App Path

Build a Production-Ready App in 5 Minutes

Get a database-ready foundation that you can extend with any features you need.

We recommend starting with the Standard App - it's the perfect balance of features and simplicity.

Prerequisites Checklist

Before starting, make sure you have:

Required:

• ✅ Node.js 18.x or later
• ✅ npm (or pnpm, yarn)

For Full Functionality (can skip initially):

• ⚠️ PostgreSQL Database — We recommend Neon (opens in a new tab) (free tier available)
  • You'll need a connection string: postgresql://user:password@host:5432/database
• ⚠️ GitHub OAuth App (for authentication) — Create one here (opens in a new tab)
  • You'll need: Client ID and Client Secret
• ⚠️ Stripe Account (for payments) — Sign up here (opens in a new tab)
  • You'll need: API Secret Key and Webhook Secret

Don't have these yet? The generation will work, but you'll need to configure them before the app runs. We'll show you exactly what to add.

Step 1: Install The Architech CLI

Current Installation (until npm package is published):

# Clone the repository
git clone https://github.com/the-architech-xyz/cli.git
cd cli
 
# Install dependencies and build
npm install
npm run build
 
# Link globally
npm link

After Installation (npm package coming soon):

npm install -g @architech/cli

Step 2: Generate Your App

Recommended: Start with Standard App ⭐

architech new my-app --genome standard-app

The CLI will generate:

1. ✅ Complete Next.js application with TypeScript
2. ✅ Golden Core (Zustand, Vitest, ESLint, Prettier, Zod)
3. ✅ Drizzle ORM with PostgreSQL
4. ✅ TanStack Query for data fetching
5. ✅ Infrastructure connectors (SSR hydration, forms)
6. ✅ Beautiful UI with shadcn/ui
7. ✅ Testing ready (Vitest)
8. ✅ Git initialized and deployment ready

All in production-ready code that you own.

Want more? You can easily add features later:

# Add authentication
architech add feature auth --provider better-auth
 
# Add payments
architech add feature payments --provider stripe
 
# Add teams
architech add feature teams-management

Step 3: Configure Environment Variables

The generation creates a .env.example file. Copy it and add your database:

cd my-app
cp .env.example .env

Edit .env and add your database URL:

# Database (Required)
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

Don't have a database? Get a free PostgreSQL database from Neon (opens in a new tab) in 30 seconds.

Step 4: Set Up the Database

Run the database migrations:

npm run db:push

This creates all necessary tables in your PostgreSQL database.

Step 5: Launch Your SaaS

npm run dev

Open http://localhost:3000 (opens in a new tab) — Your SaaS is live!

What You Now Have

• 🔐 Complete authentication — Sign up, sign in, password reset, OAuth
• 💳 Payment processing — Stripe checkout, subscriptions, webhooks
• 🗄️ Type-safe database — Drizzle ORM with PostgreSQL
• 👥 Team management — Multi-tenant architecture ready
• 📧 Email system — Transactional emails configured
• 🎨 Beautiful UI — shadcn/ui components, responsive design
• ✅ Testing suite — Unit tests (Vitest) + E2E tests (Playwright)
• 📊 Monitoring — Sentry integration for error tracking

All configured and working together. All code you own.

Verify It's Working

Test Authentication:

1. Click "Sign Up" — create an account with email/password
2. Check your terminal — see the auth flow working
3. Open Drizzle Studio: npm run db:studio — see your user in the database

Test Payments (if Stripe is configured):

1. Go to /pricing — see the subscription plans
2. Click "Subscribe" — Stripe checkout opens
3. Use test card: 4242 4242 4242 4242

Explore the Code:

• src/features/auth/ — Complete authentication system
• src/features/payments/ — Full payment integration
• src/lib/db/schema/ — Your database schemas
• src/hooks/ — TanStack Query hooks for all data

Every file is readable. Every pattern is clear. This is code you own.

What's Next?

Now that you have a running application, you can:

Add New Features

Want to add a teams management feature?

architech add feature teams-management --ui shadcn

Need email capabilities?

architech add feature email --provider resend

Understand the Architecture

Dive deep into our architectural doctrine to understand the Opinionated Core, Agnostic Edges philosophy:

👉 Read the Architecture Guide

Explore Module Types

Learn how The Architech's three-tier module system works:

• Architecture → — Understanding the module system
• Modules Catalog → — Browse all available modules
• Cookbook → — Practical recipes and patterns

Join the Community

Build your own adapters, connectors, and features:

👉 Contributing Guide

Available Genomes

All official genomes with their aliases:

Use any genome with:

# Shorthand (recommended)
architech new my-project --genome <genome-name>
 
# Interactive picker
architech new my-project
 
# List all with details
architech list-genomes

Welcome to The Architech. You just got your time back.