This app was envisioned with a mobile first approach, as a final Front End academic project which combines knowledge of HTML, CSS, Javascript, React and REST API.
The users begin their experience by searching for ingredients and adding them to a list (the pantry). Once ingredients are added, the Recipes page will list a number of recipes based on the ingredients in the user's pantry. Clicking on a Recipe card will open detailed information such as health score, ingredient list with options for number of servings and step by step instructions.
- React redux: Store management of data needed to be available globally;
- Redux persist: Local storage of the redux store with the possibility to blacklist data not needed to be saved locally;
- React Router: App Navigation;
- Axios: HTTP requests;
- Material UI: Base UI react components framework;
- use-debounce: Reduce the number of requests on user input;
- react-infinite-scroll-component: Smooth loading of recipes in the Recipe list;
- App.js
- components
- MainNav
- MainNavList: Manages the list of nav objects, can also add or remove navigation options here;
- MainNavMobile: Navigation drawer for mobile view;
- ActionButtons: Bottom navigation for mobile view;
- ErrorPage: Error page for 404 Not found and for 402 Api call limit reached;
- Header: App main header, calls the main nav components;
- Loading: Loading animation for various components when waiting for promises;
- ScrollTop: Button which allows smooth scroll back to anchor element;
- ThemeButton: Switch that controls light and dark theme options;
- MainNav
- pages
- about: Information about the app and copyright, present as a page in the desktop version and included in the nav drawer for the mobile version.
- home: Index route of the app in mobile view and a permanent left drawer for desktop;
- MyPantry: Lists the ingredients added by the user with the option to remove;
- SearchIngredients: Presents a text input where the user can write the ingredient's names, the value is debounced to reduced number of calls, and presents 5 possible results with an image aid and a button to add or remove;
- Intro: Logo and text presentation of the home page;
- recipes: This page displays a list of recipes based on the ingredients listed in the pantry;
- Filters: Component which controls the filter options of the recipe list;
- RecipeDetails: Page that displays all the information about a single recipe based on its id;
- RecipeList: List of recipes obtained as a result from the api with a scroll based loading for more recipes and allows users to star recipes;
- NoRecipes: Component displayed when there are no recipes, either because no ingredients were added to the pantry or the filter options returned empty;
- starred: Displays a list of recipes that were previously starred in the recipes page. Also uses the RecipeList component but passes a predetermined list of recipes as a prop;
- components
- services: Using Axios it controls all http requests to the api;
- store: Redux store connected to redux persist so that needed data is saved in local storage;
- Routes.js: Lists all the possible routes of the App and passes booleans for mediaqueries and system theme setting;
- Theme.js: Controls the color theme for the App.
- Utils.js: Custom hook used in the App.