Skip to content

Our Code Structure

Jump to bottom
Evan Ugarte edited this page Jan 20, 2024 · 16 revisions

Architecture Diagram

SCE Website Architecture drawio

User

This is code than runs strictly on the browser. In this project, all of the code is found in src/

React Components

  • Anything that has it's own webpage can be found in src/Pages/
  • Anything that is used across webpages can be found in src/Components/

Connecting React Components to the Backend

  • React components call on functions defined in src/APIFunctions which then send requests to the API endpoints.
  • This abstracts axios POST and GET requests
  • Below is an example of how our code for our Event service is structured. Browser-Code

SCE Web Server

This is code than runs strictly in the "backend." We can see that the Web Server is spread accross the diagram, which represents our microservices.

Cloud API Server

This service is responsible for interacting with Google Cloud APIs. The code for this server can be found in api/mailer/. api/cloud_api/routes/mailer.js holds the Express.js endpoints to this microservice and api/cloud_api/util/SceGoogleApiHandler.js is a class responsible for handling tokens from Google and invoking cloud services.

Logging Server

This microservice interacts with all of the other microservices to store error information. The Express endpoints for this service can be found in api/logging_api. We also store information related to sign messages and to call on this service from other services, api/main_endpoints/util/logging-helpers.js is used.

In the future the logging server when given a more serious error should send an email via the Email server to alert officers of something breaking. Furthermore, printing analytics will be stored using this service to help us understand the usage of our printers.

Main Endpoint Server

This service contains the majority of our backend code. This includes member, officer, event and 3D print request management. The Express endpoints for this service can be found in api/main_endpoints/.

RPC Client Server

For information on this, please check out the SCE-RPC wiki code structure page.

MongoDB

  • MongoDB models for our data is located in api/models
  • These models are imported at the top of API Endpoint files and are used to search, add, edit and delete data in MongoDB.

API Endpoints

  • API endpoints can be found in api/
  • These endpoints receive HTTP requests from the User, made from functions in the src/APIFunctions directory.

RPC Server

For information on this, please check out the SCE-RPC wiki code structure page.

Example Workflow

  1. Write an API Endpoint.
  2. Create a function that can call on this endpoint located in src/APIFunctions.
  3. You can now import this function in your React component and call on it.
Clone this wiki locally