PeterPlate's frontend -- written in the Next.js framework.

App Structure

The web app is contained in apps/next, which should look something like:

We will now go into detail about each subdirectory of 📂src, which comprise the whole of the frontend.

📂 App

In 📂app, we use the Next.js page router to establish pages, which are web pages rendered individually from one another, each with a unique URL.

Without going too far into the weeds of the Next.js page router, let's breakdown each element:

• 📂about & 📂events: Each folder in Next (if containing a page.tsx) represents a page. In this case, /about and /events.
• favicon.ico: The favicon of the website (the little image that appears next to the tab name).
• globals.css: The global stylesheet for all pages, used by tailwindcss.
• page.tsx: The homepage for the web app.

📂 Components

All of the components used in PeterPlate's web app are defined in 📂components.

PeterPlate extends a lot of the shad/cn library's components. As such, you may be better off looking at their documentation to implement your own component for PeterPlate.

See the components in this folder for more details on each unique component.

📂 Context

All of the contexts used in PeterPlate's webapp are defined in 📂context.

Essentially, a context is a method of passing information between components without having to prop drill, or pass props deeply into children that may or may not use those props. See the link above for React context information.

📂 Hooks

All of the hooks used in PeterPlate's webapp are defined in 📂hooks.

See the link above for more information on React hooks.

📂 Utils

Functions, types, constants, and other static information/tools used across PeterPlate's webapp are defined in 📂utils.

Defining Your Own Folder

If for some reason you find yourself writing a file that doesn't fit within the predefined folders above, please reach out to a current PeterPlate lead to figure out whether a new folder needs to be created for organization.

Backend Integration

PeterPlate leverages a tRPC backend, which queries a local Postgres database. This database has cron jobs run on it that pull CampusDish data daily and weekly for dishes and events.

Most of the tRPC calls in the frontend (as of writing) are performed in the side.tsx file (Side component). For more information on the tRPC functions, check out docs/Serverless Functions.md, docs/tRPC Procedures, and the packages/api/src folder.