#whatsinmypantry

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.

Try the Live project here

Libraries used in this project

• 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 file tree

• 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;
  • 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;
• 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.