diff --git a/apps/web/components/features.tsx b/apps/web/components/features.tsx deleted file mode 100644 index 69acd42..0000000 --- a/apps/web/components/features.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, Cards } from "fumadocs-ui/components/card"; -import { Cable, Database, Globe, Lock, Package, Server } from "lucide-react"; - -export default function Features() { - return ( - - } - title="Frontend" - description="Choose between Tanstack Router, React Router, Expo, Next.js, and more" - /> - } - title="Flexible Backend" - description="Choose between Hono, Elysia, Next.js, Express, and Fastify" - /> - } - title="End to end typesafe APIs" - description="With the help of tRPC or oRPC" - /> - } - title="Authentication" - description="With the help of Better Auth" - /> - } - title="Database Setup" - description="Many ORMs and Relational Databases" - /> - } - title="Addons" - description="Add PWA support, desktop apps, documentation, and more" - /> - - ); -} diff --git a/apps/web/content/docs/cli-commands.mdx b/apps/web/content/docs/cli-commands.mdx new file mode 100644 index 0000000..8c075d8 --- /dev/null +++ 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. diff --git a/apps/web/content/docs/faq.mdx b/apps/web/content/docs/faq.mdx new file mode 100644 index 0000000..d6d5e21 --- /dev/null +++ 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).* diff --git a/apps/web/content/docs/index.mdx b/apps/web/content/docs/index.mdx index 33afe83..45d9571 100644 --- 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 - +- **๐Ÿ—๏ธ 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) diff --git a/apps/web/content/docs/installation.mdx b/apps/web/content/docs/installation.mdx new file mode 100644 index 0000000..0dc06be --- /dev/null +++ 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: + + + + ```bash + npm install -g create-better-t-stack + ``` + + + ```bash + pnpm add -g create-better-t-stack + ``` + + + ```bash + bun add -g create-better-t-stack + ``` + + + +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: + + + + ```bash + npm update -g create-better-t-stack + ``` + + + ```bash + pnpm update -g create-better-t-stack + ``` + + + ```bash + bun update -g create-better-t-stack + ``` + + + +### 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 diff --git a/apps/web/content/docs/meta.json b/apps/web/content/docs/meta.json index 82e5ac7..4a87df8 100644 --- 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" + ] } diff --git a/apps/web/lib/cn.ts b/apps/web/lib/cn.ts new file mode 100644 index 0000000..8e473da --- /dev/null +++ b/apps/web/lib/cn.ts @@ -0,0 +1 @@ +export { twMerge as cn } from "tailwind-merge"; diff --git a/apps/web/public/icon/discord.svg b/apps/web/public/icon/discord.svg index 5e7aa2e..3e52154 100644 --- a/apps/web/public/icon/discord.svg +++ b/apps/web/public/icon/discord.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/apps/web/src/app/(home)/_components/FeatureCard.tsx b/apps/web/src/app/(home)/_components/FeatureCard.tsx index 3c176fa..0b62826 100644 --- a/apps/web/src/app/(home)/_components/FeatureCard.tsx +++ b/apps/web/src/app/(home)/_components/FeatureCard.tsx @@ -84,7 +84,7 @@ export default function FeatureCard({ layout >
-

+

{title}

diff --git a/apps/web/src/app/(home)/_components/code-container.tsx b/apps/web/src/app/(home)/_components/code-container.tsx index 47743c5..d100a52 100644 --- a/apps/web/src/app/(home)/_components/code-container.tsx +++ b/apps/web/src/app/(home)/_components/code-container.tsx @@ -25,13 +25,13 @@ const CodeContainer = () => { const packageManagers: Array<"npm" | "pnpm" | "bun"> = ["bun", "pnpm", "npm"]; return ( -
+
Package manager: -
+
{packageManagers.map((pm) => (
-
+
$ @@ -64,7 +64,7 @@ const CodeContainer = () => { type="button" onClick={copyToClipboard} className={cn( - "flex h-7 w-7 items-center justify-center rounded border bg-background text-muted-foreground transition-all duration-150 hover:border-border hover:bg-muted hover:text-foreground", + "flex h-7 w-7 items-center justify-center rounded border text-muted-foreground transition-all duration-150 hover:border-border hover:bg-muted hover:text-foreground", copied ? "border-chart-4/50 bg-chart-4/10 text-chart-4" : "border-border", diff --git a/apps/web/src/app/(home)/_components/customizable-section.tsx b/apps/web/src/app/(home)/_components/customizable-section.tsx index 3a63577..bcee210 100644 --- a/apps/web/src/app/(home)/_components/customizable-section.tsx +++ b/apps/web/src/app/(home)/_components/customizable-section.tsx @@ -3,7 +3,7 @@ import StackBuilder from "./stack-builder"; export default function CustomizableSection() { return ( -
+
-

+

Roll Your Own Stack @@ -26,7 +26,7 @@ export default function CustomizableSection() { transition={{ duration: 0.5, delay: 0.2 }} className="mx-auto max-w-3xl space-y-6" > -

+

Build your perfect TypeScript stack.

diff --git a/apps/web/src/app/(home)/_components/footer.tsx b/apps/web/src/app/(home)/_components/footer.tsx index 61ad76d..550dd3e 100644 --- a/apps/web/src/app/(home)/_components/footer.tsx +++ b/apps/web/src/app/(home)/_components/footer.tsx @@ -3,8 +3,8 @@ import Link from "next/link"; const Footer = () => { return ( -