Save the Shark(ie)s

mobile layout
main shark game function (web layout)

Inspiration

Our project is inspired by our university's mascot, Elbee the Shark. We are deeply committed to improving environmental and climate awareness. Given that sharks and many other species face the threat of extinction from current ecological challenges, we decided to develop a solution that keeps people informed and educated about these issues.

What it does

Our webpage engages users with a game that presents two false statements and one fact about sharks and our environment. Participants use a drag-and-drop feature to "feed" the shark with the correct information. Successfully feeding the shark with accurate facts increases its happiness. Once users correctly answer a total of 100 questions, our team pledges to donate a dollar towards our $32 goal for great white shark research. The progress of our donation is visually tracked with a progress bar, and users who achieve the 100 correct information milestone receive a certificate.

How we built it

We developed our project from scratch using Next.js and React, coding in TypeScript and JavaScript to handle the layout and interactive game elements. We sourced shark facts from the internet to populate our flashcard database. We utilized Vercel and Github for the deployment of our webpage.

Challenges we ran into

The first challenge appeared when we tried to connect our database to the website. Originally, we had a database that contained shark facts and shark lies and we would have those show up on our fact boxes. However, we kept getting a 404 error, so we ended up creating an array of facts. The next challenge that happened was when we tried to implement a live counter for the number of true feeds that everyone has made. We ended up getting the same error 404 since we were unable to run the server without paying money. So for now, it only displays the amount of true feeds an individual user has made. Lastly, we had trouble deploying our website on Vercel 15 minutes before the deadline. We made too many API deployments that the deployment failed until we either waited for an hour or paid 20 dollars. We paid 20 dollars.

Accomplishments that we're proud of

We are proud to have successfully launched a public website in just one day, despite several setbacks and coding challenges. The website is now fully operational and accessible online. Some of the features we are proud of are the dynamic mood changes of the shark based on user responses, the random changes of text in the fact boxes sourced from our database, and the inclusion of a progress bar. We know that some features still need enhancement, and we are committed to continuing our work on improving the website.

What we learned

Since our members Zach and Jesus haven't done much Typescript before, this project helped them learn Typescript. We also learned about how to do API calls on a database and how time-consuming and expensive it can be. On top of everything else, we learned a few fun facts about sharks. For example, did you know that hammerhead sharks have belly buttons? Did you also know that sharks can sense electrical fields around animals? But most importantly, we learned the importance of working as a team.

What's next for Save the Sharks

We aim to expand our donation capabilities and introduce a leaderboard system hosted on a database server for our webpage. Our progress bar, which tracks the number of issued certificates, is hardcoded and designed on Canva. Moving forward, we plan to update this progress bar in real time by integrating it with a live server. Additionally, we plan to include verification of our donation/adoption of a great white shark through SharkTrust.org on our webpage!