The Tech Stack Behind Solo Kit

Building a modern SaaS application requires careful technology choices. Solo Kit's stack is designed for developer productivity, scalability, and long-term maintainability. Here's why we chose each technology and how they work together.

Frontend Framework: Next.js 15

Why Next.js 15?

• App Router for modern file-based routing
• Server Components for optimal performance
• Built-in optimizations for images, fonts, and scripts
• TypeScript-first with excellent developer experience
• Production-ready with automatic code splitting

// Example: Server Component with data fetching
export default async function DashboardPage() {
  const data = await fetchUserData(); // Runs on server
  return <UserDashboard data={data} />;
}

Key Features We Leverage

• Static Site Generation (SSG) for marketing pages
• Server-Side Rendering (SSR) for dynamic content
• API Routes for backend functionality
• Middleware for authentication and routing
• Image Optimization with next/image

Mobile: Expo React Native

Cross-Platform Strategy

Rather than building separate iOS and Android apps, we chose Expo for:

• Code sharing with the web application
• Rapid development with hot reloading
• Easy deployment to app stores
• Native integrations when needed
• Shared business logic between platforms

// Shared utility functions work everywhere
import { formatCurrency } from '@packages/utils';

// Works in web, iOS, and Android
const price = formatCurrency(1999, 'USD');

UI Foundation: shadcn/ui + Tailwind CSS

Component Library Choice

We chose shadcn/ui because it provides:

• Copy-and-paste components you own completely
• Customizable design system built on Radix UI
• Accessibility built-in from day one
• No runtime dependencies - just the code you need
• TypeScript native with excellent IntelliSense

// Example: Customizable Button component
import { Button } from '@/components/ui/button';

<Button variant="outline" size="lg">
  Get Started
</Button>

Styling Architecture

• Tailwind CSS for utility-first styling
• CSS Variables for theming and dark mode
• Responsive design with mobile-first approach
• Design tokens for consistent spacing and colors

Database: PostgreSQL + Drizzle ORM

Production-Ready Database Layer

Drizzle ORM with PostgreSQL gives us:

• Type safety from database to UI
• SQL-like syntax that's familiar and powerful
• PostgreSQL features available in development
• Migration system for schema evolution
• Edge-ready with minimal bundle size

// Example: Type-safe PostgreSQL queries with advanced features
const recentUsers = await db
  .select()
  .from(usersTable)
  .where(gte(usersTable.createdAt, sql`NOW() - INTERVAL '7 days'`))
  .orderBy(desc(usersTable.createdAt));

PostgreSQL-First Architecture

• All environments: PostgreSQL for consistency
• Free tiers: Available from Neon, Supabase, Railway
• Migrations: Version-controlled schema changes
• Advanced features: JSON columns, full-text search, time zones

Authentication: BetterAuth

Modern Auth Solution

BetterAuth provides:

• Multiple providers (email, OAuth, magic links)
• Session management with secure defaults
• Type-safe APIs throughout the application
• Flexible architecture for custom auth flows
• Security best practices built-in

// Example: Type-safe auth hooks
const { data: session } = useSession();
if (session?.user) {
  // User is authenticated
}

State Management: Zustand + React Query

Client State Strategy

• Zustand for global application state
• React Query for server state and caching
• React Hook Form for form state
• URL state with nuqs for shareable state

// Example: Global state with Zustand
const useAppStore = create((set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme }),
}));

Build System & Tooling

Development Experience

• TypeScript for type safety everywhere
• ESLint + Prettier for code consistency
• Vitest for fast unit testing
• Turbopack for lightning-fast development builds
• pnpm for efficient package management

Monorepo Architecture

├── apps/
│   ├── web/          # Next.js application
│   └── mobile/       # Expo application
├── packages/
│   ├── ui/           # Shared components
│   ├── utils/        # Shared utilities
│   ├── database/     # Database layer
│   └── eslint-config/ # Shared linting

Feature Flag System

Smart Defaults Architecture

Our feature flag system enables:

• Instant development without external dependencies
• Gradual upgrades from free to paid services
• A/B testing for new features
• Environment-specific configurations

// Example: Feature flag usage
const dbEnabled = getFeatureFlag('DATABASE_URL');
const emailProvider = getFeatureFlag('EMAIL_PROVIDER', 'console');

Deployment & Infrastructure

Production-Ready Defaults

• Vercel for web application hosting
• Expo Application Services for mobile builds
• Edge-compatible database connections
• CDN optimization for global performance

Monitoring & Analytics

• Vercel Analytics for web metrics
• Sentry for error tracking (optional)
• Axiom for structured logging
• Built-in debug pages for development

Why This Stack?

Developer Experience

Every choice prioritizes developer productivity:

• TypeScript everywhere for confidence
• Hot reloading for instant feedback
• Modern tooling for efficient workflows
• Excellent documentation and community support

Scalability

The stack grows with your application:

• Start production-ready with PostgreSQL and console logging
• Scale gradually to advanced services and features
• Performance optimized with built-in caching and CDN
• Edge-ready for global distribution

Long-term Maintainability

• Stable, mature technologies with long-term support
• Active communities and regular updates
• No vendor lock-in - own your code completely
• Migration paths when you need to change

Getting Started

Each technology in our stack is chosen to work seamlessly together:

# Install and start developing immediately
pnpm install
pnpm dev

# Everything works together out of the box
# TypeScript, database, auth, UI components
# No complex configuration needed

The result is a development experience that lets you focus on building your unique features while standing on a foundation of proven, scalable technologies.

Ready to build something amazing? The stack is ready when you are.