client

The front-end client infrastructure is laid out in App.tsx, following the idea of a funnel architecture.

Structure

• Api
  • handles invoking endpoints of our Lambda based server-side API
  • types are shared between server and client via ApiTypes.ts
  • API implementation can be found in the lambda project
• Auth
  • handles signing-in - i.e. authentication with Google or Email and authorization via our server API
• Component
  • React components that are re-used across the App
• Design
  • Theme, App chrome like the NavBar / sliding drawer, layout components
• Error
  • handling for rendering errors, server errors, etc.
• Page
  • The actual pages of the App
  • Pages are "self-routed", NavigationProvider takes care of the transition animations and delegates to the LocationPathname hook to take care of window.location management, etc.
    • Look at the Cabbage repo for more extensive exampel of self-routed pages.

Building

The client is built via create-react-app, using components from the MUI library.

• run npm start-dev for local development, it will use the API defined as as the server proxy in package.json.
• run npm build-prd to build the App suitable for deployment
  • then deploy using the deploy command of the aws-infra project