Avant-Garb

Inspiration

Everyone has different body types and therefore there are so many people who go to popular stores and don't find clothes that fit. Not every store has clothes for short men, tall plus-size women, or curvy short women, and sometime this can make people feel like their bodies aren't great or ideal. This can also extend to people looking for hair care products or makeup, people with very curly hair or oily skin and acne may need different products than those that are popular. There are tons of questions and blog posts discussing different stores for these specific features but they can be hard to find and may not address all of attributes a person has. A website where a user can easily input facts about themselves and quickly get an answer of what stores carries products for them would truly help this situation.

What it does

The website starts with a page asking the user what they are shopping for with the options; Clothing (fully functional), Hair Care (semi-functional), Shoes (non-functional), Makeup (non-functional), and Accessories (non-functional). Once the user clicks a button they are taken to a page where they can describe themselves. On this page there are many buttons geared toward the product the user is looking for. Once the user clicks on all of the buttons that apply, it will take them to a page with the six stores that best match their attributes. This page will have buttons that upon being clicked will open a new tab with the store's website.

How we built it

We used HTML, CSS and JavaScript to create the project. For the database we used Firebase, and for the front end, we used Bootstrap. Our controller was JavaScript. We created a start page, where the user can get a feel for the product before starting, and upon moving into the actual app, our code lead to another view that allowed the user to choose what they were shopping for. In the next view the user would select tags that most closely applied to their body types. These tags were compared against information that we stored in our database by looking through stores and tagging them by what kinds of clothes they carried. This allowed us to return corresponding suggestions about where users should shop. We added some functionality to ensure that users couldn’t continue without actually choosing a tag first. Additionally, once we give users their suggestions, they don’t have to go searching for those stores — we automatically gave them links to them!

Challenges we ran into

We are all fairly new to web development and were very unsure how to start. Creating the database was a simple task, but a tedious one as we had to input all of the stores websites and tags.

Accomplishments that we're proud of

We are so proud that we were able to complete one element from start to finish. There were many points where we had no idea where to go next but we continued to make breakthroughs throughout the night.

What we learned

We learned so much more about web development and databases. We also learned that it's easy to develop and idea but putting into code is much harder.

What's next for Avant-Garb

We hope to continue developing this website to feature the other elements (Hair Care, Shoes, Makeup, and Accessories). We also hope to one day include Machine Learning so that our database can be much larger and can find tags for stores on its own. As for the website, we would love to make it much more attractive with dynamic button and backgrounds. It's a bright future.