Portfolio

My personal portfolio website

• React 19 + React Compiler
• TanStack Start + Router + Query
• Tailwind CSS v4 + shadcn/ui
• Drizzle ORM + PostgreSQL
• Better Auth

Getting Started

1. Use this template or clone this repository.

2. Install dependencies:

   bun install # npm install

3. Create a .env file based on .env.example.

4. Push the schema to your database with drizzle-kit:

   bun db push # npm run db push

   https://orm.drizzle.team/docs/migrations

5. Run the development server:

   bun dev # npm run dev

   The development server should be now running at http://localhost:3000.

Issue watchlist

• React Compiler docs, Working Group - React Compiler is still in beta. You can disable it in app.config.ts if you prefer.
• TanStack/router#2863 - TanStack Start is currently in beta and may still undergo major changes.
• shadcn-ui/ui#6714 - We're using the canary version of shadcn/ui for Tailwind v4 support.

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 and signin page with your own UI. You can use shadcn/ui login blocks or @daveyplate/better-auth-ui as a starting point.

Goodies

Scripts

These scripts in package.json use pnpm by default, but you can modify them to use your preferred package manager.

• auth:generate - Regenerate the auth db schema if you've made changes to your Better Auth config.
• 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.

Utilities

• auth-guard.ts - Sample middleware for forcing authentication on server functions. (see #5)

Building for production

Read the hosting docs for information on how to deploy your TanStack Start app.