Tech Stack
For a better understanding of the codebase, let's first go over the tools and libraries that supastarter uses and why we chose them.
Turborepo
TurboRepo is a monorepo tool that helps you manage your project's dependencies and scripts. We chose a monorepo setup to make it easier to manage to structure the different features and enable code sharing between the different packages. It also allows you to easily add further apps (like a mobile app or a different frontend) to the project and reuse the existing codebase.
Nuxt
Nuxt is one of the most popular Vue frameworks. We use it for the frontend of supastarter and also utilize its server capabilities to serve the API for the application.
Prisma
Prisma is an ORM (Object-Relational Mapping) tool that helps you access your database in a type-safe way. We use Prisma to define our database schema and to generate the necessary TypeScript types for our application. It also helps us to write queries in a type-safe way and to easily migrate our database schema.
supastarter also includes Drizzle ORM schemas as an alternative ORM option, supporting PostgreSQL, SQLite, and MySQL.
Better Auth
Better Auth is a modern authentication library for TypeScript. It handles email/password login, social OAuth (Google, GitHub), magic links, passkeys, two-factor authentication, and organization management out of the box.
oRPC & Hono
oRPC is a modern, type-safe RPC framework for TypeScript. We use it to define API endpoints in a type-safe way with automatic input validation via Zod. It also generates OpenAPI documentation automatically.
Hono is a lightweight web framework that handles HTTP routing, CORS, and middleware. It serves as the HTTP layer for the API.
Tanstack Vue Query
Tanstack Vue Query provides powerful data fetching, caching, and state management for the frontend. It handles server state synchronization, caching, and SSR hydration.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that helps you build custom designs without writing any CSS. We use it to style the frontend of supastarter and to create a consistent design system.
Nuxt UI
Nuxt UI is a component library built on top of Tailwind CSS that provides a set of fully styled, accessible components. It powers the UI of supastarter and provides a consistent design system.
nuxt/content
nuxt/content is a markdown-based CMS that helps you manage your content in a structured way within your codebase. We use it to manage the content of the blog and other content pages (like the legal pages) in the marketing app.
VitePress
VitePress is a static site generator powered by Vite and Vue. We use it for the documentation app, providing a fast and customizable documentation experience.