ShareBite

Inspiration

While exploring the Food Stash Foundation’s website, we noticed a significant gap—most food redistribution efforts focus on groceries, but restaurant and bakery waste remains largely unaddressed. Perishable, prepared food from these businesses spoils faster than groceries, making it more challenging to redistribute efficiently. Our project aims to bridge this gap by streamlining food donations from restaurants and bakeries to shelters, ensuring that more meals reach those in need before they go to waste.

What it does

Our app, ShareBite, connects restaurants and bakeries with shelters by facilitating the efficient redistribution of excess food. The platform matches businesses with available deliverers and schedules optimized pickup times, minimizing food waste while reducing the burden on both donors and volunteers. To encourage participation, deliverers earn points for each completed delivery, which can be redeemed for coupons and gift cards. By making the process seamless and rewarding, ShareBite creates a sustainable cycle of giving that benefits businesses, volunteers, and food-insecure communities alike.

How we built it

After coming up with our idea, we began by sketching the layout and structure of the app using GoodNotes. We then moved on to Figma, where we designed the UI/UX and built a functional prototype that demonstrated how the app would look and operate.

We selected our brand colors and used both Canva and Procreate to create and refine our logo. The icons were sourced as PNG images from Google, while the achievement icon was originally from Canva and further refined in Procreate.

Finally, we used Codepen to bring our prototype to life, replicating the design using HTML, CSS, and JavaScript.

Challenges we ran into

We ran into a few challenges when trying to create the front end of the project. Since we all came to this hackathon with little knowledge of coding websites and apps, we had a difficult time understanding HTML, CSS, and JS as well as using the three of them together. Therefore, we spent a lot of time looking through the code and reading the documentation. This leads us to another challenge we faced which was the time constraints of this hackathon. We attempted to learn React, however, we realized that learning React would take a lot of time and that we should focus on completing what we can do in our limited time.

Accomplishments that we're proud of

We successfully built a working prototype, despite 3 out of 4 team members having no prior experience with Figma. We learned how to use it on the spot to create a functional and visually cohesive design.

We also explored GitHub and learned how to collaborate on a project through version control. While GitHub was challenging due to its complexity and time constraints, we made the decision to shift to CodePen, which allowed for faster collaboration and Front end coding.

With only one team member having experience in HTML, and none in JavaScript or CSS, we still managed to build interactive pages using these technologies. Through trial, error, and teamwork, we were able to closely replicate our Figma prototype in code.

We also gained an understanding of key tools and frameworks like React, Visual Studio Code, Git, and GitHub, and how to set them up for future use. Overall, we’re proud of how quickly we learned, adapted, and worked together to bring our project to life.

What we learned

During this hackathon, we learned about food insecurity from a stakeholder consultation with Sprouts organization. We also learned how to use Figma and its application when creating a website or app. In addition, we learned the different parts when creating a website/app such as the difference between front end, back end, and UI/UX design. From this, we learned to do front end using the coding languages HTML, CSS, and JS and coded through CodePen. Most importantly, we learned the basics of coding for websites and can easily improve on our current knowledge.

What's next for ShareBite

To further improve and test our project, we will look to connect with restaurants and shelters to gain their insight on our project. Gathering their ideas will allow us to make necessary changes so that our project can help communities with food insecurities the most. In terms of our app design, we will integrate a map system to make deliveries easy and efficient. We will need to implement a system to check the identities of deliverers to ensure the correct people are transferring the food. To make this a functioning app/website, we will transfer our work from Codepen and Figma to React and implement backend for the scheduling feature that we created.

Built With

• codepen
• css
• figma
• git
• github
• html
• javascript
• procreate