Frontend Architecture
Overview of the Next.js frontend application structure.
Directory Structure
frontend/ ├── app/ # Next.js App Router pages │ ├── layout.tsx # Root layout │ ├── page.tsx # Landing page │ ├── docs/ # Documentation pages │ ├── home/ # Authenticated home │ ├── notebook/[id]/ # Notebook pages │ └── settings/ # Settings page ├── components/ # React components │ ├── ui/ # shadcn/ui components │ ├── docs/ # Docs-specific components │ └── landing/ # Landing page components ├── hooks/ # Custom React hooks ├── lib/ # Utilities and helpers │ ├── api/ # API client functions │ └── analytics/ # Analytics integrations └── public/ # Static assets
Next.js App Router
The frontend uses Next.js 14 with the App Router for React Server Components, Server-Side Rendering, and Static Site Generation.
Server Components
Default for pages. Data fetched on server for better performance and SEO.
Client Components
Use 'use client' for interactive components with state and hooks.
State Management
Server State
React Query (TanStack Query) for managing server state like notebooks, documents, and chat messages.
Client State
React useState/useReducer for UI state, localStorage for preferences.
Theming
Dark/Light mode support using next-themes with CSS variables. The theme is configurable in Tailwind and persists across sessions.
Authentication
Supabase Auth integration with session management. Uses HTTP-only cookies for secure token storage with automatic refresh.
API Communication
REST API calls through typed functions in lib/api/. Supports both regular and streaming requests for chat responses.