SvelterApp

📖 Introduction

SvelterApp is a comprehensive, open-source SvelteKit dashboard starter template designed for building modern SaaS applications and admin dashboards. It comes with a fully functional Role-Based Access Control (RBAC) system, multi-tenant organization support, and a beautiful, responsive UI built with modern web technologies.

🎯 Use Cases

• SaaS Applications: Build multi-tenant SaaS platforms with organization management
• Admin Dashboards: Create powerful admin panels with granular permission control
• Enterprise Applications: Deploy enterprise-grade applications with robust authentication and authorization
• Internal Tools: Develop internal management tools with role-based access
• Startup MVPs: Quickly bootstrap your next project with production-ready features

✨ Key Features

• 🔐 Complete Authentication System

  • Email/password authentication with Auth.js (NextAuth)
  • Password reset and email verification flows
  • Secure session management
  • Email change confirmation

• 🛡️ Role-Based Access Control (RBAC)

  • Multi-level role hierarchy (Super Admin, Admin, Manager, Operator)
  • Granular permission system (resource:action pattern)
  • Role-based route protection
  • Permission-based UI rendering
  • Organization-scoped roles

• 🏢 Multi-Tenant Architecture

  • Organization/tenant isolation
  • Organization settings management
  • Tax identifier support
  • Organization-specific user management

• 👥 User Management

  • User CRUD operations
  • User invitations system
  • Active session management
  • User profile management
  • Email change workflow

• 📊 Dashboard & Analytics

  • Real-time statistics
  • Audit logging system
  • Activity tracking
  • Export capabilities

• 🌍 Internationalization (i18n)

  • Multi-language support (English, French, Arabic)
  • Paraglide.js integration
  • RTL layout support
  • Language switching

• 🎨 Modern UI/UX

  • Shadcn-svelte components
  • Tailwind CSS 4 with utility-first styling
  • Responsive design
  • Dark mode support (via mode-watcher)
  • Accessible components
  • Beautiful data tables

• 📧 Email Service

  • Resend integration
  • Email templates
  • Transactional emails

• 🔍 Audit Logging

  • Comprehensive action tracking
  • IP address and user agent logging
  • Metadata support
  • Filterable audit logs

🛠️ Technologies & Libraries

Core Framework

• Svelte 5 - The latest version with runes ($state, $derived, $effect)
• SvelteKit 2 - Full-stack framework with SSR and file-based routing
• TypeScript - Type-safe development

Database & ORM

• Prisma 7 - Next-generation ORM with driver adapters
• PostgreSQL - Robust relational database
• Prisma Adapter for PostgreSQL - Optimized database connections

Authentication & Security

• Auth.js (SvelteKit) - Complete authentication solution
• Prisma Adapter for Auth.js - Database session strategy
• bcryptjs - Password hashing

UI Components & Styling

• Shadcn-svelte - Beautiful, accessible component library
• Tailwind CSS 4 - Utility-first CSS framework
• Bits UI - Headless UI primitives
• Lucide Svelte - Beautiful icon library
• Svelte Sonner - Toast notifications

Forms & Validation

• SvelteKit Superforms - Form handling and validation
• Formsnap - Form component library
• Zod - Schema validation

Internationalization

• Paraglide.js - Compile-time i18n
• Inlang - Translation management

Email Service

• Resend - Modern email API

Development Tools

• Vite - Next-generation build tool
• tsx - TypeScript execution
• Svelte Check - Type checking

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+ (recommended: 20+)
• pnpm (recommended) or npm/yarn
• PostgreSQL 14+ (running locally or via cloud service)
• Git

Installation

1. Clone the repository

git clone https://github.com/SaiefBrahim/SvelterApp.git
cd SvelterApp

2. Install dependencies

pnpm install
# or
npm install

3. Set up environment variables

Copy the .env.example file to .env:

cp .env.example .env

Edit .env and configure the following variables:

# Database
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/svelterapp?schema=public"

# Auth.js Configuration
# Generate with: npx auth secret
AUTH_SECRET="your_auth_secret"
AUTH_TRUST_HOST=true

# Application
ENVIRONMENT="development"
PUBLIC_APP_NAME="Svelter App"
PUBLIC_APP_URL="http://localhost:5173"

# Resend Email Service (optional for development)
RESEND_API_KEY=
MAILER_ADDRESS="SvelterApp <[email protected]>"

