Application Overview

Frontend

Written with React
Resides under the site folder
We use Redux to manage shared state between components
We use tRPC to make calls to our backend
We currently use 2 component libraries: Semantic UI and React Bootstrap
- Note: we use React Bootstrap v1.6.1 which is not the latest version, it's documentation is located here which is different than the first link that shows up on Google
We use Vite to build our site

Pages reside under pages
Components that are shared across multiple pages reside under component
Any helper functions used across multiple files are defined under helpers
Custom hooks are defined under hooks
Static files such as images are stored under asset
- These can be imported directly by a component and then set as the src attribute for an img
Our redux store/slices are defined under store
Refer to the styling page for styling conventions and theme usage

Written as an Express app with tRPC
- tRPC enabled typesafe API calls, to help avoid errors in development and improve developer efficiency
  - Most routes are defined within the tRPC router, one exception is the auth route which needs to redirect the user and also handle a callback made by Google's sign in page
Resides under the api
We use Drizzle to define our database schema and execute queries/statements against our Postgres database
- Drizzle is an ORM (Object-Relational Mapper), which maps data in our database to typed objects
- The database can be browsed by running pnpm db:studio
- If the schema ever needs to be updated, first update the code then to push it to the database, one can run: pnpm db:generate then pnpm db:migrate
  - Note: you may want to spin up your own local PostgreSQL server as to not affect any other contributors using the dev database
  - Both the prod and dev databases will need to be updated with generate/migrate, contact a project lead to retrieve the prod DB url and orchestrate migrating the prod database

Routes are organized into separate files under controllers
Helpers are defined under helpers
Input schemas for tRPC routes are defined in the types package if they are needed to used by the frontend, otherwise they are defined inline within the procedure

The types packages is a place to define types that are used by both the frontend and backend
- types can be imported in the frontend/backend from @peterportal/types
- code for AnteaterAPI response types is automatically generated from its OpenAPI schema when running pnpm install
  - you can browse all endpoints and their input/response schemas at https://anteaterapi.com/reference
Resides under the types folder
We use zod to define schemas
- zod is a schema validator, our tRPC backend will use the zod schemas and validate the input so that we catch invalid inputs made by a user and respond with an error