FutureFile

FutureSight, our sister application, is a mobile app designed for students to conveniently store all their school-related information in an intuitive manner.

FutureFile is the accompanying website that facilitates seamless data sharing among users. Each FutureSight user is assigned a unique user id and you can use it to share your profile. The FutureFile website dynamically generates user profiles, complete with an auto-updating bio, as users fill out their information on the mobile app. It's important to note that while FutureFile serves as a platform to view user data, any edits or updates must be made within the FutureSight mobile app.

Documentation

• Routes
• Components
  • DataSection
  • DataDisplay
  • IterableList
  • LoadingSpinner
• Dependencies
  • firebase (Our database)
  • react (Framework)
  • react-router-dom (App router)
  • TailwindCSS (CSS Library)
  • DaisyUI (Tailwind UI Plugin)

Routes

• /: Displays an input box for a FutureSight id to search for a profile
• /:id: Displays the user profile associated with the id

Components

This is documentation of the components used on the app.

DataSection

Renders a main section that calls the other components, this is the only component you should have to call.

sectionParams is an object that contains an id, dataHeader, and items.

• id: is a random, but unique, string of numbers.
• dataHeader: is a string that will be the header of the section.
• items: is an array that contains objects with one element, where the key is a string.

Section params

{
    id: random Number,
    dataHeader: "Section Title" String,
    items: [
        { "Elements name 1": String },
        { "Elements name 2": Array },
        { "Elements name 3": Object, (must contain "id" key) },
    ]
}

Usage

import DataSection from "@/src/components/DataSection"

<DataSection params={sectionParams} key={sectionParams.id} />

DataDisplay

Renders a different component depending on the data.

It chooses what component to render based off if an object is iterable.

If the input is iterable it calls IterableList component with the input.

If the input does not contain any values it returns Null. (some of the userData elements may be undefined)

Otherwise if its a string, it renders the default state of just a key: value container.

Input params

DisplayParams is an object containing a key and either an Array OR String

{
    key: "Title for information",
    items: [
        { "Elements name 1": String },
        { "Elements name 2": Array },
        { "Elements name 3": Object (must contain "id" key) },
    ]
}

Usage

import DataDisplay from "@/src/components/DataDisplay"

<DataDisplay params={DisplayParams} />

IterableList

Renders a collapse menu by iterating over the items array.

The array you pass in MUST contain only 1 key-value pair

Input params

listParams is an object containing key and items.

• key: The name of the list to be displayed.
• items: Array of all the items you want to display.

{
    key: "Name of list",
    items: [
        { "Elements name 1": String },
        { "Elements name 2": String },
        { "Elements name 3": String },
    ]
}

Usage

import IterableList from "@/src/components/IterableList"

<IterableList params={listParams} />

LoadingSpinner

The loading spinner is a component created by Daisy Ui, https://daisyui.com/components/loading/#loading-infinity

Usage

import LoadingSpinner from '@/src/components/LoadingSpinner'

<LoadingSpinner />

Conclusion

FutureFile is a comprehensive web application for viewing profile information on a browser for the app FutureSight.