create-t3-supabase-zustand

Interactive CLI to start a full-stack typesafe Next.js app with Supabase and Zustand.

Get started with the T3 Stack enhanced with Supabase and Zustand by running npm create t3-supabase-zustand@latest

Table of contents

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

The T3 Stack with Supabase and Zustand

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

$3

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.

T3 Axioms

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.

$3

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.

$3

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

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.

Getting Started

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

$3

``bash
npm create t3-supabase-zustand@latest
`

$3

`bash
yarn create t3-supabase-zustand
`

$3

`bash
pnpm create t3-supabase-zustand@latest
`

$3

`bash
bun create t3-supabase-zustand@latest
``

Why Supabase and Zustand?

$3

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

$3

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)

Supabase and Zustand Integration

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

Contributors

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

[contribute-url]: https://github.com/t3-oss/create-t3-app/blob/main/CONTRIBUTING.md
[contribute-image]: https://img.shields.io/badge/PRs-welcome-blue.svg