create-t3-supabase-zustand/README.md

Create web application with the t3 stack, Supabase, and Zustand

<p align="center">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/t3-oss/create-t3-app/99286f37324330ecdf75132fae1f246440a88035/www/public/images/t3-light.svg">
  <img src="https://raw.githubusercontent.com/t3-oss/create-t3-app/99286f37324330ecdf75132fae1f246440a88035/www/public/images/t3-dark.svg" width="130" alt="Logo for T3">
</picture>
</p>

<h1 align="center">
  create-t3-supabase-zustand
</h1>

<p align="center">
  Interactive CLI to start a full-stack typesafe Next.js app with Supabase and Zustand.
</p>

<p align="center">
  Get started with the <a rel="noopener noreferrer" target="_blank" href="https://init.tips">T3 Stack</a> enhanced with Supabase and Zustand by running <code>npm create t3-supabase-zustand@latest</code>
</p>

<div align="center">

[![PRs-Welcome][contribute-image]][contribute-url]

</div>

## Table of contents

- <a href="#about">The T3 Stack with Supabase and Zustand</a>
- <a href="#axioms">T3 Axioms</a>
- <a href="#getting-started">Getting Started</a>
- <a href="#contributors">Contributors</a>

<h2 id="about">The T3 Stack with Supabase and Zustand</h2>

The _"T3 Stack with Supabase and Zustand"_ is a web development stack based on the original T3 Stack by [Theo](https://twitter.com/t3dotgg), but with Supabase and Zustand instead of Prisma and NextAuth. It focuses on **simplicity**, **modularity**, and **full-stack typesafety**. It consists of:

- [Next.js](https://nextjs.org)
- [tRPC](https://trpc.io)
- [Tailwind CSS](https://tailwindcss.com)
- [TypeScript](https://typescriptlang.org)
- [Supabase](https://supabase.com)
- [Zustand](https://github.com/pmndrs/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.

<h2 id="axioms">T3 Axioms</h2>

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.

<h2 id="getting-started">Getting Started</h2>

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

### npm

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

### yarn

```bash
yarn create t3-supabase-zustand
```

### pnpm

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

### bun

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

<h2 id="why-supabase-zustand">Why Supabase and Zustand?</h2>

### 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)

<h2 id="supabase-zustand-integration">Supabase and Zustand Integration</h2>

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

<h2 id="contributors">Contributors</h2>

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