Next 16 Event Hub

A real-time conference companion app exploring Async React patterns with Cache Components and streaming. Attendees can browse sessions, post comments, ask and upvote questions, and favorite sessions. Fork and deploy it for your own conference.

Built with Next.js 16, React 19, Tailwind CSS v4, shadcn/ui (Base UI), and Prisma.

Getting Started

pnpm install
pnpm run prisma.push
pnpm run prisma.seed
pnpm run dev

Open http://localhost:3000 in your browser.

Project Structure

app/                      # Pages and layouts
components/
  common/                 # Shared utility components
  design/                 # Action prop components
  ui/                     # shadcn/ui primitives
data/
  actions/                # Server Actions
  queries/                # Data fetching with cache()
types/                    # Shared types derived from query return types
lib/                      # Utility functions and hooks
prisma/                   # Schema and seed data

• components/ui — shadcn/ui components. Add with npx shadcn@latest add <component-name>
• components/design — Components that expose action props and handle async coordination internally (BottomNav, ChipGroup, SubmitButton)
• components/common — Shared utility components without complex async logic

Every route folder should contain everything it needs. Components and functions live at the nearest shared space in the hierarchy.

Naming: PascalCase for components, kebab-case for folders, camelCase for functions/hooks. Suffix transition-based functions with "Action".

Key Patterns

Cache Components: Uses cacheComponents: true to statically render server components that don't access dynamic data. Keep pages non-async and push dynamic data access into <Suspense> boundaries to maximize the static shell.

Async React: Replace manual isLoading/isError state with React 19's coordination primitives — useTransition for tracking async work, useOptimistic for instant feedback, Suspense for loading boundaries, and use() for reading promises during render.

Development Flow

• Fetching data — Queries in data/queries/, wrapped with cache(). Await in Server Components directly.
• Mutating data — Server Actions in data/actions/ with "use server". Invalidate with refresh(). Use useOptimistic for instant feedback.
• Caching — Add "use cache" with cacheTag() to pages, components, or functions to include them in the static shell.
• Errors — error.tsx for boundaries, not-found.tsx + notFound() for 404s.

Database

Uses Prisma with PostgreSQL.

pnpm run prisma.push     # Push schema to DB
pnpm run prisma.seed     # Seed with session data
pnpm run prisma.studio   # Open Prisma Studio

Development Tools

Uses ESLint and Prettier with format-on-save in VS Code. Configuration in eslint.config.mjs and .prettierrc.

Deployment

pnpm run build

See the Next.js deployment docs for more details.