Code Structure

Architecture Diagram

Gatsby takes our React code and turns it into static HTML, meaning the whole site can not change dynamically. All the dynamic parts of our application are at the path prefix of /portal. The built-in router for React will try to grab static HTML files when it visits any path, except when the path is prefixed with /portal, it knows that the page is dynamic— this allows us to do dynamic stuff like fetch data from APIs on these special pages.

Frontend: React Components

• Anything that has its own webpage can be found in frontend/src/pages
  • All static pages are in the root
  • All dynamic pages are in the portal_pages folder
  • The routing for the dynamic side of things is in the portal.jsx file
• Anything that is reused in multiple pages can be found in frontend/src/components
• To be added: Redux portion

Backend: Express Server

• The main file is in the root directory, server.js
  • This file just contains configuration stuff like setting up body parser (helps us read request bodies from frontend), connecting to MongoDB, and starting the Express server itself
• All 'backend logic' is found in /routes/api
  • index.js configures the routes for our API. For example, we want data about brothers, so when we make an API call, we go to /brothers endpoint
• Main API endpoints should be in a folder whose name describes the type of data we are interacting with. Within it should be the MongoDB schema for what our data looks like, and the 'controller', which contains the API endpoints where we write backend logic
  • For example, brothers folder has a brother.js file defining the fields of data that a 'Brother' would have, and a brothers.controller.js file defining the backend logic when we want to create, read data about, update data about, and delete brothers in our database
• /util contains any misc. useful files for the backend, such as form input validation

Database: MongoDB

• Currently our backend is hooked up to MongoDB Atlas, a really easy to use database service where we just set up a cluster in the cloud, and we just connect our backend to it. We don't have to worry about hosting it on a server, maintaining it, etc., so we can focus on the development on the website. It's connected through a connection string, that is in the secrets.json file. Please reach out for the connection string!