ClassCompass Frontend

React SPA frontend for the ClassCompass platform.

Core Responsibilities

The frontend repository manages the client-side user interface for the application.

• User Interface: Renders the pages using components from Shadcn UI and Tailwind CSS.
• Routing and Forms: Handles application navigation and state tracking via TanStack Router, TanStack Query, TanStack Form, and includes Zod validation.
• API Interaction: Communicates with the backend server using automated, type-safe data-fetching hooks generated by Orval.
• Interactive Map: Displays interactive school floor plans by rendering SVG assets connected to real-time room data.

Start locally

Copy over the env example to .env and edit the values where needed.

pnpm install

pnpm run dev

Generate API client (if needed):

pnpm run generate

Links

• ClassCompassFrontend
• ClassCompassServer
• ClassCompassInfrastructure