Skip to content

Frontend Structure

Jump to bottom
Lilly edited this page Mar 20, 2022 · 5 revisions

Frontend Structure

General Overview

The structure of our frontend codebase, from a high-level view, is broken into 6 primary parts - API, assets, components, context, pages & utils. We also have several core files within the root directory, including App.jsx. Our hierarchy is contained separately to the backend and is predominantly created using JavaScript/JSX.

Component Overviews

API

Our API folder contains the files needed to engage with the backend APIs. This includes APIs for loading the user's timetable, pairing with a buddy, and loading user information itself. Axios is utilised to help support this.

Assets

Our assets file is designated for assets we had designed for our usage. This is primarily contained to the menu icons, but should there be more components that weren't already accessible through a library such as Material UI or otherwise, they would be created and stored there.

Components

Components are contained within the component subfolder. These components are then contained in their own folders, allowing for CSS files for stylings and folders for unit testing. Unit tests themselves are contained as a subfolder in order to allow for them to be close to the file being tested while not being in the exact same directory. Furthermore, the component subfolders allow for easy reuse of these components by allowing them and their logic to be self-contained.

Subfolders:

  • Carousel
  • ChatBuddyDetail
  • ChatHeader
  • ChatInput
  • ChatList
  • CourseCard
  • DialoguesList
  • Example
  • Loading
  • MessageBubble
  • NavBar
  • PopUp
  • ProfileBadge
  • Theme
  • Timetable
  • UserSearch

Context

The context subfolder is utilised for context-related files. This includes token validation and effects related to it.

Pages

Our pages are contained within a folder containing subfolders. This helps to bring forward the containment and stylings related to each page, as well as the necessary and related components that won't be reusable. Our routing for the pages is also contained within the pages, as this ultimately defines a lot of the movement within the different pages.

Subfolders

  • Chat
  • Dashboard
  • Login
  • Pairing
  • Routes

Utils

We have file for common/shared utils. Currently this is utilised by the util file for the time formatter, but in future cases, we might see other utils that require sharing across the project, such as text formatters.

General Information

Project Details

Implementation Details

Clone this wiki locally