Architecture
The notable technologies used by Prytaneum are as follows:
Tech
Project
Client
Server
Deployment
Testing
- Playwright for E2E testing.
Folder Design Philosophy
Client
Folders contained with app/client/src/
__generated__/
These are types generated by relay for our graphql queries. Whenever importing from this folder, always use import type. See type-only-imports docs.
animations/
Custom animations
assets/
Static assets used by the web app.
components/
React components that could be used in any part of the web app and are designed for general use. Some may have a slightly niche use case, but that does not prevent them from being used anywhere.
features/
All React components that are specific to a feature. A feature is made up of many components from the components/ folder, an external library, or one-off components.
features/core/
features/core/ is noted because while it's not a feature in the same sense as Events or Accounts, it contains code core to the application, such as theme, relay configuration, and some feature agnostic React hooks.
icons/
Sometimes the Material UI library doesn't have an icon that we need. So we get the SVG from Material Design Icons and make our own.
layout/
Layout specific code for prytaneum, such as the sidebar, main navigation, and footer. Modifying code in this folder should be done with caution. It will affect every page in Prytaneum.
pages/
Nextjs is designed such that the structure of the pages/ folder and subfolders correspond to the routes on our web app. See Routing.
utils/
Generic helper functions such as date formatting, error messages, etc.
Server
Folders contained with app/server/src/
__generated__/
Generated typescript types for our database models. Generally, this folder does not need to be accessed since the prisma client will do that for us.
core/
Infrastructure and startup/shutdown related code.
features/
Feature specific code such as accounts and events.
lib/
Helper code that can be used anywhere in the application.