Artboard Copy.png


1.   Web and Front-End Development

2.  Interface Design

Tools used

1. Sketch

2.  Sublime


OverAir uses the research on how weather affects mood and hence acoustic attributes of your music preferences informed by Spotify to create an experiential platform.

OverAir relaxes and rejuvenates you and takes you to the beautiful weather outside you.



While learning HTML, CSS, JavaScript, SQL, PHP, I decided to create a website based on how weather affects your mood and hence your music.

Do people make different music-listening decisions based on weather? Yes!

OverAir uses the research on how weather affects mood and hence acoustic attributes of your music preferences informed by Spotify to create an experiential platform.


This website has been my first big coding project and is just a demo of the idea above. Ideally there would be a much bigger database of songs/playlist as well as videos carefully inserted from the research. I also envision the use of live satellite and environmental videos from the user’s location.

For this project I chose songs of artists from SoudCloud that are legal to use and videos from free stock websites.


Energetic and rhythmic  |  dance/electronica, rap/hip-hop, and soul/funk   |  Spring  | Summer | Clear

Intense and rebellious | alternative, rock, and heavy metal |  Monsoon | Rain | Drizzle Rain | Thunderstorm

Upbeat and conventional  | country, religious, pop, and soundtracks/theme songs  | Fall |

Reflexive and complex |  classical, blues, folk, and jazz |  Winter | Clouds | Mist | Fog | Snow



I want people to be aware of the weather around them and acknowledge it.

Geo-coordinates code and OpenWeatherMap API is implemented to detect the weather of the user first and then the weather codes received from the API to play songs from the database. The audio database was created based on the research by Spotify.


api call from open weather maps Link

Screen Shot 2018-12-21 at 1.20.47 PM.png
Screen Shot 2018-12-21 at 2.48.37 AM.png

The ID of all the possible weather codes were inserted in database, MYSQL and linked it to the playlist and the video.

The entire project has been implemented using HTML, CSS, PHP, MYSQL and Jquery.

Screen Shot 2018-12-21 at 2.55.08 AM.png

The interface will display your city name, the temperature, weather description around you first.

The video and song will then play depending on this data. You can skip and play the next song as well.

Screen Shot 2018-12-21 at 1.48.19 PM.png
Screen Shot 2018-12-21 at 1.30.42 PM.png

OverAir will be live by Dec 2018 and one will be able to experience it.

The different weather conditions, songs and videos from the product is shown below in the videos.

In the process of how to make this live and take it to the aws server.

Below videos should give you the exact experience of overair product





What looks very simple as an interaction can actually have a ton of Javascript running behind it. This was an important takeaway for my future. How to use API, using existing codes and implementing to the project, reading about z-index and responsive design in CSS were some of the learnings from this project.

During the process, understanding and making decisions as I switched roles between a designer and a coder was a new experience.

Another main challenges faced during the process was how to create/collect content and work around limited resouces for personal projects.