Inspiration
I chose to build this project as I am personally very passionate about fashion. I often find myself forgetting about clothing items that I have and I find myself wanting to remember awesome outfits that I wore and really liked. I thought it be very useful to have a digital wardrobe on the daily, where it is possible to sort your outfit combinations, see all the clothing you have in a timely manner, and create outfits in advance. So, for example, if there is a business formal event, I can sort my outfits tagged “business casual” and see already created outfits, saving time and also using the outfits I have already tried and know will work.
What it does
This app keeps track of and sorts clothing items and created outfits of your wardrobe. It is personalized to your own style, and offers functionality such as sorting outfits by tag in order to quickly find the style you are looking for.
How we built it
I used React to create this webapp utilizing 6 main component javascripts: the App, Wardrobe, Clothing Item, SubmissionForm, Outfit Builder and Outfit. The Wardrobe governs the array of clothing items that are displayed. The submission handles submitting new items to be added to the wardrobe. The outfit builder handles building outfits and displaying them, while the outfit component handles tags. The background, images and example clothing items were all hand drawn by me.
Challenges we ran into
As it was my first time using React, as well as my first experience doing any sort of front-end development, the entire process was a challenge. I had absolutely no knowledge of React, HTML, or Javascript prior to this experience. Therefore, starting out on a blank slate was both challenging and daunting. I encountered many issues early on with syntax, as I was still learning how to properly format the language and how to code the functionalities that I was looking for. I struggled a lot with designing the components, like figuring out which functions should go in which components to make it fully functional and easily manipulated. My initial shoddy design eventually led to many issues when designing the CSS and UI, as some functionalities were duplicated, or incorrectly handled. Finally, the tight schedule and quick turnaround time was especially challenging, as I have never had to come up with an idea, and implement it in such a short time. There was no time to slowly think things over and I just had to do.
Accomplishments that we're proud of
I am very proud of the project I was able to create over the past couple days, especially with the final look and functionalities that I was able to get working. I didn't have much hope when it reached midnight on Saturday/Sunday, but with the help of the mentors and Core I was able to fix my errors, rework some design and end up with a sort of functioning WebApp. I am also proud that I was able to incorporate my personal interests of fashion and art into this project, which also made it a lot more fun!
What we learned
I learned a lot about both front-end development and React, HTML and Javascript. I experienced creating my own project (completely on my own!) for the first time, using a bunch of completely new languages as well. I learned new ways to think about code, and all about UI and how design is related to CS. I also learned all that goes into coming up with an idea, a design, and implementing my idea into something real. The mistakes and issues I ran into helped me learn about React, designing in React, and how to create a functional and robust UI. The quick turnaround time helped me learn a lot about just doing and not overthinking at times. A lot of the times I will get in my own head and not try. I learned a lot from just trying out things, and finding both success and failure in it.
What's next for Closet Companion
What's next is turning this WebApp into a mobile app, as that format serves the function of the app much better. However, I chose to create a WebApp as I wanted to learn about React and front-end development. Furthermore, other features will be added, such as the ability to add your own tags, sorting clothing items by category, and a search bar to look up items or outfits.
Log in or sign up for Devpost to join the conversation.