🎯 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 & TanStack Query
• AI integration with Vercel AI SDK v5

⚡ Real-Time Capabilities

• Live task updates via oRPC's Event Publisher & TanStack Query (Cache)
• 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

🏛️ 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
├── 📁 packages/db/migrations/  # 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 - Nitro Plugin
• Netlify - Netlify Plugin
• Railway - Nitro Plugin

Database

• Turso

📚 Setup

Ready to dive in? Check out the docs to set up your first project.

Setup →

---

TSStarter is crafted with the best TypeScript tools for building web and universal applications.