QuickFits: Mobile Web Application
QuickFits is a fully functional mobile first web application developed for easily and efficiently planning your future outfits.
QuickFits was built using:
Native React as the primary client-side framework.
Codehooks.io. for the server side application as well as data storage & retrieval.
Clerk as the Authentication tool.
Material UI to bring mockups to life.
A Weather API on the Home page to help make choosing an outfit even more convenient!
From Mockup to Mobile App: Home Page
On the home page, QuickFits allows users to pick an outfit for any given day once they select “Choose An Outfit”. There is a calendar which allows you to chose the specific date for your outfit, along with a 30 day weather API reporter allowing you to be more prepared.
From Mockup to Mobile App: Choose An Outfit
Once the user clicks “Choose An Outfit” (from above section), QuickFits allows users to pick an outfit for any given day (center wireframe).
Each category of clothing redirects you to that portion of the Wardrobe to make a selection (far right).
Multiple items can be added to single categories as well (taking into account, people might have more than one outfit to wear per day.
From Mockup to Mobile App: Add Clothes to Wardrobe
On the Add Clothes Page, you can either upload pictures of your clothes, or you can simply just use text. Once a piece of clothing is submitted from the Add Clothes Page, a confirmation pops up on the bottom for user feedback (near right). Each article of clothing gets its own card and therefore gets sorted and stored in the users’ QuickFits Wardrobe (pictured far right).
From Mockup to Mobile App: Editing & Deleting Outfits
Once an outfit is chosen, if a user wants to edit that outfit, they simply have to click “Edit Outfit” (center) on the top of the page.
In “Edit Outfit”, anytime you click on a card, a delete confirmation (far right) pops up to delete the piece of clothing from that outfit. Note that this does not delete clothing from the Wardrobe.
From Mockup to Mobile App: Editing Clothing Items
To edit individual clothing items, the user needs to be in the Wardrobe Section (center).
Once in the QuickFits Wardrobe, if the user clicks on any clothing card, a pop-up form to edit (far right) the article of clothing appears. Users can also permanently delete items from their wardrobe as well with the delete button.