Inspiration
We noticed how overwhelming meal planning can be juggling dietary needs, recipe variety, and grocery lists wastes time and energy. We wanted to simplify healthy, personalized meal planning with AI and smart tools, all in one seamless platform.
What it does
SmartMeal Planner is an AI-powered meal planning and recipe assistant. Users can search thousands of diverse recipes, filter by ingredients or dietary preferences, save favorites, build weekly meal plans, generate optimized grocery lists, and get intelligent recipe suggestions all through an intuitive, mobile-friendly web app.
How we built it
We used React + Next.js for a fast, responsive frontend, styled with Tailwind CSS and modern Shadcn UI components. The backend leverages Supabase for database management, authentication, and storage. We integrated multiple public recipe APIs to populate the app with a vast, realistic recipe library. For smart suggestions and ingredient substitutions, we implemented AI-powered logic with optional OpenAI API integration. Animations, responsive design, and accessibility best practices complete the user experience.
Challenges we ran into
- Resolving Supabase query and state management issues that initially caused meal plans and favorites to get stuck at loading.
- Ensuring the dark/light theme toggle worked seamlessly across devices and persisted user preferences.
- Managing recipe API data structures and ensuring clean, consistent displays from multiple sources.
- Balancing feature richness with performance for a smooth, fast-loading experience.
Accomplishments that we're proud of
- Fully responsive, polished UI/UX with clean dark and light modes.
- Integrated massive recipe coverage across diverse cuisines, meal types, and dietary preferences.
- Advanced meal planner with AI suggestions, smart grocery lists, and user profile customization.
- Bug-free, production-ready deployment with optimized performance and accessibility compliance.
What we learned
We deepened our expertise in Supabase integration, advanced state management in React, modern UI libraries like Shadcn, and scalable full-stack architecture. We also learned the importance of seamless user experience and the value of iterative debugging, especially under hackathon time constraints.
What's next for SmartMealPlanner
We're excited to:
- Launch a mobile app version with React Native for on-the-go meal planning.
- Expand AI capabilities to generate full weekly meal plans based on dietary profiles.
- Add pantry tracking, so users can plan meals using ingredients they already have.
- Enable community-submitted recipes with moderation.
- Introduce PWA functionality for offline use and installability.
- Explore real-time collaboration for family or group meal planning.
Log in or sign up for Devpost to join the conversation.