How We Implemented this Application

Components

To better tailor our project’s core components, we decided early on to develop a concise yet versatile component library. This library includes elements like custom buttons, popovers, text inputs, checkboxes, accordions, and more. Some of these components are simple wrappers around existing HTML elements with added styling, while others are entirely custom or enhance an element with a unique visual touch.

By establishing this component foundation, we significantly sped up the implementation of multiple layouts in our interface. Our final interface required three distinct utility pages, and we divided the workload, with each team member responsible for building one page. With a shared library of components that would be used across all pages, we didn’t have to worry about visual consistency as long as everyone utilized the same elements. This approach not only saved us a great deal of time but also ensured a cohesive look and feel throughout the project.

Libraries and APIs

This project uses the Floating UI library for the implementation of the popover component. This library is used for calculating the positioning of the popover content in relation to the trigger element. Their website can be found here.

For the weather widget we used the Visual Crossing free weather API. By using this API we were able to pull live weather temperature and conditions data for our local area to show the user real time info. Their website can be found here.

Use of AI

Chat GPT and GitHub Copilot were used throughout this project for simple debugging and boiler plate code implementation. 

Data Infrastructure

Our infrastructure model is centered around two primary data sets:

1. A comprehensive list of the user’s saved outfit combinations.

2. A catalog of the user’s individual clothing items.

These data sets are managed within our program as global stores, offering convenient functions to manipulate the data. For instance, our clothing store includes functions to add or remove an item, or to mark it as clean or dirty. This design allows seamless access to the stored data throughout the program, and any updates made using these built-in functions trigger reactive changes wherever the data is used.

We structured these stores similarly to a relational database. Each clothing item is assigned a unique ID, and each outfit is defined by references to a top and bottom ID. This approach allows us to keep metadata for each clothing item separate from the outfit information, preventing redundant data storage. Below is a model of our stores: