StarfortStarfort
Sign in

Project Setup & Progress

Stack Overview
  • Framework: Next.js App Router, TypeScript, Tailwind v4
  • API: tRPC v11
  • Auth: Clerk
  • DB: Drizzle ORM + Neon Postgres
  • UI: shadcn/ui
Milestones
  • [x] Scaffold T3 with Tailwind, tRPC, Drizzle
  • [x] Initialize shadcn/ui and add base components
  • [x] Add Clerk, env, provider, middleware
  • [x] Create sign-in/sign-up routes
  • [x] Protected dashboard route
  • [x] Configure Neon and push Drizzle schema
  • [x] Create project docs page
UI Policy

100% shadcn/ui for all UI primitives and patterns unless a component does not exist in the registry and must be custom-built.

Components currently used: button, input, card, avatar, navigation-menu, dropdown-menu, separator, sheet, tooltip, sidebar.

Detailed Steps
  1. Scaffolded app with `create-t3-app` using Drizzle, tRPC, Tailwind, App Router.
  2. Installed `@clerk/nextjs`; set provider in `src/app/layout.tsx` with URLs.
  3. Added middleware using `clerkMiddleware` and protected `/dashboard`.
  4. Created sign-in/up pages using Clerk components.
  5. Integrated Clerk into tRPC context; added `protectedProcedure`.
  6. Provisioned Neon; added `DATABASE_URL` and ran `npm run db:push`.
  7. Extended Drizzle schema with `users`, `organizations`, `memberships`.
  8. Initialized shadcn/ui; added `button`, `input`, `card`, `avatar`.
  9. Added app shell header and dashboard layout.
Layout Measurements
  • Header: sticky, height 56px (h-14), horizontal padding 16px (px-4), md 24px (md:px-6).
  • Sidebar: positioned below header via top-14 and provider pt-14.
  • Sidebar alignment: group label and items left padding pl-3, md:pl-4 to align with logo text.
  • Content wrapper: dashboard page content padded p-4 md:p-6.
  • Policy: do not change these values unless you adjust both header and sidebar together.