0LWI - SAZY - METRA

• 

  METRA - A food donation app

Inspiration

We were inspired by the incredible work of food bank services across Calgary, and by the idea that the system could be made more organized, modular, and accessible for both donors and those in need. Our goal was to create a digital platform that simplifies food donations, improves communication, and ensures resources reach the right people at the right time.

What it does

Our project connects donors and recipients in a more organized, modular, and accessible way. It allows food donors to easily list available items, while recipients can view and request what they need based on location and availability. The platform simplifies donation logistics and improves how food resources are distributed across communities, making the process more transparent, efficient, and community-driven.

How we built it

We built Metra by combining a React and Next.js frontend with a Supabase backend that handled authentication, storage, and real-time database management. The project started with designing a clean and simple interface focused on accessibility and ease of use, using Tailwind CSS and a green-and-white color palette to match the theme of sustainability. We implemented Google authentication through Supabase and connected it to a PostgreSQL database where user data, such as names, addresses, and roles, was securely stored. Once users signed up, the system directed them to role-specific dashboards for donors or recipients, displaying personalized content and options based on their profiles. To simulate full functionality, we added mock data for events and donation listings. We also began integrating an interactive map feature that would show nearby donation sites and planned events, though this feature remains partially implemented due to time limits. Throughout the process, we used environment variables and modular components to keep the code organized and scalable for future development.

Challenges we ran into

One of the biggest challenges we faced was integrating the backend with the frontend in a way that kept user data persistent. Getting the authentication and database to stay in sync so that when someone logged in their profile information, such as name, role, and address, would actually load took a lot of debugging. We also ran into problems with Supabase environment variables and routing loops between the login, onboarding, and home pages, which made it difficult to test new users reliably. Another major obstacle was connecting the interactive map and making sure real locations appeared correctly. We managed to get basic functionality working, but we did not have enough time to fully implement live map data and proximity filtering. Because of time constraints, some features like complete event creation and location-based matching were left as future improvements.

Accomplishments that we're proud of

We’re proud of creating a working prototype that demonstrates our vision of improving food distribution. Our team successfully collaborated under pressure, learned to troubleshoot effectively, and produced a project that reflects real social impact. We’re also proud of the skills we developed along the way, both technical and teamwork-related.

What we learned

Throughout this project, we learned how to connect a full-stack application by combining frontend design with backend functionality in a real working system. We gained experience setting up authentication, managing user sessions, and ensuring that profile data is stored and retrieved correctly from a database. Working with Supabase taught us how to handle environment variables, secure keys, and user access policies. We also learned the importance of testing each component separately before integration, since even small routing or state management issues can affect the entire app. Finally, we developed a better understanding of how to connect map-based features to user data and how valuable proper planning and time management are when building complex systems under a deadline.

What's next for 0LWI - SAZY - METRA

Moving forward, our team aims to expand the project’s functionality by integrating location-based matching, improved analytics for donations, and a mobile-friendly version for easier access. We also plan to collaborate with local food banks and community organizations to test and refine the platform in real-world settings. Ultimately, we want to scale our system to support other cities and contribute to building more inclusive, resilient, and sustainable communities.

Built With

• next.js
• react
• supabase
• tailwind
• typescript