General Guide

The UPE Website & combined WebFront is composed of a react-app front-end and an Express React.js app for back-end. The two work in tandem to provide the best experience both on the public website side as well as the members-only section of the website.

The app utilizes Axios to communicate between front-end and back-end and a PostgreSQL database to store all the data for members/users/events/projects and all else. It also makes use of the SendGrid API to handle emails in and out of the app.

If you need to interact directly with the hosting environment for the app contact one of the codeowners to get the information required for it.

How to Run

In order to run the local code (ie: just the front-end) open whatever terminal you prefer, navigate to the project folder, and run yarn start, this will open the react-app at localhost:3000.

If you want to run any back-end code, including fetching from databases etc, you'll need to open another terminal, navigate to the folder and run yarn server. This will allow for instant updates for both front-end and back-end.

Basic Infrastructure Explained

The app is divided into the following sections/subsections:

• Main Website
• Member Website [UNDER CONSTRUCTION]
• EBoard Panel [UNDER CONSTRUCTION]
• UPE API [UNDER CONSTRUCTION]
• Recruitment Website [FUTURE UPDATE IMPORTING INQUISITOR]

Each of these sections has its own Wiki page that goes further into detail into each one, how it works, etc.. please refer to each of these sections before starting to work on any of them, read the documentation carefully and make sure to adhere by global standards.

Global Standards

• All styling must be in ./styles/{SECTION}/, make sure to read each styling guide before doing any CSS work
• All files must be in ./assets/{FILETYPE}/, make sure to read the guide for the specific implementation before naming the files, they tend to have conventions
• Spacing in css files follows a 4-space tab, while in js files it follows a 2-space tab, please use this spacing style so the code is consistent
• When building HTML components, please make use of react-strap and react-bootstrap components to make the code more consistent, especially the use of <Container>, <Row> and <Col> to make sure the content is appropriately displayed on every device