Meal Picks

Meal Picks is a feature-rich, fully-responsive web application tailored for efficient recipe management, meal planning, and shopping list building. It provides users with a comprehensive solution for organising and planning meals, in addition to sharing and discovering recipes within the community platform.

Link to the functional prototype here

Tech Stack

The Meal Picks project uses a range of technologies, including:

• React: A frontend library for creating dynamic interactive user interface.
• Material UI: A user interface library that provides a set of pre-designed components, allowing for the rapid development of a clean and consistent user interface.
• Express: A framework for building the server-side logic and serve the API endpoints for the app.
• MongoDB: A NoSQL database used to store and manage the meal data, user preferences, and other application-related information.

Core Features

• User-friendly interface for recipe management, meal planning, and shopping list creation.
• Intuitive meal planning system allowing users to organize recipes into weekly plans.
• Responsive design for an optimal user experience across devices.
• Integrated with a recipe scraper for popular recipe websites, simplifying the process of effortlessly creating and saving recipes.

Web Stack and Explanation

The choice of the web stack was based on a strategic decision to effectively develop a prototype, so it made sense to use technologies that I have experience with to accelerate the development process.

Due to the size of this project, the Bulletproof React architecture was incorporated to ensure a maintainable and scalable project structure over time as the project requirements evolve.

Furthermore, Redux was implemented to effectively manage states in a centralized way, ensuring a predictable state flow and efficient data management across different components, all while keeping the user interface synchronised with the states.

Technical Challenges

One particularly challenging aspect was the organisation and structure of the code. Because of this project’s size, I realized how important maintaining an organised structure would be. I ensured that the components were designed to be reusable, utilizing props to accommodate minor variations. I also utilize the MUI theme to implement a design system for the ease of updating global styles across the entire application from a centralized location.

Another challenging aspect was designing database models that could accommodate the growing needs of the application. Given my limited experience in database management, I chose to simplify the process by embedding related data into a single document. This approach allows for efficient querying and retrieval of relevant data within the collection.

Lessons Learned

One of the most valuable lessons I learned was the importance of organisation and structure of the code. Implementing the Bulletproof React architecture greatly improved organisation and maintainability. By adhering to its guidelines and prioritizing best practices from the beginning, it helped establish a solid foundation for a scalable and maintainable development process.

Future Improvements

I have a few additional features that I would love to add into this project. One of which is real-time updates for meal plans and shopping lists using Websocket to keep data synchronised across various devices. Additionally, it would be beneficial to include a calorie calculator that is based on the ingredients and serving portions specified in the recipes.