Navigate Flavour Frontiers! A fun app to get recipes and tutorial videos
With your team, you'll conceive and execute a design that solves a real-world problem by integrating data received from multiple server-side API requests. You will also continue to learn about agile development methodologies to help you work collaboratively. You will implement feature and bug fixes using git branch workflow and pull requests. You will write your own user stories and acceptance criteria in GitHub Issues to help your team stay on track with the project. Using GitHub Project as a means to track the status of your project tasks will help you understand the benefits of Kanban boards.
The following tools are to be used in this project:
- HTML and CSS
- Bootstrap
- Take input from a user and respond from that input
- Modals
- Client-side storage
- Responsive. When the web-page is resized the site responds accordingly
- the two server side API we used are Youtube AI and TheMealDB API
The Dish Discovery Project is a fun food web application designed to help users explore new recipes and cooking ideas, watch easy related videos and save their favourite searches.
The main motivation behind Dish Discovery is to inspire culinary creativity and make the process of finding new and exciting recipes more accessible.
The project was built to address the common challenge of deciding what to cook by providing a user-friendly interface for discovering, exploring, and saving recipes.
It aims to solve the problem of monotony in cooking and meal planning by offering a diverse range of recipes for users to try.
During the development of this project, valuable insights into web development, API integration, and user experience design were gained. Additionally, skills in handling asynchronous requests and data manipulation were honed.
This application is a single page web-application. It will ask the user for an input of a recipe of their choice. Once they click search it will populate a recipe and a youtube video linked to the recipe they have found. The user will also have the ability to add their recipe's to favourites, just so they can do a quick view on the recipe when needed.
Below is our approach to this task:
- We split the task up so that each group member is assigned a task.
- Planning and SetUp
- Simple Front End Dev
- API Integration
- Local Storage and Modal
- Modal finalisation & Debugging
- Documentation and Debrief
Overall, we as a group felt we were put to our paces for this challenge. The main difficulties we faced were with the both APIs. But as tikto has mentioned documentation is the key to get out any mess. Documentation was one of the key reasons as to why we managed to pull it through this project.
As a group we worked really well together. No issues were faced. However, there somethings we could improve on:
- When merging the branches on github we should've kept certain things constant. For example, the API keys and URL. By not keeping this constant it led to many conflicts and in the end we had to manually add our work to the main branch which is not efficient.
- Use a different video API as youtube kept hitting its daily usage limit very quickly.
- Something out of the blue could be to implement docker, node and nginx. Docker so we can containerise the application so its easy to deploy if we decide to go to live with this project. Ngix would be a server for hosting the application. Node would be used for javascript.
To run the Dish Discovery Project locally, follow these steps:
Clone the repository to your local machine. Navigate to the project directory. Open the index.html file in a web browser.
Repo can be accessed here:
https://github.com/TuuPuu/dish-discovery
Deployed site can be accessed here:
https://tuupuu.github.io/dish-discovery/
- Enter your desired dish or cuisine in the search bar.
- Click on the "Search" button to retrieve recipe suggestions.
- Explore the displayed recipe instructions, ingredients and related video
- Save your favorite recipes using the "Add to Favorites" button.
- Hitesh Patel - Github Profile
- Elora Ainoa - Github Profile
- Omar Ibrahim - Github Profile
- Celia Chan - Github Profile
This project is licensed under the MIT License.