Frontend Architecture

Overview

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

src
     |
      --- assets
     |      
     |
      --- components
     |      |
     |       --- ApartmentCard
     |      |     |
     |      |      --- ApartmentCard
     |      |     |
     |      |      --- ApartmentCards
     |      |
     |       --- FAQ
     |      |     |
     |      |      --- FAQs
     |      |     |
     |      |      --- CollapsibleHeader
     |      |     |
     |      |      --- CollapsibleQuestion
     |      |
     |       --- Home
     |      |     |
     |      |      --- Autocomplete
     |      |
     |       --- Landlord
     |      |     |
     |      |      --- Header
     |      |
     |       --- LeaveReview
     |      |     |
     |      |      -- ReviewModal
     |      |     |
     |      |      -- ReviewRating
     |      |     |
     |      |      -- Toast
     |      |
     |       --- PhotoCarousel
     |      |     |
     |      |      -- PhotoCarousel
     |      |
     |       --- Review
     |      |     |
     |      |      --- DetailedRating
     |      |     |
     |      |      --- Info
     |      |     |
     |      |      --- InfoFeatures
     |      |     |
     |      |      --- PropertyInfo
     |      |     |
     |      |      --- Review
     |      |     |
     |      |      --- ReviewHeader
     |      |
     |       --- utils
     |            |
     |             --- Footer
     |            |
     |             --- NavBar
     |            |
     |             --- HeartRating
     |            |
     |             --- LabeledLinearProgress
     |            |
     |             --- LinearProgress
     |            |
     |             --- ProgressSpinner
     |
      --- pages
            |
             --- Home
            |
             --- FAQPage
            |
             --- LandlordPage
            |
             --- NotFoundPage
            |
             --- ReviewPage

Brief Explanation

• assets/: holds all static/image assets.
• components/: holds all components.
• pages/: holds the five 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:

• ApartmentCard: holds all components associated with the apartment cards that are displayed on the home page.
• FAQ: holds all components associated with an FAQ on the FAQ page.
• Home: holds all components associated with the home page.
• Landlord: holds all components associated with a landlord for use on the landlord's page.
• LeaveReview: holds all components needed to enable leaving a review for a specific landlord.
• PhotoCarousel: holds all components associated with the photo carousel for showing landlord property photos.
• Review: holds all components associated with landlord/building reviews.
• utils: holds all components shared between multiple pages, e.g. progress spinner, footer, nav bar, progress bar, heart rating.