Inspiration

Most of us like to plan our outings to nearby beaches but often, we miss out on checking essential details like the weather, taking the temperature and humidity into consideration, when we pack things to carry with ourselves.

Story Time

Say Hi to Jack 👦. Jack loves visiting Long Beach but often comes home sunburnt. If you ask us why it's because he never carries sunscreen with him. Jack's mum really hates that.

If only Jack could find a Website that would give him recommendations for things to carry according to the weather at the Long Beach... 🤔

Meet Maeve 👧! Maeve is Jack's classmate and guess what, she also loves visiting nearby beaches!

Well, Maeve heard about Jack's problem and she immediately recommended this website she always refers to before leaving for her favorite beach, visitabeach.online!

Through Visit a Beach, Maeve is able to track the weather at Long Beach and by interacting with the chatbot available, she is also notified of all the things that she should carry according to the temperature and the humidity at the beach (including a sunscreen!).

Moreover, she gets some amazing quotes and captions that she can use to flaunt her pictures taken at the beach over Social Media!

What it does

Screenshot

Built by harnessing the capabilities of Open Weather Map, Visit a Beach provides weather statistics of the area you are planning on visiting so you can pack essentials accordingly. Chat with our chatbot built over Collect.chat for more details on your visit! We extend our website to a compact, lightweight Android Application built with Java to deliver the statistics with just one tap!

How we built it

The Website is built using HTML5, CSS3, and JavaScript and it uses the Current Weather API from Open Weather Map. Searches made on the website are also stored locally thanks to the following snippet so the next time you open Visit a Beach your last entry is still there, in case you are visiting the same beach again!

   saveToLS(data) {
      localStorage.setItem("city", JSON.stringify(data));
    }

    getFromLS() {
      if (localStorage.getItem("city" == null)) {
        return this.defaultCity;
      } else {
        this.city = JSON.parse(localStorage.getItem("city"));
      }

      return this.city;
    }

Challenges we ran into

We were not able to create a Google Cloud Platform Account and hence we were not able to get the API Key for Geocoding API, which would have allowed us to get the exact latitude and longitude entries to feed into the Current Weather API to get the exact and accurate weather of beaches, which is a major setback for us. We tried many Geocoding APIs by different providers like Mapbox but due to discrepancies, we chose to omit their usage for the time being. So at the moment, we are emulating data based on the City or location of the beaches.

In absence of a GCP Account, we were also not able to utilize the full capabilities of Dialogflow for a Logical Jump enabled chatbot and hence we shifted to Collect.chat.

Accomplishments that we're proud of

We were able to integrate the Current Weather API and icons associated with weathers and post them in Bootstrap Cards effortlessly. After every update, the Website is absolutely responsive.

We were also able to finish a WebView Android Application that syncs perfectly with the Website.

One accomplishment that we are really proud of is that we were able to finish the project within the stipulated time and were able to stick to our pre-defined timeline (given on our GitHub Repository)!

What we learned

  • Having a Credit Card is important.
  • Use of Open Weather Map APIs.
  • Integration of APIs and fetching and posting data from APIs.

What's next for Visit a Beach

When it comes to future upgrades and iterations, we have a lot planned for Visit a Beach and we would love to work on the idea even after the Hackathon concludes. Iterations include:

  • Use Geocoding API to fetch accurate details.
  • Integrate more elements in terms of statistics.
  • Use Logical Jump in Chatbot for a more interactive experience.
Share this project:

Updates