Tabemono | Devpost

Ranking/Proximity system for food banks
About section

🧠Inspiration

The inspiration for this project arose from many different feedback from and information from teammates and other people. When donating money it is hard to ever decipher if your money is going to the right place, it would be much easier to see exactly where the money was going and which organization it was going to. We decided it was important for food banks to have outreach to every type of audience, thats why having a map to which food banks can easily be seen and reached out to was our solution.

🎯What it does

Essentially Tabemono works towards providing future donors and stakeholders the opportunity to look at the food banks they can donate to in the area they are in. It provides a map which pinpoints locations of food banks (over 80) in ontario and ranks the severity in which they need more funding, or are lacking in aspects. It also allows users to interact with the map and look at the locations and directly access the organizations app.

👨‍💻How we built it

We built this website using React.js, Next.js and Figma designing software. We mainly used React.js to create the website and add the interactive capabilities. Accessing the google maps API allowed us to display the map accordingly and added the interactive aspect to the map.

🚧Challenges we ran into

The main challenges we ran into included integrating the mapping component into the website, and having a working marker system in the google map was probably the most challenging part of the project.

📈Accomplishments that we're proud of

The accomplishments we were proud of during this project was that we were able to release this website and really captivate audience attention using Figma design software effectively.

🤔What we learned

During the hackathon project, our team learned several valuable lessons. Firstly, we learned how to effectively use Figma and React.js to design and develop a website. This allowed us to create a user-friendly and visually appealing website that met the project requirements. Secondly, we learned how to incorporate the Google Maps API, which helped us to implement the mapping function and mark the food banks on the map. This feature made it easier for users to find nearby food banks and contribute to those in need. Finally, we learned the importance of using JavaScript effectively, which allowed us to build a responsive and interactive website. Overall, we learned that using the right tools and technologies and leveraging JavaScript effectively can lead to the development of a successful project.

💡What's next for Tabemono

As another addition for our project we wish to incorporate the aspect of user authentication and actually having donation pages on our website instead of pointing to organizations, this would mean that user transactions would occur on our website directly. We also wish to incorporate the feature to click on the markers in the google maps so it reveals information.