Our Code Structure

Architecture Diagram

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.

SCE Web Server

This is code than runs strictly in the "backend." In this project, all of the code is found in api/routes

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/routes
• These endpoints receive HTTP requests from the User, made from functions in the src/APIFunctions directory.

RPC Server

To connect other peripherals to our website such as the printer and LED sign we make use of a separate repository, jerrylee17/printingRPC. The server that manages print jobs and messages to the sign is written in Python and uses RPCs to communicate with our web server. To read more about how they work in detail, consider checking out How Printing Works and How Writing to the LED Sign Works in this wiki.

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.