This is still a work in progress

Create z1

An open-source starter kit with Tanstack Start, Supabase, Tailwind and Bun.
Based on Midday's v1.

What's included · Prerequisites · Getting Started ·

What's included

Tanstack Start - Framework
Turborepo - Build system
Biome - Linter, formatter
TailwindCSS v4 - Styling
Tanstack Query - Data fetching
Shadcn - UI components
TypeScript - Type safety
Supabase - Authentication, database, storage
React Email - Email templates (coming soon)
Resend - Email delivery (coming soon)
Trigger.dev - Background jobs (coming soon)

Directory Structure

.
├── apps                         # App workspace
│    ├── api                     # Supabase (API, Auth, Storage, Realtime, Edge Functions)
│    ├── web                     # Your landing page
│    ├── app                     # Your app
│    └── ...
├── packages                     # Shared packages between apps
│    ├── email                   # React email library
│    ├── jobs                    # Trigger.dev background jobs
│    ├── logger                  # Logger library
│    ├── supabase                # Supabase - Queries, Mutations, Clients
│    └── ui                      # Shared UI components (Shadcn)
├── tooling                      # are the shared configuration that are used by the apps and packages
│    └── typescript              # Shared TypeScript configuration
├── .cursorrules                 # Cursor rules specific to this project
├── biome.json                   # Biome configuration
├── turbo.json                   # Turbo configuration
├── LICENSE
└── README.md

Prerequisites

Bun
Docker
Supabase

Getting Started

Clone this repo locally with the following command:

bunx degit guidovizoso/z1 z1

1. Install dependencies using bun:

bun i

2. Copy .env.example to .env and update the variables.

# Copy .env.example to .env for each app
cp apps/api/.env.example apps/api/.env
cp apps/web/.env.example apps/web/.env
cp apps/app/.env.example apps/app/.env

4. Start the development server from either bun or turbo:

bun dev // starts everything in development mode (web, app, api, email)
bun dev:web // starts the website in development mode
bun dev:app // starts the app in development mode
bun dev:api // starts the api in development mode

// Database
bun sb:dev // starts the supabase database in development mode
bun sb:migrate // run migrations
bun sb:seed // run seed
bun sb:types // generate TS types
bun sb:reset // reset the database and apply migrations

Caveats

Tanstack Start

Tanstack Start is currently in beta and being a new project some best practices and patterns may change with time. This is a good project to experiment with ways to use the framework so feel free to contribute.

Installing a new Shadcn component

1. Install from Shadcn CLI

cd packages/ui
bunx --bun shadcn@canary add COMPONENT_NAME

2. Update the exports in packages/ui/package.json

"exports": {
  "./COMPONENT_NAME": "./src/components/COMPONENT_NAME.tsx"
}

3. Update the imports in the components

// Replace
import { cn } from "/lib/utils";

// With
import { cn } from "../lib/utils";