Frontend Architecture

Overview

The frontend is supported by React and Typescript. The architecture can be visualized as such:

src
     |
      --- assets
     |      
     |
      --- components
     |      |
     |       --- FAQ
     |      |     |
     |      |      --- FAQs
     |      |     |
     |      |      --- CollapsibleHeader
     |      |     |
     |      |      --- CollapsibleQuestion
     |      |     |
     |      |      --- FAQNavBar
     |      |
     |       --- FAQHelp
     |      |     |
     |      |      --- FAQHelp
     |      |
     |       --- Home
     |      |     |
     |      |      --- NavBar
     |      |     |
     |      |      --- SectionDivider
     |      |     |
     |      |      --- ApartmentCard
     |      |
     |       --- Review
     |      |     |
     |      |      --- Rating
     |      |     |
     |      |      --- Review
     |      |
     |       --- utils
     |            |
     |             --- ProgressSpinner
     |            |
     |             --- SearchBar
     |
      --- pages
            |
             --- Home
            |
             --- FAQPage
            |
             --- LandlordPage

Brief Explanation

• assets/: holds all static/image assets.
• components/: holds all components.
• pages/: holds the three main pages of the website.
• Data such as FAQs and reviews are supported by a Firebase database and can be accessed when the backend is running.

Component Hierarchy

Components are organized in the following folders inside src/components:

• FAQ: holds all components associated with an FAQ on the FAQ page.
• FAQHelp: holds all components associated with the help section on the FAQ page.
• Home: holds all components associated with the home page.
• Review: holds all components associated with landlord/building reviews.
• utils: holds all components shared between multiple pages, e.g. progress spinner, search bar.