🎯 TSStarter - Premium TypeScript Starter for Modern Web Applications

• ⚡ Lightning Fast - Built with Vite and TanStack for optimal performance
• 🔒 Type-Safe - End-to-end type safety from database to UI
• 🚀 Real-Time - Live updates and collaborative features out of the box
• 🤖 AI-Ready - Integrated AI capabilities with Vercel AI SDK v5
• 💳 Payment Ready - Complete subscription management with Polar
• 📱 Modern UI - Beautiful, accessible components with shadcn/ui
• 🔐 Secure - Enterprise-grade authentication and security practices

🏗️ Architecture Overview

TSStarter follows a modern full-stack architecture that prioritizes type safety, real-time capabilities, and exceptional developer experience.

Core Architecture Principles

Complete system architecture showing the flow from client to server, database, and external services

Technology Stack

Our carefully curated tech stack ensures you're building with the best tools available:

🎯 Key Features & Capabilities

TSStarter comes packed with everything you need to build modern web applications:

🔒 Type-Safe Full-Stack

• End-to-end type safety with oRPC + TanStack
• Docs and Blog with MDX Content Collections
• Dashboard and Analytics realtime with oRPC SSE
• AI integration with Vercel AI SDK v5

⚡ Real-Time Capabilities

• Live task updates via Server-Sent Events
• Real-time notifications for mentions and shares
• Instant UI updates without page refreshes
• Collaborative features with live data sync

👥 Advanced User Management

• OAuth integration (GitHub, Google)
• Email verification with secure tokens
• Password reset functionality
• User profiles and preferences

💳 Payment Integration

• Subscription management with Polar
• Secure payment processing
• Webhook handling for payment events
• Usage-based billing support

🏛️ Project Structure

tsstarter/
├── 📁 src/
│   ├── 🧩 components/           # React components
│   │   ├── ui/                 # Reusable UI components (shadcn/ui)
│   │   └── app/                # All application components
│   ├── 🗄️ db/                  # Database layer
│   │   ├── schema.ts           # Drizzle schema definitions
│   │   └── migrate.ts          # Database migrations
│   ├── 🔧 lib/                 # Shared utilities
│   │   ├── auth/               # Authentication logic
│   │   ├── hooks/              # Custom React hooks
│   │   ├── orpc.ts             # oRPC client configuration
│   │   └── utils.ts            # Helper functions
│   ├── 🛣️ routes/              # Application routes
│   │   ├── _authed/            # Protected routes
│   │   ├── api/                # API endpoints
│   │   └── __root.tsx          # Root layout
│   ├── 🖥️ server/              # Server-side code
│   │   ├── routes/             # oRPC procedures
│   │   ├── handler.ts          # Request handler
│   │   └── orpc.ts             # oRPC server setup
│   └── 🎨 styles.css           # Global styles
├── 📁 content/                 # MDX content
│   ├── blog/                   # Blog posts
│   └── docs/                   # Documentation
├── 📁 drizzle/                 # Database migrations
├── 📁 public/                  # Static assets
└── 📄 Configuration files

🔧 Development Experience

🚀 Hot Reload & Fast Refresh

• Instant updates during development
• Type checking in real-time
• Error overlay with detailed messages
• Fast build times with Vite

🛠️ Developer Tools

• ESLint for code quality
• Prettier for consistent formatting
• TypeScript for type safety
• Vitest for testing
• Drizzle Studio for database management

🎨 UI/UX Design System

Modern Design Principles

• Accessibility first with ARIA labels
• Responsive design for all devices
• Dark mode support with system preference
• Smooth animations and transitions

Component Library

• shadcn/ui for consistent components
• Tailwind CSS for utility-first styling
• Custom components for specific needs
• Icon system with Lucide React

🔐 Security Features

Authentication & Authorization

• Better Auth with secure session management
• OAuth providers (GitHub, Google) integration
• Session-based authentication with secure cookies
• Input validation with Zod schemas
• Protected API routes with authentication middleware
• CSRF (Cross-Site Request Forgery) protection

Data Protection

• Environment variables for sensitive data with Zod validation
• Type-safe configuration with @t3-oss/env-core
• Secure session management with Better Auth
• Database connection with authentication tokens (Turso)

🚀 Deployment Ready

Platform Support

• Vercel - Zero-config deployment
• Netlify - Zero-config deployment
• Railway - Full-stack hosting

📚 Getting Started

Ready to dive in? Check out our comprehensive getting started guide to set up your first TSStarter project.

Get Started →

---

TSStarter is designed to help developers build production-ready applications faster, with better type safety, and exceptional developer experience.