Important: Generate a secure AUTH_SECRET:

npx auth secret

4. Set up the database

# Generate Prisma Client
pnpm db:generate

# Run database migrations
pnpm db:migrate

# Seed the database with initial data
pnpm db:seed

The seed script will create:

• System roles (SUPER_ADMIN, ADMIN, MANAGER, OPERATOR)
• Default permissions
• A super admin user (email: [email protected], password: admin123)
• Sample organization and users

5. Compile i18n messages

pnpm lang:compile

6. Start the development server

pnpm dev

The application will be available at http://localhost:5173

Default Login Credentials

After seeding the database, you can log in with:

• Email: [email protected]
• Password: admin123

⚠️ Important: Change the default password in production!

Available Scripts

📚 Documentation

Project Structure

svelterapp/
├── prisma/
│   ├── schema.prisma          # Database schema
│   ├── seed.ts                # Database seeding script
│   └── migrations/            # Database migrations
├── src/
│   ├── lib/
│   │   ├── components/        # Reusable components
│   │   │   ├── ui/           # Shadcn-svelte components
│   │   │   └── layout/       # Layout components
│   │   ├── server/
│   │   │   ├── auth/         # Authentication logic
│   │   │   ├── db/           # Database connection
│   │   │   ├── rbac/         # RBAC guards and permissions
│   │   │   └── services/     # Business logic services
│   │   └── utils/            # Utility functions
│   └── routes/
│       ├── (app)/            # Protected routes
│       ├── (auth)/           # Authentication routes
│       └── api/              # API endpoints
├── messages/                  # i18n translation files
├── static/                    # Static assets
└── project.inlang/           # Inlang configuration

RBAC System

The RBAC system is built on a hierarchical role structure:

1. SUPER_ADMIN (Level 4)

   • Global access across all organizations
   • Bypasses all permission checks
   • System-level administration

2. ADMIN (Level 3)

   • Full access within their organization
   • Can manage users, roles, invites, sessions
   • Organization settings management

3. MANAGER (Level 2)

   • Read access to users and roles
   • View active sessions
   • Limited operational access

4. OPERATOR (Level 1)

   • Minimal permissions
   • Basic profile access

Permissions

Permissions follow the resource:action pattern:

• users:create, users:read, users:update, users:delete, users:manage
• roles:read, roles:manage
• audit_logs:read
• invites:read, invites:manage
• sessions:read, sessions:manage
• organization_settings:read, organization_settings:update, organization_settings:manage

Adding New Permissions

1. Add permission to src/lib/server/rbac/permissions.ts
2. Add to database seed in prisma/seed.ts
3. Assign to roles in DEFAULT_ROLE_PERMISSIONS
4. Use in route guards: requirePermission(event, 'resource:action')

🤝 Contributing

We welcome contributions! SvelterApp is an open-source project, and we appreciate your help in making it better.

How to Contribute

1. Fork the repository

2. Create a feature branch

git checkout -b feature/amazing-feature

3. Make your changes

   • Follow the existing code style
   • Write clear commit messages
   • Add tests if applicable
   • Update documentation as needed

4. Commit your changes

git commit -m "Add amazing feature"

5. Push to the branch

git push origin feature/amazing-feature

6. Open a Pull Request

   • Provide a clear description of your changes
   • Reference any related issues
   • Include screenshots for UI changes

Development Guidelines

• Code Style: Follow TypeScript and Svelte best practices
• Type Safety: Maintain strict TypeScript types
• Components: Use Svelte 5 runes ($state, $derived, $effect)
• Styling: Use Tailwind CSS utility classes
• Components: Import from $lib/components/ui for UI components
• RBAC: Always use permission guards for protected routes
• i18n: Add translations for all user-facing strings

Reporting Issues

If you find a bug or have a feature request:

1. Check if the issue already exists
2. Create a new issue with:
   • Clear title and description
   • Steps to reproduce (for bugs)
   • Expected vs actual behavior
   • Environment details (OS, Node version, etc.)

Code of Conduct

Be respectful, inclusive, and constructive in all interactions.

📄 License

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

🙏 Acknowledgments

• Svelte team for the amazing framework
• Shadcn for the beautiful component library
• Auth.js for authentication
• Prisma for the excellent ORM
• All contributors and the open-source community

📞 Support

• Documentation: Check the inline code comments and this README
• Issues: GitHub Issues
• Discussions: GitHub Discussions