Below is an overview of the directories in the frontend directory, and a general description of their contents.
This directory includes unit and component tests for the UI components.
This directory includes the UI components used in the application.
This directory includes constants used in the application.
This directory includes the GraphQL queries, mutations and fragments used in the application.
Most importantly, it includes the type-safe autogenerated React hooks based on those schemas.
This directory includes custom hooks used in the application. This is done in order to clean up the components, and to make them more readable.
This directory includes the providers used in the application. This is done in order to separate concerns, and adding sensible layers to the application.
This directory includes the Zod schemas used in the application. This allows us to validate objects during runtime based on some pre-defined rules stated in the Zod objects.
For instance, we can validate that a user has entered a valid email address, and that the password is at least 8 characters long. For an example, see schemas/forms.ts.
This directory includes the Apollo global state management. In particular, we store the current character filter (see state/dashboard.ts) and the order of users (see state/leaderboard.ts).
This is achieved using Reactive Variables. Read more about it here.
This directory includes the types used in the application. Some of these types are inferred from the Zod schemas. For an example, please hover over some of the inferred types in types/forms.ts.
This directory includes utility functions used in the application.
This directory includes the views used in the application. A view is a page in the application, such as the dashboard or the leaderboard.
This directory includes the end-to-end tests for the application. These tests are run using Cypress.