Meal Planner
UI | FRONT-END DEV | API
This website provides calories focused inspiration for your next meal. The website takes the stress out of thinking about what to cook next. It suggests dishes based on the calories count and laid out easy to follow recipes for the user to cook. The website uses the API from Spoonacular to retrieve recipes from the backend using the calorie information provided by the user.

Project Goal

Utilse API
By integrating an API, the system can efficiently handle complex data and display it in a user-friendly manner, ultimately enhancing the system's usability and effectiveness. This Web-App Incorporate an API into the system to fetch information from the backend and present it in an aesthetically pleasing format on the webpage.
Easy to use
It's crucial that the design and functionality of the website is user-friendly. This means that the website should be easy to navigate, regardless of the user's technical proficiency. By ensuring that the website has a simple, intuitive interface, users are more likely to stay on the website for longer periods of time.

Responsive
Guarantee that the website is compatible with various devices and exhibits a high level of responsiveness. Whether someone is accessing the website from a desktop computer, a laptop, a tablet, or a smartphone, they should be able to view the website's content without any issues.
Features
Finding the perfect recipe
Don't know what to cook for your next meal? Don't worry. We got you. Simply put in your daily calorie target, for example, 2000, and our system will automatically generate three meals for you to choose from. We have around 10,000 recipes in our system to help you find your next perfect meal.

Portability and accessibility
One of the key advantages of this meal planner web app is its accessibility, as it allows users to access and use the app from any location, at any time. With the ability to access the web app on the go, users can plan their meals and make healthy choices no matter where they are, whether they're at home, work, or on the road.

Nutritional information
The app also provide users with detailed nutritional information for each recipe, including calorie count, serving size, cooking time and much more.

Summary
This website aims to offer meal inspiration while focusing on calorie count. By utilizing Spoonacular's API, the website provides recipes based on the user's desired calorie intake, thus taking the stress out of meal planning. The user is presented with easy-to-follow recipes, making cooking an enjoyable experience. The website retrieves recipes from the backend, using the calorie information provided by the user, resulting in a tailored and personalized approach to meal planning.
Other Design Projects





Frontend Projects










