feat(web): design overhaul

2025-10-12 23:52:15 +00:00 · 2025-07-20 19:37:41 +05:30
parent 81975cfef4
commit 87d4362c6d
31 changed files with 1844 additions and 733 deletions
--- a/apps/web/content/docs/cli-commands.mdx
+++ b/apps/web/content/docs/cli-commands.mdx
@@ -0,0 +1,462 @@
+---
+title: CLI Commands
+description: Complete reference for all Better-T-Stack CLI commands and options
+---
+
+## Commands Overview
+
+| Command | Description |
+|---------|-------------|
+| `init` (default) | Create a new Better-T-Stack project |
+| `add` | Add addons or deployment configurations to existing projects |
+| `sponsors` | Display project sponsors |
+| `docs` | Open documentation in browser |
+| `builder` | Open web-based stack builder |
+
+---
+
+## `init` - Create Project (Default)
+
+The primary command for creating new Better-T-Stack projects.
+
+### Basic Usage
+
+```bash
+# Interactive setup
+npx create-better-t-stack@latest
+
+# With project name
+npx create-better-t-stack@latest my-project
+
+# With specific directory
+npx create-better-t-stack@latest ./path/to/project
+
+# Use current directory
+npx create-better-t-stack@latest .
+```
+
+### Flags Reference
+
+#### General Options
+
+| Flag | Type | Default | Description |
+|------|------|---------|-------------|
+| `--yes, -y` | boolean | `false` | Skip prompts, use defaults |
+| `--help, -h` | boolean | - | Show help information |
+| `--version, -V` | boolean | - | Show CLI version |
+
+#### Frontend Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--frontend` | Multiple values | `tanstack-router` | Frontend frameworks to include |
+
+**Available Frontend Values:**
+- `tanstack-router` - React with TanStack Router
+- `react-router` - React with React Router
+- `tanstack-start` - React with TanStack Start (SSR)
+- `next` - Next.js framework
+- `nuxt` - Vue.js with Nuxt
+- `svelte` - SvelteKit
+- `solid` - SolidJS
+- `native-nativewind` - React Native with NativeWind
+- `native-unistyles` - React Native with Unistyles
+- `none` - No frontend
+
+**Examples:**
+```bash
+# Single web frontend
+--frontend tanstack-router
+
+# Web + Mobile
+--frontend tanstack-router native-nativewind
+
+# Multiple frontends
+--frontend next solid
+
+# No frontend (API-only)
+--frontend none
+```
+
+#### Backend Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--backend` | Single value | `hono` | Backend framework |
+
+**Available Backend Values:**
+- `hono` - Hono web framework
+- `express` - Express.js
+- `fastify` - Fastify framework
+- `elysia` - Elysia framework
+- `next` - Next.js API routes
+- `convex` - Convex backend-as-a-service
+- `none` - No backend
+
+**Examples:**
+```bash
+--backend hono
+--backend convex
+--backend none
+```
+
+#### Runtime Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--runtime` | Single value | `bun` | Runtime environment |
+
+**Available Runtime Values:**
+- `bun` - Bun runtime
+- `node` - Node.js runtime
+- `workers` - Cloudflare Workers (Hono only)
+- `none` - No runtime (Convex/none backend)
+
+**Examples:**
+```bash
+--runtime bun
+--runtime workers  # Only with --backend hono
+```
+
+#### Database Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--database` | Single value | `sqlite` | Database type |
+
+**Available Database Values:**
+- `sqlite` - SQLite database
+- `postgres` - PostgreSQL
+- `mysql` - MySQL
+- `mongodb` - MongoDB
+- `none` - No database
+
+**Examples:**
+```bash
+--database postgres
+--database none
+```
+
+#### ORM Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--orm` | Single value | `drizzle` | ORM/Database toolkit |
+
+**Available ORM Values:**
+- `drizzle` - Drizzle ORM (TypeScript-first)
+- `prisma` - Prisma ORM (feature-rich)
+- `mongoose` - Mongoose (MongoDB only)
+- `none` - No ORM
+
+**Examples:**
+```bash
+--orm drizzle
+--orm prisma
+--orm none
+```
+
+#### API Layer Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--api` | Single value | `trpc` | API layer type |
+
+**Available API Values:**
+- `trpc` - tRPC (end-to-end type safety)
+- `orpc` - oRPC (OpenAPI compatible)
+- `none` - No API layer
+
+**Examples:**
+```bash
+--api trpc
+--api orpc
+--api none
+```
+
+#### Authentication Options
+
+| Flag | Type | Default | Description |
+|------|------|---------|-------------|
+| `--auth` | boolean | `true` | Enable authentication |
+| `--no-auth` | boolean | - | Disable authentication |
+
+**Examples:**
+```bash
+--auth        # Enable auth
+--no-auth     # Disable auth
+```
+
+#### Addons Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--addons` | Multiple values | `turborepo` | Additional features |
+
+**Available Addon Values:**
+- `turborepo` - Turborepo build system
+- `pwa` - Progressive Web App support
+- `tauri` - Desktop app with Tauri
+- `biome` - Biome linter/formatter
+- `husky` - Git hooks with Husky
+- `starlight` - Documentation site
+- `none` - No addons
+
+**Examples:**
+```bash
+--addons turborepo pwa
+--addons biome husky
+--addons none
+```
+
+#### Examples Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--examples` | Multiple values | `[]` | Example applications |
+
+**Available Example Values:**
+- `todo` - Todo CRUD application
+- `ai` - AI chat interface
+- `none` - No examples
+
+**Examples:**
+```bash
+--examples todo
+--examples todo ai
+--examples none
+```
+
+#### Database Setup Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--db-setup` | Single value | `none` | Database hosting setup |
+
+**Available Database Setup Values:**
+- `turso` - Turso SQLite hosting
+- `neon` - Neon PostgreSQL
+- `supabase` - Supabase PostgreSQL
+- `prisma-postgres` - Prisma PostgreSQL
+- `mongodb-atlas` - MongoDB Atlas
+- `d1` - Cloudflare D1 (Workers only)
+- `docker` - Local Docker setup
+- `none` - Manual setup
+
+**Examples:**
+```bash
+--db-setup neon
+--db-setup docker
+--db-setup none
+```
+
+#### Deployment Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `--web-deploy` | Single value | `none` | Web deployment setup |
+
+**Available Deployment Values:**
+- `workers` - Cloudflare Workers
+- `none` - No deployment setup
+
+**Examples:**
+```bash
+--web-deploy workers
+--web-deploy none
+```
+
+#### Project Management Options
+
+| Flag | Type | Default | Description |
+|------|------|---------|-------------|
+| `--git` | boolean | `true` | Initialize git repository |
+| `--no-git` | boolean | - | Skip git initialization |
+| `--install` | boolean | `true` | Install dependencies |
+| `--no-install` | boolean | - | Skip dependency installation |
+| `--package-manager` | string | auto-detect | Package manager to use |
+
+**Package Manager Values:**
+- `npm` - Use npm
+- `pnpm` - Use pnpm
+- `bun` - Use bun
+
+**Examples:**
+```bash
+--git --install --package-manager pnpm
+--no-git --no-install
+```
+
+---
+
+## `add` - Add to Existing Project
+
+Add addons or deployment configurations to existing Better-T-Stack projects.
+
+### Usage
+
+```bash
+# Interactive addon selection
+npx create-better-t-stack@latest add
+
+# Add specific addons
+npx create-better-t-stack@latest add --addons pwa tauri
+
+# Add deployment
+npx create-better-t-stack@latest add --web-deploy workers
+
+# Add both
+npx create-better-t-stack@latest add --addons biome --web-deploy workers
+```
+
+### Flags
+
+| Flag | Values | Description |
+|------|--------|-------------|
+| `--addons` | Multiple values | Addons to add (same as init) |
+| `--web-deploy` | Single value | Deployment to add |
+| `--project-dir` | string | Target project directory (default: current) |
+| `--install` | boolean | Install dependencies after adding |
+| `--no-install` | boolean | Skip dependency installation |
+| `--package-manager` | string | Package manager to use |
+
+### Examples
+
+```bash
+# Add PWA support to current project
+npx create-better-t-stack@latest add --addons pwa
+
+# Add multiple addons with dependency installation
+npx create-better-t-stack@latest add --addons biome husky --install
+
+# Add to specific project directory
+npx create-better-t-stack@latest add --project-dir ./my-project --addons tauri
+```
+
+---
+
+## `sponsors` - View Sponsors
+
+Display Better-T-Stack project sponsors.
+
+### Usage
+
+```bash
+npx create-better-t-stack@latest sponsors
+```
+
+Shows a list of project sponsors with their GitHub profiles and websites.
+
+---
+
+## `docs` - Open Documentation
+
+Open Better-T-Stack documentation in your default browser.
+
+### Usage
+
+```bash
+npx create-better-t-stack@latest docs
+```
+
+Opens: https://better-t-stack.dev/docs
+
+---
+
+## `builder` - Open Stack Builder
+
+Open the web-based interactive stack builder.
+
+### Usage
+
+```bash
+npx create-better-t-stack@latest builder
+```
+
+Opens: https://better-t-stack.dev/new
+
+The web builder provides a visual interface for configuring your stack and generates the corresponding CLI command.
+
+---
+
+## Complete Examples
+
+### Full-Stack Web Application
+
+```bash
+npx create-better-t-stack@latest my-webapp \
+  --frontend tanstack-router \
+  --backend hono \
+  --runtime bun \
+  --database postgres \
+  --orm drizzle \
+  --api trpc \
+  --auth \
+  --db-setup neon \
+  --addons pwa turborepo \
+  --examples todo ai
+```
+
+### Mobile + Web Application
+
+```bash
+npx create-better-t-stack@latest my-mobile-app \
+  --frontend tanstack-router native-nativewind \
+  --backend hono \
+  --database sqlite \
+  --orm drizzle \
+  --auth \
+  --db-setup turso \
+  --addons turborepo
+```
+
+### Cloudflare Workers Project
+
+```bash
+npx create-better-t-stack@latest my-workers-app \
+  --frontend tanstack-router \
+  --backend hono \
+  --runtime workers \
+  --database sqlite \
+  --orm drizzle \
+  --db-setup d1 \
+  --web-deploy workers
+```
+
+### API-Only Project
+
+```bash
+npx create-better-t-stack@latest my-api \
+  --frontend none \
+  --backend fastify \
+  --runtime node \
+  --database postgres \
+  --orm prisma \
+  --api trpc \
+  --db-setup docker
+```
+
+### Quick Defaults
+
+```bash
+# Use all defaults with immediate setup
+npx create-better-t-stack@latest my-project --yes
+
+# Convex full-stack (automatically configures compatible options)
+npx create-better-t-stack@latest my-convex-app --backend convex
+```
+
+---
+
+## Compatibility Notes
+
+Some options have compatibility requirements:
+
+- **Cloudflare Workers**: Only with `--backend hono`, `--orm drizzle`, `--runtime workers`
+- **MongoDB**: Requires `--orm mongoose` or `--orm prisma`
+- **Convex**: Incompatible with custom database/ORM/API options
+- **PWA**: Requires compatible web frontend
+- **Tauri**: Requires compatible web frontend
+- **AI Examples**: Not compatible with `--backend elysia` or `--frontend solid`
+
+The CLI will validate compatibility and show helpful error messages for invalid combinations.
--- a/apps/web/content/docs/faq.mdx
+++ b/apps/web/content/docs/faq.mdx
@@ -0,0 +1,334 @@
+---
+title: Frequently Asked Questions
+description: Common questions and answers about Better-T-Stack CLI
+---
+
+## General Questions
+
+### What is Better-T-Stack?
+
+Better-T-Stack is a modern CLI tool that helps you scaffold end-to-end type-safe TypeScript projects. It provides opinionated, production-ready configurations for full-stack applications with support for multiple frontend frameworks, backend frameworks, databases, and deployment options.
+
+### How is Better-T-Stack different from other scaffolding tools?
+
+- **End-to-End Type Safety**: TypeScript across your entire stack with proper type sharing
+- **Modern Stack Focus**: Latest versions of popular frameworks and tools
+- **Production Ready**: Configurations used in real production applications
+- **Highly Customizable**: Mix and match technologies based on your needs
+- **Monorepo Structure**: Organized project structure with shared packages
+- **Database Integration**: Built-in database setup and ORM configuration
+- **Authentication**: Integrated auth with Better-Auth
+- **Multi-Platform**: Web, mobile, and desktop app support in one project
+
+### Is Better-T-Stack free to use?
+
+Yes, Better-T-Stack is completely free and open-source under the MIT license. You can use it for personal and commercial projects without any restrictions.
+
+### Do I need to know all these technologies to use Better-T-Stack?
+
+No! Better-T-Stack is designed to help you learn modern full-stack development. Each generated project includes:
+- Comprehensive README with setup instructions
+- Example code and patterns
+- TypeScript for better developer experience
+- Best practices and folder structure
+
+---
+
+## Installation & Setup
+
+### Which package manager should I use?
+
+You can use any of the major package managers:
+- **npm**: Most widely supported, comes with Node.js
+- **pnpm**: Faster installs, better disk space efficiency
+- **bun**: All-in-one runtime, extremely fast
+
+For monorepo projects, we recommend **pnpm** for its excellent workspace support.
+
+### Do I need to install the CLI globally?
+
+No, you can use npx to run the latest version without installation:
+
+```bash
+npx create-better-t-stack@latest my-project
+```
+
+This ensures you always use the latest version with the newest features and bug fixes.
+
+### What Node.js version do I need?
+
+Better-T-Stack requires **Node.js 18 or higher**. We recommend using the latest LTS version for the best experience.
+
+### Can I use Better-T-Stack with existing projects?
+
+Better-T-Stack is designed for new projects. For existing projects, you can:
+1. Create a new Better-T-Stack project
+2. Gradually migrate your code
+3. Use the `add` command to add specific features to existing Better-T-Stack projects
+
+---
+
+## Configuration & Stack Choices
+
+### Can I change my stack choices after creating a project?
+
+Some changes are possible:
+- **Easy**: Add addons, examples, or deployment configurations using the `add` command
+- **Medium**: Switch between compatible ORMs or databases (requires manual migration)
+- **Hard**: Change frontend/backend frameworks (requires significant refactoring)
+
+It's best to plan your stack carefully during initial setup.
+
+### What's the difference between tRPC and oRPC?
+
+- **tRPC**: End-to-end type safety with TypeScript inference, great for TypeScript-only projects
+- **oRPC**: OpenAPI-compatible type-safe APIs, better for teams using multiple languages or requiring OpenAPI specs
+
+Both provide excellent type safety, choose based on your team's needs.
+
+### Should I use Drizzle or Prisma?
+
+- **Drizzle**: TypeScript-first, lightweight, great for edge deployments, SQL-like syntax
+- **Prisma**: Feature-rich, mature ecosystem, great tooling, GraphQL-like schema
+
+Choose Drizzle for modern TypeScript projects and Prisma for feature-rich applications.
+
+### What's the recommended stack for beginners?
+
+For beginners, we recommend:
+```bash
+npx create-better-t-stack@latest my-first-project \
+  --frontend tanstack-router \
+  --backend hono \
+  --database sqlite \
+  --orm drizzle \
+  --auth \
+  --addons turborepo biome
+```
+
+This provides a simple but powerful full-stack setup that's easy to understand and deploy.
+
+---
+
+## Compatibility Questions
+
+### Can I use MongoDB with Drizzle?
+
+No, Drizzle doesn't support MongoDB. For MongoDB, use:
+- **Prisma ORM**: Full ORM support for MongoDB
+- **Mongoose**: Traditional MongoDB object modeling
+
+### Why can't I use tRPC with Nuxt/SvelteKit/SolidJS?
+
+tRPC is primarily designed for React ecosystems. For these frameworks, use:
+- **oRPC**: Provides similar type safety with broader framework support
+- **None**: Use the framework's built-in API capabilities
+
+### Can I use Cloudflare Workers with any backend?
+
+Cloudflare Workers runtime only supports:
+- **Backend**: Hono only
+- **Database**: SQLite with Cloudflare D1
+- **ORM**: Drizzle only
+
+This is due to the serverless nature and limitations of the Workers environment.
+
+### Which addons work with which frontends?
+
+| Addon | Compatible Frontends |
+|-------|---------------------|
+| PWA | TanStack Router, React Router, SolidJS, Next.js |
+| Tauri | TanStack Router, React Router, Nuxt, SvelteKit, SolidJS, Next.js |
+| Turborepo | All frontends |
+| Biome | All frontends |
+| Husky | All frontends |
+| Starlight | All frontends |
+
+---
+
+## Database & Hosting
+
+### What database should I choose for production?
+
+**For small to medium applications:**
+- **SQLite + Turso**: Excellent performance, easy scaling
+- **PostgreSQL + Neon**: Serverless PostgreSQL, great for startups
+
+**For large applications:**
+- **PostgreSQL + Supabase**: Full backend-as-a-service
+- **MongoDB + Atlas**: NoSQL flexibility with managed hosting
+
+### Do I need Docker for development?
+
+Docker is optional and only required for:
+- **Database Setup**: If you choose `--db-setup docker`
+- **Local Development**: Some setups like Supabase local development
+
+Many database options (Turso, Neon, MongoDB Atlas) don't require Docker.
+
+### How do I deploy my Better-T-Stack application?
+
+Better-T-Stack projects are configured for easy deployment:
+
+**Frontend:**
+- **Vercel**: Zero-config deployment for Next.js, React apps
+- **Netlify**: Static site deployment
+- **Cloudflare Workers**: Edge deployment with `--web-deploy workers`
+
+**Backend:**
+- **Railway**: Easy backend deployment
+- **Fly.io**: Global application deployment
+- **Cloudflare Workers**: Serverless edge deployment
+
+---
+
+## Development & Troubleshooting
+
+### My project won't start after creation. What should I do?
+
+1. **Check Node.js version**: Ensure you're using Node.js 18+
+2. **Install dependencies**: Run `npm install` in the project directory
+3. **Check environment variables**: Copy `.env.example` to `.env` and fill in values
+4. **Database setup**: Run database migrations if using a database
+5. **Check the README**: Each project includes detailed setup instructions
+
+### I'm getting TypeScript errors. How do I fix them?
+
+1. **Install dependencies**: Ensure all packages are installed
+2. **Restart TypeScript server**: In VS Code, use Ctrl/Cmd + Shift + P → "TypeScript: Restart TS Server"
+3. **Check imports**: Ensure all imports are correct and packages are installed
+4. **Update types**: Run `npm run check-types` to see detailed errors
+
+### How do I update dependencies in my project?
+
+```bash
+# Check for updates
+npx taze -r
+
+# Update all dependencies
+npm update
+
+# Or with other package managers
+pnpm update
+bun update
+```
+
+### Can I use Better-T-Stack with VS Code?
+
+Yes! Better-T-Stack projects work excellently with VS Code. We recommend these extensions:
+- TypeScript and JavaScript Language Features (built-in)
+- Tailwind CSS IntelliSense
+- Prisma or Drizzle Kit extensions
+- ESLint (if using Biome addon)
+
+### My mobile app won't connect to the backend. What's wrong?
+
+This is a common issue with Expo and local development:
+
+1. **Check environment variables**: Update `EXPO_PUBLIC_SERVER_URL` in `apps/native/.env`
+2. **Use your local IP**: Replace `localhost` with your computer's IP address
+3. **Check firewall**: Ensure your firewall allows connections on port 3000
+4. **Use tunnel**: Consider using `npx expo start --tunnel`
+
+---
+
+## Advanced Usage
+
+### Can I customize the generated templates?
+
+Currently, Better-T-Stack doesn't support custom templates, but you can:
+1. Fork the repository and modify templates
+2. Create a feature request for specific customizations
+3. Modify the generated project after creation
+
+### How do I contribute to Better-T-Stack?
+
+We welcome contributions! Here's how to get started:
+
+1. **Fork the repository** on GitHub
+2. **Clone your fork** locally
+3. **Install dependencies**: `pnpm install`
+4. **Make your changes** and test them
+5. **Submit a pull request** with a clear description
+
+### Can I use Better-T-Stack in my company/team?
+
+Absolutely! Better-T-Stack is perfect for:
+- **Standardizing project structure** across teams
+- **Onboarding new developers** with consistent setup
+- **Rapid prototyping** and MVP development
+- **Client projects** with proven, production-ready configurations
+
+### How do I disable telemetry?
+
+Better-T-Stack collects anonymous usage data to improve the tool. To disable:
+
+```bash
+# Disable for single run
+BTS_TELEMETRY_DISABLED=1 npx create-better-t-stack@latest my-app
+
+# Disable globally
+export BTS_TELEMETRY_DISABLED=1
+```
+
+Add the export to your shell profile (`.bashrc`, `.zshrc`, etc.) to make it permanent.
+
+---
+
+## Getting Help
+
+### Where can I get help?
+
+- **Documentation**: Comprehensive guides at [better-t-stack.dev/docs](https://better-t-stack.dev/docs)
+- **GitHub Issues**: Report bugs or request features
+- **GitHub Discussions**: Community support and questions
+- **Discord/Twitter**: Follow for updates and community discussion
+
+### How do I report a bug?
+
+1. **Search existing issues** to avoid duplicates
+2. **Create a new issue** with:
+   - Clear description of the problem
+   - Steps to reproduce
+   - Your system information (OS, Node.js version, etc.)
+   - Generated project configuration
+   - Error messages or screenshots
+
+### How do I request a new feature?
+
+1. **Check existing feature requests** in GitHub Issues
+2. **Create a new issue** with the "feature request" label
+3. **Describe the feature** and its use case
+4. **Explain why** it would benefit the community
+
+### Is there a community?
+
+Yes! You can connect with other Better-T-Stack users:
+- **GitHub Discussions**: Ask questions and share projects
+- **Twitter**: Follow [@AmanVarshney01](https://twitter.com/AmanVarshney01) for updates
+- **Show your projects**: Tag us when you build something with Better-T-Stack!
+
+---
+
+## Sponsorship & Support
+
+### How can I support Better-T-Stack?
+
+- **⭐ Star the repository** on GitHub
+- **🐛 Report bugs** and suggest improvements
+- **💰 Sponsor the project** on GitHub Sponsors
+- **📢 Share with others** who might find it useful
+- **🤝 Contribute code** or documentation
+
+### Who sponsors Better-T-Stack?
+
+View current sponsors by running:
+```bash
+npx create-better-t-stack@latest sponsors
+```
+
+Or visit: [github.com/sponsors/AmanVarshney01](https://github.com/sponsors/AmanVarshney01)
+
+---
+
+*Still have questions? Feel free to ask in [GitHub Discussions](https://github.com/AmanVarshney01/create-better-t-stack/discussions) or check our [documentation](https://better-t-stack.dev/docs).*
--- a/apps/web/content/docs/index.mdx
+++ b/apps/web/content/docs/index.mdx
@@ -1,13 +1,118 @@
 ---
-title: Introduction
+title: Getting Started
+description: A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations
 ---

-Better-T-Stack is a modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations.
+> ⚠️ **Warning:** Documentation is a work in progress.

-# Why Better-T-Stack?
+## What is Better-T-Stack?

-Better-T-Stack lets you scaffold your projects for frontend, native apps, and backend with a single CLI command.
+Better-T-Stack is designed to eliminate the complexity of setting up modern TypeScript projects. Instead of spending hours configuring build tools, type systems, databases, and deployment pipelines, you can get a production-ready project structure in minutes.

-# Features
+### Key Features

-<Features />
+- **🏗️ Full-Stack Ready**: Choose from multiple frontend and backend frameworks
+- **🔒 End-to-End Type Safety**: TypeScript across your entire application stack
+- **🗄️ Database Integration**: Support for SQLite, PostgreSQL, MySQL, and MongoDB
+- **🔐 Built-in Authentication**: Email/password auth with Better-Auth
+- **📱 Multi-Platform**: Web, mobile (React Native), and desktop (Tauri) support
+- **☁️ Deployment Ready**: Configured for modern hosting platforms
+- **⚡ Modern Tooling**: Latest versions of your favorite tools and frameworks
+
+### Supported Technologies
+
+#### Frontend Frameworks
+- **React** with TanStack Router or React Router
+- **Next.js** - Full-stack React framework
+- **SvelteKit** - Web framework for Svelte
+- **Nuxt** - Vue.js framework
+- **SolidJS** - Performant reactive framework
+- **TanStack Start** - SSR with TanStack Router
+- **React Native** - Mobile development with Expo
+
+#### Backend Frameworks
+- **Hono** - Lightweight, ultrafast web framework
+- **Express** - Popular Node.js framework
+- **Fastify** - Fast, low-overhead framework
+- **Elysia** - Type-safe, high-performance framework
+- **Convex** - Reactive backend-as-a-service
+- **Next.js API Routes** - Full-stack React
+
+#### Databases & ORMs
+- **Databases**: SQLite/Turso, PostgreSQL, MySQL, MongoDB
+- **ORMs**: Drizzle (TypeScript-first), Prisma (feature-rich), Mongoose
+- **Hosting**: Neon, Supabase, MongoDB Atlas, Cloudflare D1
+
+#### API Layers
+- **tRPC** - End-to-end type-safe APIs
+- **oRPC** - OpenAPI-compatible type-safe APIs
+
+### Why Choose Better-T-Stack?
+
+#### Traditional Setup Problems
+- ⏰ Hours of configuration and setup
+- 🔧 Complex toolchain integration
+- 📚 Overwhelming technology choices
+- 🐛 Configuration bugs and compatibility issues
+- 🏗️ Inconsistent project structures
+
+#### Better-T-Stack Solutions
+- ⚡ **Quick Setup**: Get started in under 2 minutes
+- 🎯 **Curated Choices**: Pre-selected, compatible technology combinations
+- 📋 **Best Practices**: Industry-standard configurations out of the box
+- 🔄 **Consistent Structure**: Standardized monorepo organization
+- 🧪 **Battle-Tested**: Configurations used in production applications
+
+## Quick Example
+
+```bash
+# Create a new project
+npx create-better-t-stack@latest my-app
+
+# Choose your stack interactively or use flags
+npx create-better-t-stack@latest my-app \
+  --frontend tanstack-router \
+  --backend hono \
+  --database postgres \
+  --orm drizzle \
+  --auth \
+  --addons pwa turborepo
+```
+
+## Project Types
+
+Better-T-Stack supports various project configurations:
+
+### Full-Stack Web Applications
+Perfect for modern web apps with React, Vue, or Svelte frontends backed by type-safe APIs.
+
+### Mobile Applications
+Build React Native apps with Expo, sharing type definitions with your backend.
+
+### Desktop Applications
+Create cross-platform desktop apps using Tauri with your web frontend.
+
+### API-Only Projects
+Build standalone APIs and microservices with your preferred backend framework.
+
+### Monorepo Projects
+Organize multiple applications (web, mobile, API) in a single repository with shared packages.
+
+## Who Should Use Better-T-Stack?
+
+- **Indie Developers**: Quickly prototype and build full-stack applications
+- **Startups**: Get to market faster with production-ready project structure
+- **Teams**: Standardize project setup across your organization
+- **Students**: Learn modern full-stack development with best practices
+- **Agencies**: Rapidly scaffold client projects with consistent quality
+
+## What's Next?
+
+Ready to get started? Check out our [Quick Start Guide](/docs/quick-start) to create your first Better-T-Stack project, or explore the [Configuration Options](/docs/frontend) to learn about all available technologies and features.
+
+### Need Help?
+
+- 📖 **Documentation**: Comprehensive guides and references
+- 🐛 **Issues**: Report bugs on [GitHub](https://github.com/AmanVarshney01/create-better-t-stack/issues)
+- 💬 **Discussions**: Community support and questions
+- 🌟 **Star us**: Show support on [GitHub](https://github.com/AmanVarshney01/create-better-t-stack)
--- a/apps/web/content/docs/installation.mdx
+++ b/apps/web/content/docs/installation.mdx
@@ -0,0 +1,236 @@
+---
+title: Installation
+description: How to install and set up Better-T-Stack CLI
+---
+
+## System Requirements
+
+Before installing Better-T-Stack, ensure your system meets these requirements:
+
+- **Node.js**: Version 18 or higher
+- **Package Manager**: npm, pnpm, or bun
+- **Git**: For repository initialization (optional but recommended)
+
+### Optional Dependencies
+
+Depending on your project configuration, you may need:
+
+- **Docker**: For local database development with Docker Compose
+- **Rust & System Dependencies**: For Tauri desktop applications
+- **Cloudflare CLI**: For Workers deployment
+
+## Quick Start (Recommended)
+
+The fastest way to get started is using npx, which runs the latest version without installation:
+
+```bash
+npx create-better-t-stack@latest my-project
+```
+
+This command will:
+1. Download the latest version of the CLI
+2. Run the interactive setup wizard
+3. Create your project in the `my-project` directory
+
+## Package Manager Specific Commands
+
+### npm
+
+```bash
+# Run without installing
+npx create-better-t-stack@latest my-project
+
+# Or install globally
+npm install -g create-better-t-stack
+create-better-t-stack my-project
+```
+
+### pnpm
+
+```bash
+# Run without installing (recommended)
+pnpm create better-t-stack@latest my-project
+
+# Or install globally
+pnpm add -g create-better-t-stack
+create-better-t-stack my-project
+```
+
+### bun
+
+```bash
+# Run without installing (recommended)
+bun create better-t-stack@latest my-project
+
+# Or install globally
+bun add -g create-better-t-stack
+create-better-t-stack my-project
+```
+
+## Global Installation
+
+If you frequently create new projects, you might want to install the CLI globally:
+
+<Tabs items={['npm', 'pnpm', 'bun']}>
+  <Tab value="npm">
+    ```bash
+    npm install -g create-better-t-stack
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add -g create-better-t-stack
+    ```
+  </Tab>
+  <Tab value="bun">
+    ```bash
+    bun add -g create-better-t-stack
+    ```
+  </Tab>
+</Tabs>
+
+After global installation, you can run:
+
+```bash
+create-better-t-stack my-project
+```
+
+## Verification
+
+Verify your installation by checking the version:
+
+```bash
+# If installed globally
+create-better-t-stack --version
+
+# Or with npx
+npx create-better-t-stack@latest --version
+```
+
+You should see output similar to:
+
+```
+2.26.3
+```
+
+## Development Installation
+
+For contributing to Better-T-Stack or running the latest development version:
+
+```bash
+# Clone the repository
+git clone https://github.com/AmanVarshney01/create-better-t-stack.git
+cd create-better-t-stack
+
+# Install dependencies
+pnpm install
+
+# Build the CLI
+cd apps/cli
+pnpm build
+
+# Link for local development
+pnpm link --global
+```
+
+## Troubleshooting
+
+### Common Issues
+
+#### Permission Errors (npm)
+
+If you encounter permission errors with npm global installation:
+
+```bash
+# Use npx instead (recommended)
+npx create-better-t-stack@latest my-project
+
+# Or configure npm to use a different directory
+mkdir ~/.npm-global
+npm config set prefix '~/.npm-global'
+echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
+source ~/.bashrc
+```
+
+#### Node.js Version Issues
+
+Ensure you're using Node.js 18 or higher:
+
+```bash
+node --version
+```
+
+If you need to upgrade Node.js:
+
+- **Using nvm**: `nvm install 18 && nvm use 18`
+- **Using n**: `n 18`
+- **Download**: Visit [nodejs.org](https://nodejs.org/)
+
+#### Package Manager Not Found
+
+If you prefer a specific package manager but it's not installed:
+
+```bash
+# Install pnpm
+npm install -g pnpm
+
+# Install bun
+curl -fsSL https://bun.sh/install | bash
+```
+
+#### Network Issues
+
+If you experience network timeouts or connection issues:
+
+```bash
+# Try with different registry
+npm config set registry https://registry.npmjs.org/
+
+# Or clear npm cache
+npm cache clean --force
+```
+
+## Next Steps
+
+Once installed, you're ready to create your first project:
+
+1. **Quick Start**: Follow our [Quick Start Guide](/docs/quick-start)
+2. **Configuration**: Learn about [Configuration Options](/docs/frontend)
+3. **CLI Reference**: Explore all [CLI Commands](/docs/cli-commands)
+
+## Staying Updated
+
+To ensure you're always using the latest version with bug fixes and new features:
+
+### Using npx (Automatic)
+When using `npx create-better-t-stack@latest`, you automatically get the latest version.
+
+### Global Installation Updates
+
+If you have it installed globally, update regularly:
+
+<Tabs items={['npm', 'pnpm', 'bun']}>
+  <Tab value="npm">
+    ```bash
+    npm update -g create-better-t-stack
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm update -g create-better-t-stack
+    ```
+  </Tab>
+  <Tab value="bun">
+    ```bash
+    bun update -g create-better-t-stack
+    ```
+  </Tab>
+</Tabs>
+
+### Release Notes
+
+Stay informed about new features and changes:
+
+- **GitHub Releases**: [View releases](https://github.com/AmanVarshney01/create-better-t-stack/releases)
+- **Changelog**: Check the repository for detailed changes
+- **Breaking Changes**: Major version updates may include breaking changes
--- a/apps/web/content/docs/meta.json
+++ b/apps/web/content/docs/meta.json
@@ -1,3 +1,33 @@
 {
-	"pages": ["---Getting Started---", "index"]
+	"pages": [
+		"index",
+		"---Getting Started---",
+		"installation",
+		"quick-start",
+		"project-structure",
+		"---Configuration Options---",
+		"frontend",
+		"backend",
+		"database",
+		"orm",
+		"authentication",
+		"runtime",
+		"api-layer",
+		"---Addons & Features---",
+		"addons",
+		"examples",
+		"deployment",
+		"---Database Setup---",
+		"database-providers",
+		"---CLI Reference---",
+		"cli-commands",
+		"cli-flags",
+		"---Guides---",
+		"migration-guide",
+		"troubleshooting",
+		"best-practices",
+		"---FAQ---",
+		"faq",
+		"compatibility"
+	]
 }