About • Key Features • Usage • Additions
Fit is a web application that integrates AI to curate personalized outfits for users based on their inputted information. Each outfit considers the weather, formality level, specific occasions, as well as the user's age, gender, and general style. Of course, not every user knows what their style is. Consequently, upon creating an account, each user can take a simple questionnaire to be accurately matched with their specific aesthetic.
The web application is designed with user-friendly UI and seamless user interaction. Each outfit is personalized from a dataset of over 300 outfit items, allowing users to have a diverse choice of fashion inspiration.
- Javascript
- HTML
- CSS
- Node.js
- Express.js
- MongoDB
- Google Cloud
- AWS
- Figma
Users have the choice of creating an account through Google or by manually entering an email and password.
Click to view screenshots
Once a user creates an account, they're redirected to a quick questionnaire about their basic information such as their birthday, gender, and location to get better insight into how to style them. This information is stored in the User database model. All questions must be answered before proceeding (handles errors).
Click to view screenshots
To find a user's style/aesthetic, a simple seven-question "quiz" is given. Each question asks the user to pick an image out of the various options. Each photo the user picks has an associated number of points attached to it from 0-5 for each of the 16 aesthetics. For instance, choosing a black cat as a pet would add five points to "goth" and zero points to "athletic."
Click to view screenshots
The algorithm is thoroughly designed to provide users with accurate results of their aesthetic(s). The final result, either one or two aesthetics, is shown to the user with a brief description of how it relates to their clothing choices.
The user's input to the questionnaire gets sent to the backend to be used for the "closet."
Click to view screenshots
* Users can scroll through three different outfit ideas or generate new ones by clicking on the ✨ icon.
The web application was designed using Figma and presents a modern and clean interface with a user-friendly UI.
Click to view screenshots
* A user is automatically logged in for up to seven days until they have to reauthenticate but of course, there's always a choice to log out
To get started with Fit, you can head straight to the hosted website at https://fit-gracematsuoka.com/. Fit is deployed using AWS EC2 📦.
This web application is an ongoing project with additional features and improvements to be implemented!
- Advanced weather support: Because the free tier of OpenWeather is used, only US-based cities are supported and only the current weather (not upcoming) can be seen. Advancing to a higher tier would allow for greater user support
- Greater outfit variations: This application uses GPT-4o mini for cost efficiency but one limitation is that the model can only accurately read through a database with a couple hundred entries or less, thus limiting the application’s ability to provide a vast selection of outfit ideas. Changing to a more advanced model would expand the application's styling accuracy
- Mobile app version: Expand accessibility to mobile devices. Right now the application is only supported by the web browser and has to be used on a laptop, iPad or other device that has a horizontally oriented screen. The CSS and HTML formatting still need to be adjusted to support vertical orientations. Additionally, creating a mobile app version of the website would allow for even greater access
- User Flexibility: Allow users to take more charge of their account by adding more information about their outfit preferences (such as color, types of clothes, etc.), allowing outfits to be saved, and editing profile information
- Migrating to a MERN Stack: While using Handlebars SSR worked seamlessly for this application, using frontend frameworks like React would become more useful and efficient when thinking about scaling up the project to incorporate more complex frontend managaement
- Adding a loading feature: After a POST request is sent to the OpenAI API, there is a loading period for the AI to provide a response. To improve user interaction, some sort of loading bar should be implemented to let users know that the AI model is curating their outfit.