TSSTarter - Premium TypeScript Starter

🎯 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

TSStarter Architecture

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:

Layer	Technology	Purpose
🎨 Frontend	React 19 + TanStack Router	Type-safe routing and state management
⚙️ Backend	TanStack Start + TypeScript	Server Routes, Server Functions, SSR
🗄️ Database	SQLite (dev) / Turso (prod) + Drizzle ORM	Type-safe database operations
🔗 RPC	oRPC	Type-safe RPC services, client calls
🔐 Auth	Better Auth	Modern authentication system
⚡ Real-time	Server-Sent Events	Live updates and notifications
🤖 AI	Anthropic Claude / OpenAI	AI features
🎨 Styling	Tailwind CSS + shadcn/ui	Beautiful, accessible UI
📧 Email	Plunk	Transactional emails
💳 Payments	Polar	Subscription management

🎯 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.

TS STARTER

🚀 Welcome to TSStarter