Overview

Tech stack, patterns, and data flow for the full-stack hub.

FSH Creative Hub is a full-stack Next.js application backed by Supabase Postgres, Auth, Storage, and Realtime — deployed on Vercel.

Tech stack

Layer	Technology
Framework	`Next.js` 16 (App Router), React 19, TypeScript
Styling	Tailwind CSS v4, hub design tokens
`UI`	shadcn`/ui` (base-nova), Framer Motion
Auth & DB	Supabase (@supabase`/ssr`)
Editor	Monaco (text documents)
DnD	@dnd-kit (boards, task lists)
Deploy	Vercel

Core patterns

Server Components fetch data on the server with the Supabase server client.
Server Actions handle mutations (create project, post comment, complete task).
Client Components power interactivity (overlays, drag-and-drop, realtime subscriptions).
RLS on every hub_* table enforces access at the database layer.

Hub modules share one authenticated shell

Data flow

text

Browser → Next.js middleware (session refresh)
       → Server Component / Server Action
       → Supabase client (anon key + user JWT)
       → Postgres (RLS) / Storage / Realtime