Frontend Technical Documentation

• Overview
• Getting Started
  • Installation
  • Configuration
  • Launch the app
• Tech Stack
• Frontend Design
  • Identity
  • Styles
  • Colours
• Architecture
  • Overview
  • Routing
  • Design Choices
• Component Tree
• App Routing
• Features
  • Home Page
  • Viewing Items
  • Item Submission
  • User Authentication
  • Dashboard
• Continuous Integration/Continuous Delivery
• Footnotes

[Demo] [Docs]

FindNUS is a lost and found item management system which aims to supplement existing NUS lost and found system in National University of Singapore (NUS) by reducing the barriers for item finders to submit an item online. As such, item losters are more likely to find an item which they have lost on top of items which only make it to the security personnel. The frontend is built using React 17 and TypeScript, with emphasis on Redux for state management. Sass is also used as the CSS-preprocessor for easier management of styling.

A demo of this application can be accessed at https://findnus.netlify.app

The demo backend is available at https://findnus.herokuapp.com

For more information and documentation, please visit https://findnus.github.io/

git clone https://github.com/FindNUS/frontend.git
cd frontend
npm install

• Make a copy of .env.example and rename it as .env

• Configure the project in the .env file by setting the parameters corresponding to your firebase project, and the path to API

  Note: The backend setup must be linked to the same firebase project

• Run npm start to initialise the local server

Logo Type	Description	Image
Main Logo (Green/Red)	For use with light backgrounds
Main Logo (White/Red)	For use with non-white backgrounds
Compressed Logo	-
Compressed Logo with Backing	Also used as favicon

Font: Dosis (https://fonts.google.com/specimen/Dosis)

Icons: Material Icons (https://fonts.google.com/icons)

React was chosen as the frontend framework to build a single-page application, which helps reduce the loading time between pages, while reducing bandwidth as same resources are not loaded across multiple pages¹.

Redux was chosen to aid in state management, which can not only ensure immutable and predictable states², but also help us to avoid lifting states through multiple components³, especially ones which do not require the state, giving us cleaner and manageable code.

TypeScript allows us to catch errors both during development and compilation. As JavaScript being an interpreted language, type errors are likely to surface at the production stage, due to the use of loosely defined, and possibly undefined types. TypeScript enforces static typing, and performs null checking, which helps with early bug detection and saves time wasted on debugging later⁴.

Prettier is used as the code formatter to ensure consistent formatting across different workspaces. It also allows for customised formatting which helps various coders better understand one another’s code.

Sass, a CSS pre-processor assists with writing more efficient styling. The Sass code formatting allows the coder to better manage various styles using the Block-Element-Modifier (BEM) naming convention⁵. This standardises the naming conventions, providing us with structured CSS and ensuring code maintainability in the long term.

ESLint catches and raises common errors in ECMAScript code. This helps us to reduce the use of bad practices, while writing more efficient and less redundant code.

(To be updated)

Search

View recent items

View item details

Filter results by category

Item type selection

Item submission form

Main page

Login reCAPTCHA

Error message display

User profile

User-uploaded items

Changes to the application are continuously tested with GitHub Actions and Netlify to ensure code functionality. For more information, refer to software engineering and unit testing