Folder Architecture
This project is structured as a monorepo, which means that it contains multiple projects (independently executable codebases) in one repository. Reductively: The server project is responsible for storing data and responding to low-level requests to view or change it; the staff project consists of web pages that will allow staff to access and modify that the data that they need; and the web project consists of pieces of web pages that can be used to display information to or receive information from users of the public-facing Kent Hack Enough website.
Subfolders of /projects/
This project is a Node.js server program written in TypeScript that uses Express to manage user sessions, execute middleware (helper functions triggered for each incoming request), and provide a couple of simple routes. It defines procedures for handling communication with clients with the tRPC library. It defines schemas for the objects that will be passed back and forth between the client and the server with the zod library. It defines schemas for the objects that will be persistently stored in MongoDB with the mongoose library.
Note: while the project is in development, this program also creates a reverse proxy that makes pages from the other projects available at localhost:5000 and staff.localhost:5000. During production, the same thing will be done by a faster program called nginx.
This is a website built with Next.js, which is a library that automatically turns React components into web pages. React components are reusable user interface elements. They are defined by functions that return HTML elements and/or other React components and automatically update themselves based on the variables within their internal state; React components can also be classes, but we are not planning on using those. We are using a bunch of existing React components defined by the library Mantine whenever possible to avoid having to write them ourselves. This website communicates with the server project by invoking the tRPC procedures it defines.
Next.js uses file system-based routing, which means that it automatically turns the components in the "pages" directory into... pages; except for the files _app.tsx and _document.tsx, which are special containers that go around the other pages. The rest of the directory structure is customizable.
The web project is architected almost exactly like "staff", except that since its purpose is to deliver reusable React components, focus less on the "pages" directory.
Dependencies are installed and managed by the program npm, which is also the name of the website that distributes them. Each project within the monorepo is defined as an npm workspace, meaning that npm (the package manager) knows that each is a separate thing, and you can run commands in specific workspaces with the -w projects/[project name] flag. Turborepo, an application used to efficiently build monorepo code, also knows about workspaces, and you can pass their names to its --filter argument to get it to run commands for only specific workspaces. The repository readme gives some practical examples of this stuff too.