PRESIM Frontend

The web client for PRESIM — a scenario-based public speaking rehearsal platform that places users inside a lifelike virtual environment with responsive AI audience behaviour.

Tech Stack

• React 19 + TypeScript (strict mode)
• Vite — build tool
• Tailwind CSS v4 + shadcn/ui — styling and component library
• TanStack Query — server state management
• Zustand — client state management
• Axios — HTTP client
• react-i18next — internationalization (English)
• React Router — client-side routing
• Vitest + Testing Library + MSW — testing

Project Structure

src/
├── api/                  # Axios HTTP helpers (getRequest, postRequest, etc.)
├── components/           # Reusable UI components
│   ├── ui/               # Base components (Button, Card, Badge, Slider, etc.)
│   └── __tests__/        # Component tests
├── constants/            # Enums for query keys and API paths
├── hooks/                # TanStack Query hooks (useScenarios, useScenarioBySlug)
├── i18n/                 # i18next config + English locale
├── lib/                  # Utility functions
├── pages/                # Route page components
│   └── __tests__/        # Page tests
├── queryOptions/         # TanStack Query option factories
├── services/             # API service functions (consumed by query hooks)
├── store/                # Zustand stores (scenario selection, theme)
├── test/                 # Test infrastructure (MSW handlers, fixtures, utils)
└── types/                # TypeScript enums and interfaces

Getting Started

Prerequisites

• Node.js 22+
• PRESIM backend running on http://localhost:3000

Setup

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Start development server
npm run dev

The app will be available at http://localhost:5173.

Environment Variables

Variable	Description	Default
VITE_API_BASE_URL	Backend API base URL	http://localhost:3000/api/v1

Scripts

Command	Description
npm run dev	Start dev server with HMR
npm run build	Type check + production build
npm run test	Run all tests
npm run test:watch	Run tests in watch mode
npm run test:cov	Run tests with coverage report
npm run lint	Lint with ESLint
npm run preview	Preview production build locally

Testing

Tests use Vitest with Testing Library for component testing and MSW (Mock Service Worker) for API mocking.

# Run all tests
npm run test

# Run with coverage
npm run test:cov

# Watch mode
npm run test:watch

Test Structure

• src/**/__tests__/ — Co-located test files
• src/test/fixtures.ts — Shared mock data
• src/test/handlers.ts — MSW request handlers
• src/test/server.ts — MSW server setup
• src/test/test-utils.tsx — Render helpers with providers (QueryClient, Router, i18n)

Features

• Scenario Library — Browse 8 speaking scenarios with category filtering
• Scenario Detail — View audience composition, behaviour rules, success criteria
• Environment Customizer — Adjust audience size, difficulty, VIP presence, lighting, and more
• Pre-Session Briefing — Review session configuration before starting
• Light/Dark/System Theme — Three-mode theme toggle
• Responsive Design — Mobile-first with collapsible sidebar
• Skeleton Loading — Shimmer placeholders during data fetching
• Error Recovery — Error displays with retry functionality
• i18n Ready — All UI strings externalized for translation