Overview

This file will help you navigate easily through the frontend code in our repository (services/remix).

Breakdown

  • app/ - contains the client code and also the server code that acts as a “BFF” (backend for frontend).
    • /api - contains the GraphQL documents we use to run queries/mutations against the backend. Each file under this folder represents a different module/feature in our application.
    • /assets - contains static assets that are used within the application, like illustrations, animations, etc.
    • /components - contains the reusable components that are used within the application (meaning, components that aren’t specific to a page or module).
    • /queries - contains the @tanstack/query query definitions and hooks that wrap the GraphQL queries/mutations.
    • /routes - contains the routes of the application. Each folder represents a different module/feature in our application.
    • /styles - contains configuration related to tailwind and our application’s global styles.
    • /utils - contains common utilities and reusable utility functions that are used within the application and are not specific to a page or module.
    • files that end with .server.ts are server-only files, meaning that they won’t be bundled with the client code in the build process.
    • files that end with .client.ts are client-only files, that are only meant to run in the browser.
  • server/ - contains the server code that runs the remix application - in our case, its a node.js express server.
  • public/ - contains static assets for the application, that are not directly used by the application code, but are served to the client (like favicon, fonts, etc).
  • stories/ - contains the storybook stories for the application.
  • tests/ - contains the tests for the application.
    • /e2e - contains the playwright tests and common utilities.
    • /setup - contains setup files for the different playwright testing environments (local, staging, prod, etc) and extensions to the unit test libraries we use (custom matchers, queries, render, etc).
    • /utils - contains utility functions for the unit and e2e tests.
  • types/ - contains overrides for global types.
  • other/ - contains other files that don’t fit into the other categories, such as utility scripts.
    • /svg-icons - contains the svg icons for the application. if you want to add a new icon, drop it to this folder and then run npm run build:icons to re-generate the SVG sprite of the icons.
    • /plugins - contains plugins that are rendered in the “remixDevTools” plugin menu..