TrashGenius

• 

  Landing page

• 

  Hotspot map

• 

  Trivia game screen

Inspiration

What it does

Our website offers 2 modes to raise awareness. First, we have an interactive map that shows the concentrations of plastic waste in the ocean, on land, and in ocean currents. The user can learn more information about the garbage patches in the ocean. They can also type in the name of a city and see what they can do specifically in their area to help reduce waste. Our second mode is the trivia game. Players can play an online trivia game with their friends and learn more about ocean plastic waste.

How we built it

We used Visual Studio Code and Windsurf to code. The languages we used were HTML, CSS, JS, and Node.js. We first built the main landing page with the map. We then decided to move the map and trivia game to a separate website.

Challenges we ran into

We were stuck on how to use Node.js. It was very hard to use the language for our trivia game, but we needed it for server hosting. It was hard to get the server up, too, because we had challenges with localhost.

Accomplishments that we're proud of

We are proud of our layout, map, and trivia game. We haven't made something like this before, and the server hosting was new to us. We are especially proud that people can join a lobby together for the trivia game.

What we learned

We learned how to integrate 2 big projects(map and trivia) that were worked on separately and merge them. We learned a lot about website styling and UI.

What's next for TRASH GENIUS

We want to use more up-to-date and real-time data for the map, and add more cities. We also want to create questions for the trivia specific to the region they want to learn about.

Built With

• css
• html
• javascript
• node.js
• openai
• openrouter
• windsurf