Frontend Overview

The Enclavr frontend is a modern React 19 application built with Next.js 16, featuring real-time chat and voice communication capabilities.

Key Statistics

Metric	Value
Framework	Next.js 16.1.6
React	19.2.4
Components	36 UI + 34 feature
Custom Hooks	27
API Endpoints	230+
Routes	19
Test Files	67

Project Structure

frontend/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── login/              # Login page
│   │   ├── register/          # Registration page
│   │   ├── rooms/             # Main rooms page
│   │   ├── dm/                # Direct messages
│   │   ├── explore/           # Room discovery
│   │   ├── account/           # Account management
│   │   ├── settings/           # App settings
│   │   ├── notifications/      # Notification center
│   │   ├── forgot-password/    # Password recovery
│   │   ├── reset-password/    # Password reset
│   │   ├── two-factor/        # 2FA verification
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Home (redirects)
│   ├── components/             # 70 React components
│   │   ├── Chat.tsx
│   │   ├── VoiceChat.tsx
│   │   ├── MessageItem.tsx
│   │   └── ... (51+ more)
│   ├── hooks/                  # Custom React hooks
│   │   ├── useWebRTC.ts       # Voice chat
│   │   ├── useChat.ts         # Chat WebSocket
│   │   ├── usePresence.ts     # Presence tracking
│   │   ├── useDM.ts           # Direct messages
│   │   └── ... (22 more)
│   ├── lib/
│   │   ├── api.ts             # Main API client
│   │   ├── store.ts           # Zustand stores
│   │   └── webrtc/            # WebRTC utilities
│   └── types/
│       └── index.ts           # TypeScript interfaces
├── e2e/                       # Playwright tests
├── package.json
└── next.config.js

Routes

Path	Description
`/`	Root - redirects to /login or /rooms
`/login`	Login page
`/register`	Registration page
`/rooms`	Main rooms page (voice + chat)
`/dm`	Direct messages page
`/explore`	Explore rooms and discovery
`/account`	User account management
`/settings`	Application settings
`/notifications`	Notification center
`/forgot-password`	Password recovery request
`/reset-password`	Password reset with token
`/two-factor`	Two-factor authentication verification
`/appearance`	Theme and appearance customization
`/keyboard-shortcuts`	Keyboard shortcuts reference
`/profile`	User profile page
`/not-found`	Custom 404 page
`/loading`	Loading state page
`/error`	Error boundary page
`/global-error`	Global error boundary page

Error Monitoring (Sentry)

The frontend integrates Sentry for error tracking and performance monitoring.

Configuration

Setting	Value
Client DSN	`NEXT_PUBLIC_SENTRY_DSN` env var
Environment	`NEXT_PUBLIC_SENTRY_ENVIRONMENT` (default: development)
Release	Git commit SHA or VERSION env var
Traces Sample Rate	100%
Replay Sample Rate	10% sessions, 100% on error

Error Filtering

The beforeSend hook automatically drops noise events:

ChunkLoadError - build/deploy timing issues
Failed to fetch / NetworkError - network connectivity
HTTP 409 conflicts - optimistic update race conditions
/_next/webpack-hmr - hot reload errors
ResizeObserver errors - browser noise

API Error Tracking

The API client (base.ts) automatically tracks:

5xx errors: captured as exceptions with severity: high
4xx errors: captured as messages with severity: medium
Slow requests (>3000ms): captured with slow_request tag
Network errors: captured as exceptions with severity: error

Components

SentryProvider - wraps app in Sentry ErrorBoundary with styled fallback UI
withSentry(Component) - HOC for per-component error boundaries

Development Commands

# Install dependencies
bun install

# Start dev server
bun run dev

# Run tests
bun run test:run
bun run test:e2e

# Lint
bun run lint