Bit By Bit - Plan My Plate

Plan smarter and cook better with a personalized recipe planner that organizes your kitchen, reduces waste, and helps you make the most of every ingredient — from fridge to table.

Comment

Inspiration

The team was inspired by our love for cooking and curiosity of trying different cuisines. And let's be real, everyone has those days where we don't know what to cook. Sometimes, we want to be fancy. Sometimes, we want to be healthy and maybe other times, we just want to whip up something that doesn't require much time or energy. We wanted to create a platform where people can share this common passion for food, and where everyone can benefit and find something that is tailored to them and their needs.

What It Does

Plan My Plate is an all-in-one recipe tracker that allows you to share your recipes, explore others' recipes and track your fridge inventory and shopping list. It is designed to make cooking more fun and personalised.

  • Daily Quote or Fun Fact: Firstly, the home page gives the chef a randomised fact or quote on the world of food.

  • Fridge Inventory Tracker: Secondly, the chef can input their fridge inventory, allowing them to track their inventory. They can just go to our website and see what they have in their fridge to help them decide what they want to cook, instead of having to rummage through their kitchen.

  • Recipe Sharing & Exploring: Thirdly, the chef can post the recipes that they want to share with others. They can also view recipes posted by fellow chefs and decide what they want to make and indulge in.

  • Meal Cart & Shopping List: Once having decided what they want to whip up, the chef can add that specific recipe to their meal cart and when they plan to make it, they can see the ingredients and add it to their personalised shopping list to keep track of what they need to make the dishes for the day or even week.

-Overall Shopping List: There will also be a separate page where the chef can see their overall shopping list to see what they need to cook their desired delicacy.

Building Process

Design Phase The team took inspiration for some of the pages from existing food websites. We then sketched the design on figma including the flow and placements of each page.

Development Phase

  1. Sketching of designs
  2. Implementing design in Figma
  3. Implementing design and routing using React + Vite
  4. Creating a database to store entries and login sessions
  5. Integration of front end and back end
  6. Documentation

Technologies

  • Frontend: React + Vite to create a dynamic and interactive user interface.
  • Backend: Express.js as a bridge between frontend and database
  • Storage: Local storage and Supabase to store user-specific data
  • Design: CSS to bring our designs to life, giving the website the necessary appeal
  • Version Control: GitHub

Challenges Faced

The first challenge we faced was the time constraint. The short 4-week timeline required us to adapt and learn new technologies at a fast pace. Balancing this challenge and making a functional, useful website required us to:

  • Prioritise features that will give us the most value without taking too much time to implement
  • Manage Time between learning, implementing and debugging
  • Fast Learning of technologies that was new to most of the team members

The second main challenge is the integration of frontend with backend. As we implemented each end separately, we experienced various code breaks when integrating. We had to sync real-time data for numerous components like linking recipes, inventories etc. to a specific user. A clean, easy and appealing user experience also had to be maintained. To solve this, instead of integrating everything, we integrated both ends component by component. This ensured a smoother integration and also enabled us to debug more efficiently

Another challenge we faced is various merge conflicts in the GitHub when doing the version control. As each of us worked on a major component concurrently, when we wanted to push and merge our code, we had multiple merge conflicts. Another contributing factor to this is due to multiple members working on shared components like Recipe Popup. To resolve the merge conflicts, we communicated more efficiently to ensure each member knows what is going on and they can act accordingly depending on what others are doing. This lessened our merge conflicts significantly and makes sure that every member is on the same page regarding features.

The last challenge that we will be mentioning is connecting recipe logic to inventory and shopping list. As this is heavily based on user data, we were initially confused on how to solve the issue of connecting the logic. This layered interaction required a lot of testing between frontend and backend. Due to the time constraints, we had to cut down on the inclusion of fridge inventory

Accomplishments That We're Proud Of

  • The team agrees that although most of us are new to this as we have no experience with building a website, we produced something that was way beyond our capabilties, a functional website and a platform that brings joy to fellow food lovers.
  • We created a smooth, user-friendly interface
  • Integrating data that is very reliant on a user's personal preference

Knowledge Gained

  • To adapt and manage our time to ensure that we had a working website within just a few weeks
  • The process of integration of frontend and backend in a website
  • Hands-on experience with technologies such as Express.js, Supabase and React etc.
  • Hands-on experience is very valuable and more useful than theory based experience
  • Handling real-time interactions and changes.
  • Solving merge conflicts in GitHub

What's next for Plan My Plate

We hope to expand the website to include more features that were in the design phase but eventually omitted due to time constraints. One of these features was to link the inventory with the shopping list. Our initial plan was to integrate these two components where if a chef needs three apples for a certain recipe but they already have one in their inventory, the shopping list would indicate they only need two apples. Another feature that had to be omitted was a more detailed meal planning which would include the chef adding a certain recipe to their calendar and when they clicked on that recipe in the calendar, the recipe card will pop up. The recipe would also be removed after the day has passed. If given an opportunity, we would like to add these features and some others that were left out.

Conclusion

In conclusion, this experience has enhanced our skills in many different areas such as frontend development, backend development, integration of these two ends, UI/UX design etc. We gained experience of real-world challenges and how to solve them. We also learnt the importance of soft skills such as efficient communication, prioritisation, and collaboration with other people.

Most importantly, we created something that stemmed from our passion and curiosity which just makes this project more memorable and invaluable to us.

Built With

Share this project:

Updates