Fishbowl

Inspiration

We were inspired by extensions such as Tabby Cat and websites such as FreeRice.

What it does

Every time you open a new tab, you get three overfished fish species - put one in the bowl to learn more about it... or just throw them around.

How we built it

Matter.js physics system with react laid over the top of it. The whole project is packed with webpack so that it can be used as a Chrome extension.

Challenges we ran into

There was a lot of difficulty seamlessly integrating the UI elements with the Matter.js render canvas - but we did it in the end. The IUCN API is by application, which we didn't have time for (and it was the weekend!). We also had some trouble with our database and ended up with our data in the frontend.

Accomplishments that we're proud of

First time using Webpack
First time using Matter.js
First time (kind of) using Flask
Fun bouncy fish
Handmade fish art made during hackathon
Convincing bowl physics
Mini team

What we learned

Webpack
Matter.js
Flask

What's next for Fishbowl

More fish
IUCN API integration
A website
A quiz game

To Install

Go to Chrome's extensions page, enter developer mode, choose 'load unpacked extension', then select the fishbowl-extension folder from the GitHub repo.