Coordinate

An Alexa-integrated smart closet that keeps track of your clothes and suggests daily outfits based on your needs.

Comment

Inspiration

Does this sound familiar? You wake up with only minutes left before you have to leave the house. But what should you wear? Sometimes, there's too many items in your closet and it can be frustrating to choose between all the possible options. On the other hand, you might have forgotten what kind of clothes are hiding in the back of your closet. In the end, you either pull out a random outfit last minute, or choose to wear the same thing as yesterday.

Is there a way to a improve our outfit choosing experience? Coordinate was heavily inspired by the idea of combining tedious routine of choosing daily attire and Alexa with its powerful potential.

What it does

  • Keep track of the items in your closet with images and custom tags
  • Swipe through outfit combinations by type, season and style filters
  • Not sure what to wear in the morning? Just say, "Alexa, what should I wear today?"

How we built it

We designed our backend to be serverless, using mlab as our database and stdlib to be an api layer that performs CRUD functions. To query clothing items for weather, season, style or type, we simply implemented a series of tags that our web app supplies to our stdlib function which queries the database. For current weather conditions, we used Local Weather API to find temperature and current conditions. Next we provided a stdlib api endpoint to our alexa interaction model, which, based on user voice input, determines what activities the user will be doing that day and recommends an outfit based on weather, events and season.

For frontend, we built the web interface using HTML, CSS and Vue.js. Currently we have two active pages for the app. The “Outfits” page includes 3 carousels of the user’s apparel collection to display various combinations of tops, bottoms and shoes for consideration. A list of filters are shown on the side to provide options of seasons and styles to choose from. The “Closet” page contains a grid showcase of the user’s entire apparel collection, along with a list of options of clothing types, seasons and styles to display. Both pages also contain a resizeable sidebar that can convert to a top bar for mobile resolutions.

Challenges we ran into

  • For frontend, we were planning to use React.js for outfits, but we had some trouble compiling react-slick carousal.
  • for backend, we ran into some issues with caching the database connection for faster access between our alexa app, api layer and db.

Accomplishments that we're proud of

  • For frontend, it's our first time using Vue.js, and we're proud to have created a simple and elegant interface within the span of 24 hours
  • It's our first time programming Alexa integrations as well
  • Our Alexa integration and db are running live in real time on the cloud

What we learned

Vue.js, Alexa & stdlib

What's next for Coordinate

  • Upload pictures to recognize clothes and add them automatically to the collection
  • Carousal Randomization - let the app choose what you wear!
  • Send Alexa's choice to the web app for display
Share this project:

Updates