Skip to content

React

React is the UI framework used for building the single-page application. The app uses functional components, React Router for navigation, and a component hierarchy that follows an atoms/molecules pattern.

Key aspects in this project

  • Entry point: app/frontend/src/index.tsx mounts the React app and wraps it in a Material UI ThemeProvider and a custom ConfirmationProvider.
  • Routing: react-router-dom is used for client-side routing — routes and pages are implemented under app/frontend/src/pages.
  • Components: app/frontend/src/components is organized into atoms and molecules (small reusable UI elements and composed widgets). Examples:
  • Atoms: Button, TextField, Loader, GlobalDialog, GlobalConfirmationDialog, DropdownSelection, etc.
  • Molecules: Sidebar, DashboardLayout, CalendarTable, EventCreationDialog, etc.
  • State management: lightweight stores implemented with zustand live under app/frontend/src/stores (e.g. EventsStore.tsx, RoomsStore.tsx, useAuthStore.tsx). These encapsulate API interactions and local state.
  • API: app/frontend/src/helpers/ApiHelper.tsx centralizes HTTPS calls to the backend API (configured via VITE_API_URL in app/frontend/src/config.tsx).

Testing

  • Unit tests use vitest and testing-library for React (tests are under app/frontend/src/tests).