ModernStack SaaS Starter - SvelteKit + Convex + Better Auth

A production-ready SaaS starter template built for the Modern Stack Hackathon, featuring SvelteKit, Convex, Better Auth, Autumn Stripe billing, and more.

Tech Stack

• SvelteKit with Svelte 5 - Modern, reactive frontend framework
• Convex - Real-time backend database with serverless functions
• Better Auth - Comprehensive authentication solution with email/password and OAuth
• Autumn - Stripe billing wrapper for seamless payment integration
• Resend - Transactional email service for password resets and email verification
• shadcn-svelte - Beautiful, accessible UI components
• Tailwind CSS v4 - Utility-first CSS framework
• Lucide - Beautiful icon library

Features

• ✅ Authentication System

  • Email/password authentication
  • Google OAuth support
  • Password reset flow
  • Email change with verification
  • Session management

• ✅ User Management

  • User profile settings
  • Avatar upload with Convex storage
  • Account information management

• ✅ UI Components

  • Dashboard with charts and data tables
  • Sidebar navigation
  • Settings pages (Account, Password, Email)
  • Responsive design
  • Dark/light mode ready

• ✅ Developer Experience

  • TypeScript throughout
  • Type-safe database queries
  • Hot module replacement
  • ESLint & Prettier configured
  • LLM-focused documentation in /docs + CLAUDE.md for AI-assisted development
  • GitHub Actions CI/CD for code quality checks and Cloudflare deployments

Roadmap

Planned features and improvements:

• OAuth Support - Complete Google OAuth integration and add additional providers
• Multi-tenancy / Team Support - Organizations, team invites, and role-based permissions
• Rate Limiting - API rate limiting and request throttling
• Stripe Stats in Admin Dashboard - Revenue analytics and subscription metrics
• Welcome Email Template - Branded welcome emails for new users
• E2E Tests with Playwright - Comprehensive end-to-end testing suite

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone https://github.com/joachimchauvet/modernstack-saas
cd modernstack-saas

2. Install dependencies:

pnpm install

3. Set up environment variables:

Create a .env.local file in the root directory:

PUBLIC_CONVEX_URL=your_convex_url
PUBLIC_CONVEX_SITE_URL=your_convex_site_url
SITE_URL=http://localhost:5173
RESEND_API_KEY=your_resend_api_key
RESET_EMAIL_FROM="Your App <[email protected]>" # Optional
[email protected] # Optional

4. Initialize Convex:

pnpm convex dev

5. Start the development server:

pnpm dev

The app will be running at http://localhost:5173

Development

Run both the SvelteKit dev server and Convex in parallel:

# Terminal 1 - Convex backend
pnpm convex dev

# Terminal 2 - SvelteKit frontend
pnpm dev

Project Structure

├── src/
│   ├── lib/
│   │   ├── components/     # UI components
│   │   ├── auth-client.ts  # Better Auth client
│   │   └── ...
│   ├── routes/
│   │   ├── (app)/          # Protected routes
│   │   │   ├── dashboard/
│   │   │   └── settings/
│   │   └── auth/           # Authentication routes
│   └── convex/             # Convex backend
│       ├── auth.ts         # Auth configuration
│       ├── storage.ts      # File storage
│       └── ...

Building for Production

Create a production build:

pnpm build

Preview the production build:

pnpm preview

Deployment

This starter uses adapter-cloudflare by default, but you can swap it for any SvelteKit adapter:

• Vercel
• Netlify
• Node
• Other adapters

Deployment Steps

1. Deploy your Convex backend:

pnpm convex deploy

2. Set all environment variables in your hosting platform:

   • PUBLIC_CONVEX_URL
   • PUBLIC_CONVEX_SITE_URL
   • SITE_URL (update to your production domain)
   • RESEND_API_KEY
   • RESET_EMAIL_FROM (optional)
   • RESET_EMAIL_REPLY_TO (optional)

3. Deploy your frontend to your chosen platform

Documentation

This project includes comprehensive documentation optimized for LLM consumption:

• /docs - Framework-specific guides and best practices
  • svelte/ - Svelte 5 runes, reactivity, templating, and state management
  • better_auth.md - Authentication setup and patterns
  • convex.md - Backend queries, mutations, and real-time data
  • tailwind_v4.md - Styling with Tailwind CSS v4
  • autumn.md - Billing and subscription management

CI/CD

GitHub Actions workflows are included for:

• Code Quality (.github/workflows/code-quality.yml) - Linting, formatting, type checking, and spell checking on every push/PR
• Cloudflare Pages (.github/workflows/cloudflare-pages.yml) - Automatic deployments with preview URLs for pull requests
• Cloudflare Workers (.github/workflows/deploy-workers.yml) - Alternative deployment target with more features

Built for Modern Stack Hackathon

This starter template was created for the Convex Modern Stack Hackathon, showcasing the power of combining modern web technologies to build production-ready SaaS applications.

🚀 Ready to Ship?

Stop plumbing, start vibing. Modern stack, zero setup headaches.

✓ Auth • ✓ Payments • ✓ Real-time DB • ✓ Your brilliant idea? Add here →

Fork & Ship on GitHub • MIT Licensed • Built for developers