Inspiration

As new apartment owners and college students who are under a lot of financial stress, we realized that our poor grocery shopping habits (overbuying, forgetting ingredients, etc.) were adding to this stress and causing us to waste a lot of food and ingredients. This made us think about how people never really ask neighbors for cups of sugar anymore. We believe that if there was an online application that took this old practice to the web, it would bring the community closer and reduce food waste and financial stress on college students.

What it does

It makes a space for people to request and offer ingredients or food items to a trade board. When two users agree to exchange items, the UI provides an uber like map/directions feature to help navigate to the desired meeting location. Additionally we thought that we could market this to apartment complexes or dormitory halls to encourage their residents to come together as a community and share resources. Also we have a pantry feature that tracks all of the ingredients you currently have and a feature to generate recipes using the ingredients in the pantry.

How we built it

Spare Shelf is a React app (built with Vite) backed by Firebase. Firebase Authentication handles Google sign-in, and Firestore stores everything else: posts, pantries, chats, pickup spots and reviews. Because the app talks to the database straight from the browser, we wrote Firestore security rules that enforce who can do what. For example, only the two people in a hand-off can see their chat or pickup spot, and you can only review someone after you've confirmed the hand-off.

The map uses Leaflet with OpenStreetMap. To protect privacy, posts only show a rounded location, and the exact pickup spot is shared privately in the chat. The two people take turns suggesting pickup spots until one is accepted, and the giver can share their live location on the way.

For the AI features, we used Gemini through Firebase AI Logic. It suggests recipes from what's in your pantry, and it fills in an offer from a photo of the food. Firebase App Check with reCAPTCHA Enterprise makes sure only our app can use our Gemini quota. The site is deployed on Vercel.

Challenges we ran into

The UI design was a big challenge. All three of our team members are more into backend development and it took a lot of iteration to arrive at a user experience that was both functional and stylish. Furthermore, we were entirely unfamiliar with frontend technologies like React, and used AI to help us learn about them in detail. All three of us are relatively new to working in a team. That is why using GitHub and Git to collaborate was a big learning curve, as we had to familiarize ourselves with what other people were working on and if our work would break the code.

Accomplishments that we're proud of

  • A full hand-off flow that feels trustworthy: post, claim, chat, agree on a pickup spot, and then both people confirm before anyone can leave a review.
  • Privacy built in from the start. Rounded locations, private pickup spots, and per-building communities only members can see, all enforced by database rules and not just the UI.
  • Gemini features that help: turning what's already in your pantry into meal ideas, and making it faster to post food before it goes to waste.
  • Shipping a live, working app in our first hackathon, in a language and framework none of us had used before.

What we learned

We learned React from scratch: components, state, and how the UI re-renders when data changes. Coming from backend languages, that was a different way of thinking. We also learned that with a client-side database like Firestore, security rules are the real backend, and every feature needs a rule behind it. Working with AI tools taught us how to ask good questions and check the answers instead of copying code blindly. Most of all, we learned how to work as a team on one codebase: pulling often, keeping commits small, and talking about who's touching what so we didn't break each other's work.

What's next for Spare Shelf

We plan to expand this application so that it works for mobile devices. We also think that this application will be very profitable when selling this to apartment complexes. We also want to make the suggested recipes section to be more personalized by making custom taste profiles for each user. Furthermore, authentication is a big idea--we believe that university students should have access to privacy and some random person should not have access to the community.

Built With

Share this project:

Updates

Submission history