Frontend Development¶

The Meet frontend is a TypeScript/React SPA built with Vite.

Tech stack¶

Running in dev mode¶

# Start backend services
make run-backend

# Install and start the frontend dev server
make frontend-development-install
make run-frontend-development

# Or directly
cd src/frontend
npm install
npm run dev

Dev server runs at http://localhost:5173 with hot module replacement.

Project structure¶

src/frontend/src/
├── api/              # Typed fetch wrappers for backend endpoints
├── components/       # Shared/reusable components
├── features/
│   ├── conference/   # In-meeting UI
│   │   ├── controls/ # Mic, camera, screen share, reactions
│   │   ├── layout/   # Video grid, speaker view
│   │   ├── chat/     # Chat panel
│   │   └── recording/# Recording / transcription panels
│   ├── home/         # Home page, room creation
│   └── settings/     # Settings panels
├── hooks/            # Custom React hooks
├── stores/           # Zustand state stores
├── i18n/             # Translation files (en.json, fr.json, …)
└── App.tsx           # Root component + routing

LiveKit connection¶

import { LiveKitRoom, VideoConference } from '@livekit/components-react';

// Token and URL come from GET /api/v1.0/rooms/{id}/ → response.livekit.token / .url
<LiveKitRoom token={token} serverUrl={url} connect>
  <VideoConference />
</LiveKitRoom>

State management¶

import { create } from 'zustand';

interface ConferenceStore {
  isRecording: boolean;
  setIsRecording: (v: boolean) => void;
}

export const useConferenceStore = create<ConferenceStore>((set) => ({
  isRecording: false,
  setIsRecording: (v) => set({ isRecording: v }),
}));

Accessibility¶

Meet uses React Aria for accessible component primitives. Rules:

• All interactive elements must have an accessible name (aria-label or visible text)
• State changes (mute/unmute, recording) must be announced via ARIA live regions
• Focus management: opening dialogs moves focus in; closing returns focus to the trigger
• Test every new interactive element with keyboard navigation

import { Button } from 'react-aria-components';

<Button
  aria-label={isMuted ? "Unmute microphone" : "Mute microphone"}
  aria-pressed={isMuted}
  onPress={toggleMute}
>
  {isMuted ? <MicOffIcon /> : <MicIcon />}
</Button>

Internationalization¶

1. Add the key to en.json and fr.json (minimum)
2. Use in components:

const { t } = useTranslation();
<span>{t('controls.mute')}</span>

Other languages are managed via Crowdin.

Running tests¶

make test-front

# Or directly
cd src/frontend
npm test
npm run test:coverage

Linting and formatting¶

make lint-front

# Or
cd src/frontend
npm run lint
npm run format

Build-time environment variables¶

Set as Docker build arguments (VITE_ prefix):

In the published lasuite/meet-frontend image, the frontend makes API calls using relative URLs (/api/v1.0/...). This means it works correctly as long as the SPA and the API are served from the same origin, which is exactly what the routing nginx in the frontend container provides.