Introduction
The application was developed with the goal of giving users directions and ingredient details including cook time to their favourite dishes
Timeline
We decided on a timeline of 2 weeks over which the entire application would be developed tested and debugged. Firstly we developed the home and recipe pages after which navigation and search functionality was added which made for a functioning app, additionally we decided to move the ingredients to a different screen to enable easy access to other recipes which use the same ingredients. Finally we added a solid colour theme to all the pages and fixed styling issues
Components:
Various Components were used we will look into a few of those components and their functioning in detail
Home Component:
The starting page of the app contains all the recipes in the app in a long list of image based cards. Each of these cards feature the image of the dish , and the cuisine category it belongs to with the name of the dish, enabling easier access to users . This list is made using FlatList Component from the React-Native library
Search Component:
It enables the user to search the database of dishes and find their desired result it is made to be reactive,i.e searches for every letter you type
Cuisine Component:
It gives the user the option to filter the dishes based of the cuisine of their choice thereby making it easier and much more user friendly to browse your favourite dishes
View Recipe Component
This is the component that displays the user's requested dish and its ingredients with detailed instructions
Navigation Component
This component manages the required navigation between screens and offers the user 3 options to navigate between home, cuisine and search screens. This is managed using a Drawer based StackNavigator which enables a smooth transition between screens
Ingredient Component
This component displays the ingredients of the selected dish and enables reverse search operation by the user , i.e user can search dishes using the ingredients.
Hurdles during Development:
These are some hurdles that we faced while developing this application collaboratively:
Navigation Hell:
While the other components worked seamlessly the navigation component proved to be a challenge as we had different coding styles and this made it a challenge to navigate between pages as the page must remain mostly static while re-rendering only the main content.
API integration:
We initially wanted to use https://www.edamam.com/ 's food api to generate the database but due to various time constraints we had to cancel using that and simply use an object with all the data , while the functions are ready to fetch data from the API, we had to work on the front end so we stopped short of that and published our project.
Further Enhancements:
API integration
Separate Dark & Light Theme
Calorie Count of Each Dish
Github Repo Link:
https://github.com/ARAVIND1828/CookBook
Collaborators:
Aravind P
Girish Theja AS
Thank you for Reading through our Blog !! .
Feel Free to let us know your opinion on our project in the comments section.
Top comments (0)