Plan&Dine

• 

  Home Page

• 

  Recipe Collection Page

• 

  Meal Planner Page

• 

  Grocery Lists Page

• 

  Nutrition Tracker Page

Inspiration

Plan&Dine was inspired by the frustration of planning meals, aiming to make it easier for families, especially mothers, to discover new dining experiences and plan meals with ease.

What it does

Plan&Dine is a comprehensive platform that helps users plan and manage their meals. Key features include:

• Intercontinental Recipes: Access a vast library of global recipes catering to diverse tastes and diets.
• Weekly Meal Planning: Plan meals considering nutrition, restrictions, and preferences.
• Grocery List Creation: Generate shopping lists based on planned meals.
• Daily Nutrition Tracking: Track daily nutrient intake for dietary goals.

How i built it

We built Plan&Dine using:

• Front-end: React.js
• Icons: React Icons
• Styling: Tailwind CSS
• Recipe API: Dummy JSON data (for development purposes)

Challenges i ran into

• Integrating multiple features seamlessly
• Managing complex recipe data
• Ensuring responsiveness and user experience

Accomplishments that i'm proud of

• Creating a user-friendly interface
• Developing a comprehensive meal planning feature
• Successfully integrating recipe API
• Users can download meal plans and grocery lists as images for easy sharing.

What i learned

• The importance of user experience and intuitive design
• The value of React.js for complex front-end apps
• The need for robust testing and iteration

What's next for Plan&Dine

• Real API Integration: Replace dummy data with a real recipe API
• Enhanced Features: Add user auth, meal collaboration, and personalized recommendations
• User Feedback: Gather feedback to refine and improve.

Plan&Dine aims to revolutionize meal planning, making it easier and more enjoyable for users worldwide.

Built With

• dummy-json
• github
• react-icons
• react-toastify
• react.js
• tailwind-css
• vercel