Frontend

This section contains the documentation for the frontend source code. This page goes over the frontend stack and the organization of the frontend.

The frontend is written in Typescript with the React framework. For styles, we use the twin.macro (Tailwind x Emotion). We use Snowpack as our build tool.

The frontend is laid out as follows:

src/
├── App.tsx             // The top-level component.
├── Styles.tsx          // A component containing the global CSS styles.
├── index.tsx           // The entry point into our React application.
├── assets              // Static assets (e.g. images) used in the application.
├── components          // Components in the application.
│   ├── common          // "Dumb" components meant for use in other components.
├── contexts            // Custom contexts and the global state context.
├── graphql             // Contains GraphQL queries and autogenerated library code.
├── hooks               // Custom React hooks.
├── pages               // The "Page" components that the router routes to.
├── types.ts            // Types used throughout the application.
└── util.ts             // Utility functions shared amongst the codebase.

Note

I still need to figure out the appropriate amount/type of documentation for a frontend. More will come when that happens. Sorry!