ByteStack - B2B SaaS Starter Kit

A comprehensive, production-ready B2B SaaS starter kit built with modern technologies and best practices.

🚀 Features

Core Technologies

• Next.js 15 with App Router, React Compiler, and TypeScript
• Tailwind CSS with custom design system
• shadcn/ui components for consistent UI
• ConvexDB for real-time data and live queries
• Drizzle ORM with Turso for admin panel and analytics
• BetterAuth for authentication with OAuth support
• PayloadCMS for content management with Turso database
• Bun as the primary runtime, package manager, and bundler

B2B SaaS Features

• Multi-tenant Architecture with company-based isolation
• Role-based Access Control (Admin, User, Owner)
• Real-time Authentication with Google and GitHub OAuth
• Subscription Management with multiple plan tiers
• API Key Management for integrations
• Audit Logging for compliance
• Content Management with PayloadCMS
• File Storage with S3-compatible cloud storage

Code Quality & Linting

• ESLint with TypeScript and Next.js rules
• Prettier for consistent code formatting
• Husky for git hooks (pre-commit, pre-push)
• lint-staged for optimized pre-commit linting
• Automatic formatting on every commit

Next.js 15 Features

• React Compiler for automatic optimization and better performance
• Optimized Package Imports for faster bundle loading
• Standalone Output for efficient deployment
• Enhanced Security Headers for production safety
• Advanced Image Optimization with remote pattern support
• Webpack Optimizations for better client-side performance

Bun Runtime Benefits

• Ultra-fast Package Installation - 20x faster than npm
• Native TypeScript Support - No compilation step needed
• Built-in Bundler - Faster builds and hot reloads
• Memory Efficient - Lower resource usage
• Compatible APIs - Drop-in replacement for Node.js
• Integrated Testing - Built-in test runner

🛠️ Tech Stack

Category	Technology
Frontend	Next.js 15, React 19, TypeScript
Styling	Tailwind CSS, shadcn/ui
Real-time DB	ConvexDB (real-time data sync)
SQL Database	Turso (LibSQL) + Drizzle ORM
ORM	Drizzle ORM (type-safe SQL)
Authentication	BetterAuth (OAuth + Email)
CMS	PayloadCMS with Turso backend
Deployment	Vercel
Runtime	Bun (fastest JavaScript runtime)
Icons	Lucide React
Linting	ESLint + Prettier
Git Hooks	Husky + lint-staged

🗄️ Database Architecture

ByteStack uses a hybrid database approach for optimal performance:

1. ConvexDB - Real-time application data

   • Live queries and mutations
   • Real-time subscriptions
   • Main application data

2. Turso (LibSQL) - Admin operations and analytics

   • Admin panel data synchronized from ConvexDB
   • Analytics and reporting
   • System health monitoring
   • Audit logs

3. PayloadCMS - Content management

   • Blog posts and media
   • Settings and configurations
   • SEO management

📦 Installation

1. Clone the repository

   git clone <your-repo-url>
   cd bytestack

2. Install dependencies with Bun (20x faster than npm)

   bun install

3. Set up environment variables

   cp env.example .env.local

   Fill in your environment variables:

   • ConvexDB configuration
   • Turso database credentials
   • BetterAuth configuration
   • OAuth provider credentials
   • Email service configuration
   • Cloud storage credentials

4. Initialize Turso Database

   # Create a new Turso database
   turso db create bytestack
   
   # Get the database URL and token
   turso db show bytestack --url
   turso db tokens create bytestack

   Add to .env.local:

   TURSO_CONNECTION_URL=libsql://your-db.turso.io
   TURSO_AUTH_TOKEN=your_auth_token
   PAYLOAD_TURSO_URL=libsql://your-payload-db.turso.io

5. Initialize ConvexDB

   bunx convex dev --configure new

6. Run database migrations

   bun run db:push

7. Start the development server (with Bun's ultra-fast hot reload)

   bun run dev

🔧 Configuration

Environment Variables

Copy env.example to .env.local and configure:

# ConvexDB
NEXT_PUBLIC_CONVEX_URL=your_convex_url
CONVEX_DEPLOY_KEY=your_deploy_key

# Turso Database Configuration
TURSO_CONNECTION_URL=libsql://your-db.turso.io
TURSO_AUTH_TOKEN=your_turso_token
PAYLOAD_TURSO_URL=libsql://your-payload-db.turso.io

# BetterAuth Configuration
BETTER_AUTH_SECRET=your_secret_key
BETTER_AUTH_URL=http://localhost:3000

# OAuth Providers
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Email
SMTP_HOST=your_smtp_host
SMTP_USER=your_smtp_user
SMTP_PASS=your_smtp_password

# Cloud Storage
S3_ENDPOINT=your_s3_endpoint
S3_ACCESS_KEY_ID=your_access_key
S3_SECRET_ACCESS_KEY=your_secret_key
S3_BUCKET=your_bucket_name

ConvexDB Setup

1. Create a new Convex project
2. Configure authentication providers
3. Deploy your schema and functions

PayloadCMS Setup

1. Configure your database connection
2. Set up collections and globals
3. Configure file storage

🏗️ Project Structure

bytestack/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── layout.tsx       # Root layout
│   │   └── page.tsx         # Home page
│   ├── components/          # React components
│   │   ├── ui/              # shadcn/ui components
│   │   ├── Header.tsx       # Navigation header
│   │   ├── Dashboard.tsx    # Main dashboard
│   │   ├── animations.tsx  # Animation components
│   │   └── visual-effects.tsx # Visual effects
│   └── lib/
│       └── utils.ts         # Utility functions
├── convex/                  # ConvexDB functions
│   ├── schema.ts           # Database schema
│   ├── users.ts            # User operations
│   └── auth.ts             # Authentication config
├── collections/             # PayloadCMS collections
├── globals/                 # PayloadCMS globals
├── payload.config.ts        # PayloadCMS configuration
└── vercel.json             # Vercel deployment config

🚀 Deployment

Vercel Deployment

1. Connect your repository to Vercel
2. Configure environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

The vercel.json file includes optimized settings for:

• Build commands using Bun (20x faster than npm)
• Environment variable mapping
• Framework detection
• Regional deployment
• Frozen lockfile for consistent builds

Manual Deployment

# Build the application
bun run build

# Deploy to ConvexDB
bunx convex deploy

# Deploy to Vercel
vercel --prod

🎨 Customization

Design System

The project uses a comprehensive design system with:

• Custom Tailwind configuration
• shadcn/ui components
• Consistent color palette
• Typography scale
• Spacing system

Components

All components are placed in src/components/ for easy organization:

• Reusable UI components
• Business logic components
• Animation components
• Visual effect components

Animations

The animation system provides:

• Randomized timing for natural feel
• Multiple animation types
• Staggered animations for lists
• Scroll-triggered animations
• Hover effects

📊 Features Overview

Authentication

• OAuth with Google and GitHub
• Role-based permissions
• Session management
• User profile management

Company Management

• Multi-tenant architecture
• Company settings and branding
• User invitation system
• Plan management

Content Management

• PayloadCMS integration
• Rich text editing
• Media management
• SEO optimization

Analytics & Monitoring

• Real-time data updates
• Audit logging
• Performance monitoring
• User activity tracking

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue in the repository
• Check the documentation
• Review the example configurations

🔮 Roadmap

• Payment integration (Stripe)
• Advanced analytics dashboard
• Mobile app support
• API documentation
• Testing suite
• Performance optimization
• Internationalization
• Advanced security features

---

Built with ❤️ using modern web technologies for the next generation of B2B SaaS applications.