Modernstack Saas

screenshot of Modernstack Saas
svelte
vite
tailwind
bits-ui
convex

A modern SaaS template/boilerplate built with SvelteKit, Convex, Better Auth, and shadcn-svelte. Includes subscriptions, auth, user & admin dashboard, user settings, and more.

Overview

The ModernStack SaaS Starter combines the power of SvelteKit, Convex, and Better Auth to create a robust foundation for building scalable and efficient software as a service applications. Showcasing a collection of modern features, this template is designed specifically for developers looking to expedite their SaaS projects without compromising on quality or functionality. From user management to seamless payment integration, the ModernStack provides an advanced toolset that enhances the development experience while ensuring a polished final product.

With technologies like Tailwind CSS and Lucide for UI design, the template brings beautiful and accessible interfaces to life. It's clear that this starter was built with both developers and end-users in mind, making it not only easy to use but also attractive and responsive across devices.

Features

  • Authentication System: Provides email/password authentication along with Google OAuth support, ensuring a secure login process and easy access for users.

  • User Management: Includes features for users to manage their profiles, such as avatar uploads and account information management via Convex storage.

  • UI Components: Comes with a well-designed dashboard equipped with charts, data tables, and sidebar navigation that meets modern usability standards while offering dark/light mode options.

  • Developer Experience: Utilizes TypeScript throughout for type safety, boasts hot module replacement, and is equipped with ESLint & Prettier configurations for a smooth development workflow.

  • Easy Setup Instructions: Clear guidelines for prerequisites and installation, enabling developers to get started quickly with both SvelteKit and Convex.

  • Roadmap for Future Improvements: Includes plans for multi-tenancy support, rate limiting, and enhanced analytics on the admin dashboard to further expand its capabilities.

  • Transactional Email Services: Integrates with Resend for smooth transactional email workflows like password resets and user verifications.

  • GitHub Actions CI/CD Integration: Ensures code quality checks and streamlined deployments to Cloudflare, enhancing project robustness.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

bits-ui
Bits UI

Bits UI is a headless component library for Svelte that provides unstyled, accessible UI primitives. It powers shadcn-svelte and offers a foundation for building custom component libraries with full accessibility support in the Svelte ecosystem.

convex
Convex

Convex is a fullstack TypeScript development platform that provides a reactive database, serverless functions, and real-time sync out of the box. It simplifies backend development with automatic caching, optimistic updates, and type-safe queries.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

zod
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.