SFU Weather Watch

• 

  the home pag

Inspiration

We have a member from SFU, she brought forward a challenge to us. She mention that the road leading in and out of SFU are always icy, wet or hazardous. Thus we made a website to track SFU road conditions

What it does

We made a website tracking real time minute by minute SFU road conditions. This is to check for icy, wet and other hazardous conditions. The website also tracks the current hourly temperature at the SFU campus and links and SFU twitter feed for potential school shooter, bear sightings and other public hazards.

How we built it

We built the prototype using Figma and the actual website using React. Following prototyping, we split off and built the front end and back end separately. After building these two components, we then combined the front end images and text and buttons with the back end api queriers from the National weather institute to generate live coverage of the weather at SFU.

Challenges we ran into

We ran into numerous challenges with using React, for instance we did not know how to create function buttons using React. We did not know how to host weather data on React. With no front-end experience, we were able to overcome most challenges

Accomplishments that we're proud of

We really pushed ourselves outside our comfort zone to create a brand new project on React. A language that none of us had any experience in.

What we learned

We've learned that growth comes out of putting yourself outside of your comfort zone and try new things. In our case, we were tempted to give up half way and just switch back to java developing but we didn't in the end.

What's next for SFU Weather Watch

We will continue to work on this website to improve it's functions and increase the number of functions it can host. We also plan on increasing the performace of the twitter widgit or adding a loading screen. We also would like to add more features such as a multiday forecast along with more camera coverage of the campus.

Built With

• css
• figma
• html
• javascript
• natioanlweatherserviceapi
• react