Skip to content

Frontend Overview

James edited this page Mar 20, 2022 · 5 revisions

We have chosen React to be our frontend UI framework.

We have decided to use mobile first design for this project, so we will start with a design that is optimized for mobile phones. Link to Figma: https://www.figma.com/file/nzmwMJRLfTZ84UFRXk0GuQ/Untitled?node-id=0%3A1

How to run the front end as a dev

You need to clone the repository, then you should install dependencies by running npm i inside BOTH the root ("/") directory, and the frontend directory ("/frontend").

Then, you can run npm run start to launch the front end. It should automatically open a browser, if it doesn't then you need to check the console to see the address it is running on and go to that.

IMPORTANT: The initial design phase is for MOBILE DESIGN, so viewing it in full size is not optimal. You need to open the console with F12 and find a button that looks like this (chrome, firefox pictured). You can also press CTRL + SHIFT + M

image image

Config

Variables that are needed across the whole application such as server url should be exported from config.js in the root file. This is located in the root of frontend as config.js

Clone this wiki locally