Solecast
[Web Application]

Built with: HTML CSS Bootstrap Sass Javascript AngularJS Node.js MongoDB

Solecast Img

What is it?

A CRUD application that helps people choose their shoes depending on the weather.

User can create, retrieve, update and delete their own shoes. Data is stored in the MongoDB database.
Visit Solecast

API Retrieval

A request is sent with user’s input (zip code) to google maps API to retrieve a JSON response containing their location (latitude & longitude).

With their location, I can now use it as a parameter to request their specific weather conditions from the Dark Sky API.

From the information requested, I isolated the weather conditions and temperature. Because there were so many conditions, I condensed them down into a few simple categories: for weather rain, snow and clear, and temperature, hot, warm, cool and cold.

If a user’s shoe matches the current weather conditions the API, then those shoes would show on the front page.

Database & retrieval of data

When a shoe is created, it is posted to the database. By adding the same unique token unique to each user and their shoe, I can query the MongoDB database to retrieve their shoes when logged in.

Responsive

As for responsive, various breakpoints were made with content in mind. As the browser contracts, the elements become stackable.

On the main page, it was important to have the shoe list and current weather above the fold, because the information would be read by those on the go. That said, it was a luxury to have so few elements, so I was able to do so.

When deciding on what elements to include and where, “What shoes to wear” takes most prominence because it is what the user is there for. Adding the large Add Shoe button, was a conscious decision too. I want the user to know it is his next step when entering the app.