Skip to content

Frontend

Jump to bottom
Ming Chen edited this page Apr 28, 2020 · 8 revisions

The frontend is mainly written in JavaScript using React as the UI framework and using Material-UI for its suite of useful components. Check out those links if you want to learn more about them.

Prerequisites

Please have the following software installed on your computer before following any further steps

NodeJS: Used to run our Javascript code. Note that you'll need a newer version of NodeJS (recommended v12+).

Add your firebase credentials in a '.env' file see Fire Base Authentication for instructions on how to set it up.

Useful Tools

React DevTools: Useful for debugging React components. Get it for Chrome, Firefox, or get the standalone version.

Running locally

  1. Navigate into the frontend directory in your terminal

  2. Run npm install to install the dependencies for this project.

  3. Run npm start to start the app in development mode. Open http://localhost:3000 to view it in the browser.

    The page will automatically reload when you make edits to the app files.

    If there are build errors, it will show up on the terminal and on the web page.

    If there are run-time errors, it will show up in your web browser's developer tools.

  4. If there are formatting issues, run npm run lint-fix and the linter will try to fix the ones it can fix.

Tests

Running tests

  1. Run npm test.

    This will start a program that will watch over for any changes in your code, and re-run tests that are impacted.

  2. Press a if you want it to re-run all tests.

  3. Press q to quit.

Writing tests

Most code you write should have corresponding unit tests. If you have a file like MyComponent.jsx, you should consider adding a MyComponent.test.jsx or MyComponent.test.js test script.

Adding a file that ends with .test.js or .test.jsx should get picked up by the npm test command automatically, and will be run with the Jest testing framework and the jest-dom extension. Moreover, the code in setupTests.js will be automatically run before your test scripts.

Troubleshooting

I'm getting weird linting errors that doesn't make sense. The error ends with import/no-named-as-default.
There seems to be a weird problem where the linter still sees an older version of your code. When that happens, running npm ci to reinstall the tools and clear their cache seems to fix the problem.

Assets

Reaction button assets are from FlatIcon https://www.flaticon.com/ Otherwise, logo and colour palette is original work.

Clone this wiki locally