Web Application

Structure

layout.tsx

middleware.ts

.env.example

next.config.js

package.json

tsconfig.json

Key Technologies

Technology	Purpose
Next.js 15.1	React framework with App Router
React 19	UI library
TypeScript 5.7	Type safety
Material-UI 7.2	UI component library
Emotion	CSS-in-JS styling
React Query	Server state management
React Hook Form	Form management
Zod	Schema validation
Clerk	Authentication (primary)
Novu	Notification system
Mapbox	Map visualization

App Router Structure

Next.js 15 uses the App Router with React Server Components:

// Server Component (default)
// Can fetch data directly, no client-side JS
export default async function Page() {
  const data = await fetchData(); // Server-side
  return <Component data={data} />;
}

// Client Component
// Use "use client" directive for interactivity
'use client';
export function InteractiveComponent() {
  const [state, setState] = useState();
  return <button onClick={() => setState(...)}>Click</button>;
}

Route Groups

Parentheses (main) create route groups without affecting URL structure:

app/
├── (main)/           # Requires authentication
│   ├── layout.tsx   # Adds navigation
│   └── dashboard/   # URL: /dashboard
├── auth/            # Public routes
│   └── login/       # URL: /auth/login
└── api/             # API routes
    └── hello/       # URL: /api/hello

Running the Application

Development

cd apps/web
pnpm dev

Access at: http://localhost:3000

Build

cd apps/web
pnpm build

Production

cd apps/web
pnpm start

Environment Variables

Create .env.local in apps/web/:

apps/web/.env.local

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_LOG_LEVEL=debug
NEXT_PUBLIC_AUTH_STRATEGY=clerk

# API Configuration
NEXT_PUBLIC_API_URL=https://api.odysee.ai

# Authentication (Clerk)
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxx
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxx

# Mapbox
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=pk.xxxxxxxxxx

See Getting Started for complete setup.

Next: Learn about Storybook for component documentation.

On this page