MealSync

Project Logo

Inspiration

The inspiration behind MealSync came from witnessing how many families struggle to access consistent, healthy meals despite the availability of government and community programs. The process of finding eligibility, nearby sites, and scheduling pickups is often fragmented and confusing. We wanted to create a single unified platform that simplifies access, reduces barriers, and ensures no one goes hungry.

What it does

MealSync is a centralized meal assistance platform that:

Allows families to check eligibility for programs.
Helps users find nearby food distribution sites quickly.
Enables scheduling pickups with reminders, ensuring no missed opportunities.
Provides a secure and private authentication system with Google Sign-In or account creation.
Offers multi-language support to make the platform accessible to diverse communities.

How we built it

Frontend: React + Vite with TailwindCSS for styling and React Router for navigation.
Authentication: Integrated Firebase Auth with Google Sign-In and account creation flows.
Backend: Built with FastAPI (Python) to handle eligibility checks, site lookups, and scheduling logic.
Database: Used SQLite/Postgres depending on deployment environment.
Hosting: Deployed backend on Google Cloud Run and frontend on Vercel/Netlify.
Version Control: Managed with GitHub for collaboration.

Challenges we ran into

Resolving React Router conflicts when nesting <Router> components.
Handling Firebase CORS issues and Cross-Origin-Opener-Policy errors during authentication.
Ensuring the UI was intuitive yet functional, with a balance between aesthetics and usability.
Coordinating between backend agents and the frontend to ensure seamless API communication.
Fixing deployment pipeline issues when the UI folder was outside the project root.

Accomplishments that we're proud of

Designed a user-friendly landing page that introduces MealSync with clear call-to-actions.
Successfully integrated Firebase authentication and protected routes for features.
Built modular frontend pages (Eligibility, Intake, Schedule, Sites, Impact) that align with real-world needs.
Overcame multiple Git/GitHub configuration issues and established a proper CI/CD pipeline.
Created a brand identity with the MealSync logo and tagline: “AI-powered. No hunger.”

What we learned

Best practices in React project structure and router management.
The importance of secure authentication flows and protected routes.
How to debug Firebase cross-origin issues and properly configure API calls.
Collaboration and version control strategies, including handling repo remotes and commits.
How design decisions (like feature cards on the homepage) directly impact user experience.

What's next for MealSync

Expand eligibility checks to more federal and state programs.
Implement AI-powered recommendations for users to maximize benefits.
Add calendar integration for automated pickup reminders.
Improve multilingual support with community-driven translations.
Scale infrastructure to support nationwide deployments.
Partner with local organizations to ensure real-time updates on meal site availability.