Oceanviw

Everything you need for going to the beach in one program!

Comment

Inspiration

I live in Canada so we can only go to beaches in the Summer as there is a lot of snow! However, when I went to Hawaii a few years ago for vacation it was very hard to find public beaches as many were private. In addition to that I also found it a bit boring and So because of that I wanted to create something that would help solve these problems. This is when Oceanviw was born.

What it does

Oceanviw is a website where you can plan your trip to the beach and it also provides entertainment to those who are at the beach. To access all the features click the icons on the home page. The first feature that Oceanviw has is a weather feature where you can check the weather to access it click the weather icon on the home page. Then type in a location and click the view button and the weather will pop up for that location. If you scroll down you can see that it provides you with the UV index and also what SPF sunscreen you should wear if you are going to the beach on that day. Finally it displays whether or not you should go to the beach on that day. The second feature that Oceanviw has is a local beach finder feature where you can look for public beaches that are near you, to access this feature click the location icon on the home page. If you click the blue markers it will give you a description of the beach that you have clicked on. At the moment it only displays beaches in the US but in the future I plan for it to display beaches everywhere in the world! The third feature that Oceanviw has is a shark attack map where you can view shark attacks and shark sightings around the world, to access this feature click the shark fin icon on the home page. If you click a marker it will give you more info on that attack/sighting. The next set of features that Oceanviw has are entertainment features to help keep people entertained at the beach. The first one is a spotify playlist feature where you can paste your spotify playlist and listen to it right in our website, to access this feature click the spotify icon on the home page. If you don’t have spotify you can also play radio stations on our website by clicking the radio station icon on the home page. Hungry at the beach? Don’t worry because Oceanviw has a food locator map for you, to access this feature click the food icon on the home page. Once you click the food icon type “food near me” in the search bar and it will display food near you! Want to read magazines but don’t want to get it wet? Oceanviw has a magazine feature where you can read magazines right on our website. Simply click the magazine icon on the main page and then some magazines will pop up on the page. Scroll down and you will be able to scroll in between the magazine categories by clicking the numbers (1,2,3). All of the magazine pages are separated based on its category. If you also don’t want to bring a newspaper to the beach you can also use Oceanviw’s newspaper feature where you can click the newspaper icon on the home page and read news on our site. Finally Oceanviw has a board game feature built into the website this way you don’t get your board games wet. There are only two games at the moment which are checkers and chess. In the future I plan to add more games on the website.

How we built it

I used Sublime Text 4 to program the website. For languages of code I used HTML, JavaScript and CSS. In addition to that to embed the maps on my website I used Google Cloud’s Google map API. I also used the Open Weather API to embed the weather on my webpage.

Challenges we ran into

I found it hard to use Google Cloud as this was my very first time using Google Cloud and it was a bit confusing. But once I embedded the first map on my webpage I was easily able to embed all the other maps.

Accomplishments that we're proud of

I was able to build this entire webpage by myself give the time constraints!

What we learned

I learned a lot about the three languages of code I mentioned before (HTML, CSS and JavaScript). Furthermore, I learned how to use Google Cloud and the Open Weather API.

What's next for Oceanviw

In the future I plan to add more features to this website and I also plan to make this a mobile app for easier use.

Share this project:

Updates