Location Station
Technologies used:
Locating the State of Things
Location Station was an intense 72-hour team project that was assigned in the midst of my bootcamp with
Eleven Fifty Academy. It was not for the faint of heart due to not instructor help throughout the process,
differing skill levels between teammates, and coming fresh off our main section of learning React, but it
was a great experience. I was the git master and leader of a team of three originally. Due to the nature of
the time instensivity, I ended up doing the vast majority of the work. I was grateful for this as it led to
an exceptional learning breakthrough in how React works.
The project was to use React and build a site that incorporated the OpenWeather API, TicketMaster API, and
NASA API. The site was to be a single page application that would allow users to grab their location and
pull up relevant information for events nearby, a satellite image of their current location, and weather for
the day. You can see my contributions below.
OpenWeather API
Clouds cleared up.
The OpenWeather API was used to fetch weather information for the user's location. The API was
integrated into the site by using the OpenWeather API key. The API was used to pull up the current
weather, the current weather icon, and the current weather description. It was originally pulling the
weather in Kelvin, but I integrated a button that would change the temperature to either Fahrenheit or
Celsius.
NASA API
Stars aligned.
Originally tasked to a different team member, due to extenuating circumstances I was given the task in
the eleventh hour. After being able to fetch the image, it gave difficulties as it had no documentation
for fixed sizes. Due to this, I figured out how to resize the image to a fixed size once it was called
in and do so as well no matter the screen size.
Styling
Quickly Cohesive
The styling was performed with the MDBootstrap library. Originally, the site was having problems due to
the location not being immediately available. Instead of performing logic with useEffect, I made a
landing page instructing the user to click a button to confirm their agreement to gather their location
data. After doing so, it'd take them to a page that held a card group with each API call. From there,
each has a call to action button the user can easily identify. When clicking each button, they can they
then see the details that we called in each API.
Otherwise, I crafted a muted navbar that showed the users GPS coordinates we gathered. Additionally, if
they click the Google Maps icon, it'll take them to that coordinate within Google Maps itself. The
background of the site was a GIF that was called with a mask over it so the site was easier on the eyes.
