Beach please

When is the best time to have the most fun at the beach? When the tide's high! This app shows you the ocean tide patterns for a particular day so you can decide if it's a good day to hit the waters.

Comment

Inspiration

As the summer is approaching here in St. John's, NL, I find myself going to the beach more often. What I enjoy the most near the waters is the sound of crashing waves.

What it does

My project is a web app that shows ocean tide height data for two beaches in St. John's- Middle Cove Beach and Rotary Topsail Beach. By selecting a location, a small line graph is displayed that shows the recorded wave heights. The y-axis is the height in centimetres and the x-axis is the difference in the number of hours between now and the time the data was recorded.

How I built it

I built this project using React as a client, and a python flask as the server. The server talks to a global weather api called Storm glass link. The api provides marine data, in particular, ocean tide heights for a specific co ordinate.

Challenges we ran into

  • One particular problem that I was stuck on was an error regarding a blocked CORS policy that kept showing up on the browser console. This was happening whenever the client was trying to GET data from the server. After spending about three hours scouring the internet, I reached out to a mentor who suggested me to install a flask-cors library and enable CORS flask-side. After following the suggestion, the error was resolved.
  • I didn't realize until much later that the external API I was using allowed only 10 requests per day. So after I hit the limit, I used hardcoded json data from the API in the flask-sever to pass info to the frontend.

Accomplishments that I'm proud of

  • working with an external api and authorization key
  • finishing what I planned for the hack

What I learned

  • understanding how a react client and flask server communicate

What's next for Beach please

The improvements I would make are:

  • dynamically showing a list of locations: The app would look into a user's location through GPS and provide a list of nearby beaches for the user to choose from
  • better data visualization: The graph may be hard to understand quickly for new beginners. So a better visualizer or a more interactive graph could be used
Share this project:

Updates