https://github.com/dotnize/react-tanstarter
minimal TanStack Start template with React 19, Better Auth, Drizzle ORM, shadcn/ui
https://github.com/dotnize/react-tanstarter
auth better-auth boilerplate drizzle postgresql react router saas shadcn shadcn-ui start starter starter-kit tailwind tailwindcss tanstack tanstack-router tanstack-start template
Last synced: 11 days ago
JSON representation
minimal TanStack Start template with React 19, Better Auth, Drizzle ORM, shadcn/ui
- Host: GitHub
- URL: https://github.com/dotnize/react-tanstarter
- Owner: dotnize
- Created: 2024-08-23T05:08:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T12:16:31.000Z (16 days ago)
- Last Synced: 2025-04-12T11:13:34.370Z (11 days ago)
- Topics: auth, better-auth, boilerplate, drizzle, postgresql, react, router, saas, shadcn, shadcn-ui, start, starter, starter-kit, tailwind, tailwindcss, tanstack, tanstack-router, tanstack-start, template
- Language: TypeScript
- Homepage:
- Size: 182 KB
- Stars: 372
- Watchers: 9
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [React TanStarter](https://github.com/dotnize/react-tanstarter)
A minimal starter template for 🏝️ TanStack Start.
- [React 19](https://react.dev) + [React Compiler](https://react.dev/learn/react-compiler)
- TanStack [Start](https://tanstack.com/start/latest) + [Router](https://tanstack.com/router/latest) + [Query](https://tanstack.com/query/latest)
- [Tailwind CSS v4](https://tailwindcss.com/) + [shadcn/ui](https://ui.shadcn.com/)
- [Drizzle ORM](https://orm.drizzle.team/) + PostgreSQL
- [Better Auth](https://www.better-auth.com/)
## Getting Started
1. [Use this template](https://github.com/new?template_name=react-tanstarter&template_owner=dotnize) or clone this repository.
2. Install dependencies:
```bash
pnpm install # npm install
```
3. Create a `.env` file based on [`.env.example`](./.env.example).
4. Push the schema to your database with drizzle-kit:
```bash
pnpm db push # npm run db push
```
https://orm.drizzle.team/docs/migrations
5. Run the development server:
```bash
pnpm dev # npm run dev
```
The development server should be now running at [http://localhost:3000](http://localhost:3000).
## Issue watchlist
- [React Compiler docs](https://react.dev/learn/react-compiler), [Working Group](https://github.com/reactwg/react-compiler/discussions) - React Compiler is still in beta. You can disable it in [app.config.ts](./app.config.ts#L15) if you prefer.
- https://github.com/TanStack/router/discussions/2863 - TanStack Start is currently in beta and may still undergo major changes.
## Auth
Better Auth is currently configured for OAuth with GitHub, Google, and Discord, but can be easily modified to use other providers.
If you want to use email/password authentication or change providers, update the [auth config](./src/lib/server/auth.ts#L36) and [signin page](./src/routes/signin.tsx) with your own UI. You can use [shadcn/ui login blocks](https://ui.shadcn.com/blocks/login) as a starting point.
## Goodies
#### Scripts
These scripts in [package.json](./package.json#L5) use **pnpm** by default, but you can modify them to use your preferred package manager.
- **`auth:generate`** - Regenerate the [auth db schema](./src/lib/server/schema/auth.schema.ts) if you've made changes to your Better Auth [config](./src/lib/server/auth.ts).
- **`db`** - Run drizzle-kit commands. (e.g. `pnpm db generate` to generate a migration)
- **`ui`** - The shadcn/ui CLI. (e.g. `pnpm ui add button` to add the button component)
- **`format`** and **`lint`** - Run Prettier and ESLint.
- **`deps`** - Selectively upgrade dependencies via npm-check-updates.
#### Utilities
- [`auth-guard.ts`](./src/lib/middleware/auth-guard.ts) - Sample middleware for forcing authentication on server functions. ([see #5](https://github.com/dotnize/react-tanstarter/issues/5))
- [`ThemeToggle.tsx`](./src/lib/components/ThemeToggle.tsx) - A simple component to toggle between light and dark mode. ([#7](https://github.com/dotnize/react-tanstarter/issues/7))
## Building for production
Read the [hosting docs](https://tanstack.com/start/latest/docs/framework/react/hosting) for information on how to deploy your TanStack Start app.
## Acknowledgements
- [nekochan0122/tanstack-boilerplate](https://github.com/nekochan0122/tanstack-boilerplate) - A batteries-included TanStack Start boilerplate that inspired some patterns in this template. If you're looking for a more feature-rich starter, check it out!
- [AlexGaudon/tanstarter-better-auth](https://github.com/AlexGaudon/tanstarter-better-auth) for his own better-auth implementation.