FullFill

Inspiration

Our inspiration came from noticing how much food is wasted each year. Perfectly edible food sent to the shadows of a dusty bin never to be seen again. We wanted to create a solution that could address a common interest in a way that everyone on the team could contribute ideas for.

Communication and organisation in creating a team project such as this was an opportunity like we had not faced prior. School projects had never given us this much freedom and it was an interesting way to see whether we could cope with our own creative clashes as a team.

What it does

Our project is essentially a communication application, similar to other rss/ social networking applications however it operates primarily by allowing specific 'business' accounts in the form of restaurants to communicate with other accounts labelled as 'shelters'. The account type itself is dependent on the user. Businesses like restaurants and other food services that end in a surplus of food utilise various features such as an AI scanner(for simplifying data entry) to list foods on their listings dashboard, food items which are visible to any shelters that require food. Additional information such as food details, expiry and additional details are also available in case the shelter requires any additional information. In tandem to these features we also include a chat feature into the both the business and shelter accounts for more personalised communication between the two parties. TL;DR

AI scanner for automatic data entry using Open AI API
Maps feature for seeing nearby listings -Chat feature between business and the shelters. -accepting and requests for food listings.

How we built it

FullFill was built using a modern tech stack centered around Next.js 14, TypeScript, and Tailwind CSS, with Supabase handling our backend needs for authentication, database storage, and real-time features.

We created a responsive application with different user flows for businesses and shelters specific users, involving role-based authentication, real-time food listings, and an intuitive request management system.

The UI leverages glass-morphism effects with backdrop blur and consistent text visibility across both light and dark modes. For visual appeal, we integrated Spline for immersive 3D background animations, carefully optimized for performance. Our biggest challenges included synchronizing donation listings in real-time, creating a seamless scrolling experience, and ensuring the platform remains responsive across all devices.

And the most most challenging, integrating an AI backend that takes an image of the food as input and processes and auto creates a listing. Through the use of modern frameworks and attention to user experience, we've delivered a solution that effectively connects businesses with surplus food to shelters in need, making a small impact to reduce food waste and fight hunger.

Challenges we ran into

We faced several technical hurdles while developing FoodShare. Implementing the OpenAI-powered food analysis system required careful optimization to accurately identify food types and quantities from images while keeping API costs reasonable.

Integrating the Spline 3D animation with Next.js created compatibility issues that we solved through client-side rendering. We struggled with theme implementation causing hydration mismatches and UI flickers during initial loads.

Our role-based authentication system needed precise configuration to properly separate business and shelter accounts while maintaining security. Real-time updates for food listings demanded strategic database design to balance timeliness with server efficiency. The responsive glass-morphism UI presented unique CSS challenges, particularly with overlay transparency and scrolling behavior across different devices and themes.

Accomplishments that we're proud of

As a team participating in a hackathon, we're incredibly proud of what we've accomplished in such a short time. We successfully built and deployed a working prototype in under 36 hours, which connects restaurants with shelters and nonprofits to help reduce food waste and feed those in need. One of our biggest wins was how effectively we collaborated—our team communicated openly, managed our time efficiently, and supported each other through every challenge. We brought together a mix of design, development, and strategic thinking to create a meaningful solution that addresses a real-world issue.

What we learned

In terms of developing the front-end, we learned to utilise animation software such as Spline to create continuous 3D animations for our landing page. Furthermore we've learnt how to implement an in-built map box that shows the location of each business, and super-based authentication to improve the security. In the back-end, we learned how to utilise Open AI API, specifically the GPT model, to act as a 'food analyser' to take analyse the food taken or uploaded by the business.

What's next for FullFill

Looking ahead, we’re excited to keep working on FullFill beyond the hackathon. Our next steps include refining the prototype for real-world application, reaching out to local restaurants and shelters for pilot testing, and exploring partnerships or grants to help scale our impact. We’re all motivated to see this idea through and continue making a difference as a team.

Built With

css
git
next.js
openai
postgresql
react
spline
supabase
tailwind
typescript
vercel

Submitted to

UNIHACK 2025

Created by

I created the whole app using Next.js, and the UI designs my team created.

Integrated a complex backend using Supabase that handled authentication, user data storage, etc.

Made use of the Open AI API to integrate gpt-vision ML recognition model, as well as the Mapbox API to integrate an interactive and live map.

Used Vercel to deploy and host the project!

Abdullah Zahid
I worked on creating the script and directed the video as well as editing the video with typography and vfx.

Helped in UI work for the site by developing a 3D model and animation to include for the landing page.

Helped in testing the functionality of the site.

abhi bhatnagar
I was working on backend, mainly debugging and setting up databases, as well as fixing and optimising subroutines for linking the frontend-to the backend. I was also primarily involved in managing the video script and project timeline as well as its features for the final version of the application.

Danial Bohra
I was working on the video script, animation and assisted with testing & looking for bugs within our app.

Created the basis of how each scene by developing a storyboard, lines, and camera angles.

Developed the animation within our landing page, utilising 3D objects and events to loop sequences.

Helped test features, identifying any potential bugs

Jasooon Tjandra