Table of contents

• The T3 Stack with Supabase and Zustand
• T3 Axioms
• Getting Started
• Contributors

The "T3 Stack with Supabase and Zustand" is a web development stack based on the original T3 Stack by Theo, but with Supabase and Zustand instead of Prisma and NextAuth. It focuses on simplicity, modularity, and full-stack typesafety. It consists of:

• Next.js
• tRPC
• Tailwind CSS
• TypeScript
• Supabase
• Zustand

So... what is create-t3-supabase-zustand? A template?

Kind of? create-t3-supabase-zustand is a CLI built by forking the original create-t3-app to streamline the setup of a modular T3 Stack app with Supabase and Zustand. This means each piece is optional and the "template" is generated based on your specific needs.

This is NOT an all-inclusive template. We expect you to bring your own libraries that solve the needs of YOUR application.

We'll be frank - this is an opinionated project. We share a handful of core beliefs around building and we treat them as the basis for our decisions.

1. Solve Problems

It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that. Everything added to create-t3-supabase-zustand should solve a specific problem that exists within the core technologies included.

2. Bleed Responsibly

We love our bleeding edge tech. The amount of speed and honestly fun that comes out of new shit is really cool. We think it's important to bleed responsibly using riskier tech in the less risky parts.

3. Typesafety Isn't Optional

The stated goal of create-t3-supabase-zustand is to provide the quickest way to start a new full-stack typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of create-t3-supabase-zustand is a decision that should be made in a different project.

To scaffold an app using create-t3-supabase-zustand run any of the following four commands and answer the command prompt questions:

npm

npm create t3-supabase-zustand@latest

yarn

yarn create t3-supabase-zustand

pnpm

pnpm create t3-supabase-zustand@latest

bun

bun create t3-supabase-zustand@latest

Supabase

Supabase is an open-source Firebase alternative that provides a PostgreSQL database, authentication, storage, and real-time subscriptions. It's a great choice for modern web applications because:

• PostgreSQL: Built on top of PostgreSQL, giving you the full power of SQL
• Authentication: Built-in auth with multiple providers (email/password, OAuth, phone, etc.)
• Storage: File storage with access control
• Real-time: Real-time subscriptions for database changes
• Edge Functions: Run serverless functions at the edge
• Type Safety: Generate TypeScript types from your database schema

Zustand

Zustand is a small, fast, and scalable state management solution. It's a great alternative to more complex state management libraries because:

• Simple API: Minimal boilerplate with a straightforward API
• Middleware: Supports middleware like immer for immutable state updates
• Performance: Optimized for performance with minimal re-renders
• TypeScript: First-class TypeScript support
• Devtools: Redux DevTools integration
• Small Size: Tiny bundle size (~1KB)

The integration between Supabase and Zustand in this template provides:

• Authentication state management with Zustand
• Real-time data syncing from Supabase to Zustand stores
• Type-safe database access
• Protected routes based on authentication state
• Middleware for handling auth state changes

We 💖 contributors! Feel free to contribute to this project.