Forage

An app to educate others about hunger and food security in the world.

Comment

About

Given the theme of "Hunger and Food Security" and the 3 related challenges, our team developed a website, an integrated app, and a game. As many of us are gamers, we decided to create a game to allow children to interact with our platform while also teaching them important facts about world food scarcity. For the general public, we created a webapp to help users locate food banks near them to make it more accessible for those in need in finding food, and those who provide a way to reach out.

What it does

Website

Provides a aesthetically pleasing medium with clear directions to demonstrate information about hunger and food insecurity.

Application

The Forage app displays food banks in the area, and will allow users to see what is in store. The users can then register for an account, and if eligible, can schedule through the app to arrange a pickup for the food. This app provides a platform for both those in need and those who provide. The app integrates a Google Maps API in order to track your location and display your position on the map.

Game

We created a game to address the difficulties of food insecurity in the world.

Users can use the arrows key to move an avatar who's aim is to collect food that falls from the sky. The user has 3 lives and loses a life if they miss catching the food falling from the sky.

In the main menu, there is an info box which shows various facts about food insecurity. There are 2 difficulties: slightly secure and insecure, which makes the player have a larger and smaller basket respectively (representing their relative financial situations). In the game, you collect food that falls from the sky; the arrow keys move you left and right and shift makes you dash so you move faster. You start with 3 lives (5 lives if you're playing on slightly secure mode). Missing the food will make you lose a life; when you run out of lives and waste too much food, the game ends.

How we built it

We built the website using HTML, CSS, and Javascript. The app was built using React and the Google Maps API. The game was built using GameMaker Studio 2.

Challenges we ran into

  • CSS formatting, especially the background aesthetics.
  • Porting the project from HTML to React.
  • Integrating the game.

Accomplishments that we're proud of

We built a fully functioning website with integrated features.

What we learned

We learned how to integrate an API, how to apply UX/UI concepts to an actual website, how to use React router to redirect users, and how to import 3rd party software using iFrames. We also built and strengthed teamwork and communication skills over the course of the hackathon.

What's next for Forage

At Forage, we aim to provide the best solutions for the people. Starting with making the Google Maps API work so that it displays food banks near the user's location, as well as adding more features to the game like power-ups and a level system with daily calorie limits.

Built With

Share this project:

Updates