Plan&Dine

• 

  Home Page

• 

  Recipe Collection Page

• 

  Meal Plan Page

• 

  Grocery List Page

• 

  Nutrition Tracking Page

Inspiration

Plan&Dine was inspired by the frustration of planning meals and making it easy for families especially mothers. I wanted to create a platform that simplifies the process, making it easier for users to discover new dining experiences and plan their 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.js
• tailwindcss
• toastify
• vercel