Skip to content

README.md

Latest commit

 

History

History
96 lines (73 loc) · 2.99 KB

README.md

File metadata and controls

96 lines (73 loc) · 2.99 KB

DraftDream Backoffice

Administrative console for managing DraftDream operational data and catalogs.

Scope

The backoffice targets admin and internal management workflows:

  • Identity: User administration and coach-athlete link management
  • Catalog: Global template management (programs, sessions, exercises, meals, types)
  • Tracking: Athlete wellbeing monitoring and wellness report analysis
  • Support: Public contact message workspace
  • Content: Legal document management and signature tracking

Technical stack

  • Framework: React 19
  • Build Tool: Vite 7
  • Language: TypeScript 5
  • UI Components: Material UI 7 + DataGrid
  • Routing: React Router 7
  • Internationalization: i18next (English/French)
  • State Management: Zustand
  • API Transport: GraphQL over shared fetch service

Architecture Principles

  • Declarative Views: Components and pages focus on rendering.
  • Hook-Based Logic: Workflows and side effects are encapsulated in custom hooks.
  • Centralized API: All GraphQL calls use src/services/graphql/graphql.service.fetch.ts.
  • Async Safety: Every async task is routed via useAsyncTask for global loader synchronization.
  • Governance: Data-loading rules are defined in docs/data-loading-governance.md.

Project structure

src/
  commons/           # Shared Inversify container and utilities
  components/        # Reusable UI widgets (forms, tables, dialogs)
  config/            # Runtime environment configuration
  hooks/             # Business hooks and CRUD logic
  layouts/           # Page shells and navigation
  locales/           # i18n translation dictionaries (en, fr)
  pages/             # Route-level feature screens
  routes/            # Router configuration and loaders
  services/          # API adapters and GraphQL documents
  stores/            # Zustand global state (session, loader, flash)
  theme/             # Material UI theme customization

Getting started

cd backoffice
npm install
npm run dev

Default local URL: http://localhost:5173

Environment

Create backoffice/.env.local for local overrides:

VITE_GRAPHQL_ENDPOINT=http://localhost:3000/graphql
VITE_APP_ENV=development

Available Scripts

Script Description
npm run dev Start Vite development server
npm run build Type-check (tsc) + production build
npm run lint Run ESLint check on src/
npm run test Run Vitest unit tests
npm run test:typecheck Run TypeScript compiler on tests only
npm run preview Local preview of the dist/ output

Quality Checklist

  1. npm run lint - Clean code standards
  2. npm run build - Successful compilation and type-checking
  3. npm run test - Verify logic integrity
  4. Update translations in both en and fr locales
  5. Maintain the {/* General information */} marker in component templates

Full-platform run

To run the backoffice alongside the API and database:

cd ..
make up-dev