FindNUS Documentation
Toggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage

Frontend Technical Documentation

Website

Table of Contents

Overview

FindNUS Homepage

[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.

Back to top

Getting Started

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/

Installation

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

Configuration

  • 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

Launch the app

  • Run npm start to initialise the local server
Back to top

Tech Stack

Back to top

Frontend Design

Identity

Logo TypeDescriptionImage
Main Logo (Green/Red)For use with light backgrounds
Main Logo (White/Red)For use with non-white backgrounds
Compressed Logo-
Compressed Logo with BackingAlso used as favicon

Styles

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

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

Colours

Christmas Green (#135A60)
Christmas Red (A52C49)
Gold (#C9A27C)
White (#FFFFFF)
Back to top

Architecture

Overview

Architecture Overview

Routing

Routing

Design Choices

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 pages1.

Redux was chosen to aid in state management, which can not only ensure immutable and predictable states2, but also help us to avoid lifting states through multiple components3, 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 later4.

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 convention5. 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.

Component Tree

Component Tree

(To be updated)

App Routing

RoutePageRemarks
/Main page
/submit-item/typeSelect submit item typeSubmit either lost or found item
/submit-item/formForm to submit itemQuery type=lost requires authentication
/viewView detailed information about itemRedirects from home, search and dashboard
/loginUser authentication
/dashboard/profileUser profileRequires authentication
/dashboard/itemsUser-uploaded itemsRequires authentication
/componentsOverview of components usedFor development use
Back to top

Features

Home Page

Home Page

Back to top

Viewing Items

Search Search

View recent items View recent items

View item details View item details

Filter results by category Filter results by category

Back to top

Item Submission

Item type selection Item type selection

Item submission form Item submission form

Back to top

User Authentication

Main page Login Page

Login reCAPTCHA Login reCAPTCHA

Error message display Login error

Back to top

Dashboard

User profile

User profile

User-uploaded items

User-uploaded items

Back to top

Continuous Integration/Continuous Delivery

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

Back to top

Footnotes