Foodies' Food Finder (Web Application, UI/UX)

Inspiration

Numerous college/University students are often subjected to late night eating and poor eating habits. One of the main factors behind this reasoning is due to the cost of food prices and delivery. In addition, time constraints comes as core factor in limiting students from getting a proper meal. Now, if only there was an app that students could utilize as a means to find quick and easy food options given their preferences and current situations. This is where the idea for the Food finder app was developed, as a means do just that and more for aiding fellow students.

What it does

The Food Finder App works by taking in the users preferences on the basis of certain parameters. These being diets, distance, and food preferences. Once the app knows what the user wants and likes, it tries to sift through a database and visually showcase certain spots that the user can choose from to eat. Additionally, there a multitude of features that's implemented along side the mapping. For instance, there is a mode feature to differentiate between on campus events with food (often times 'free food'), or a restaurant mode that works to provide the same service through with restaurants and other local eateries within a given range. The UI is also made up of other features such as a chatbot that works to help give suggestions in the case that the user doesn't know certain preferences they may have in terms of food. In addition, to a for you feed that works as a for you page given a user's preferences and certain core notions.

How we built it

We built Food Finder as a single-page web app using React with Vite, allowing for fast development and a smooth, interactive user experience. The frontend is primarily JavaScript and JSX, with a small TypeScript module to configure our connection to Supabase, which handles our database and data operations. For maps and location features, we used Leaflet with React-Leaflet and OpenStreetMap tiles, while distance calculations are handled directly on the client using the Haversine formula.

All application data, such as restaurants and free food events, is stored in Supabase and accessed through its JavaScript client using a public anon key, enabling a lightweight, serverless setup. Address search during event registration is powered by Photon. For personalized recommendations, we integrated Anthropic’s Claude API, allowing the app to generate “For You” suggestions based on user preferences provided at runtime.

Challenges we ran into

Between the team members, this is the first time all members have attempted full stack development, back end and front end implementation and logic. Applications such as Reach, jsx, and supabase. All of these limitations created a huge learning battle and at times lead to issues that required heavy debugging due to lack of expertise in the specific area.

Accomplishments that we're proud of

We are deeply proud of the means that our front-end logic and UI design looks. We feel very proud of the seamlessness of the design and how interactive it feels to the user, especially with the more complex features such as the chatbot and for you feed gallery.

What we learned

Applications JSX programming, Database Management, React Programming, UI designing, and API

What's next for Foodies' Food Finder

Next for Foodies’ Food Finder is expanding beyond the web into a full mobile experience, making it easier for users to discover free food and nearby spots on the go. We also plan to deepen our AI integration by moving beyond basic recommendations to smarter, context-aware suggestions powered by Anthropic, such as personalized daily picks, event alerts, and natural-language search like “free food near me tonight.” This will make the app feel more like an intelligent assistant rather than just a directory.

We also want to introduce real user accounts with secure authentication using Supabase, allowing users to create profiles with usernames and passwords, save favorites, and manage their own posted events. This shift enables a more personalized and social experience, laying the foundation for features like reviews, notifications, and user-driven content.