*** REACT (Front End) ***

index.js
- wrap App component inside BrowserRouter

App.js
- define search and favorite contexts and wrap App div inside Context.Provider
- define Routes for Pages


* CONTEXTS *

SearchContext.js
- initialize context object for search context (string)

Favorites.js
- initialize context object for favorites context (array)


* PAGES *

SearchResults.js
- serves as both Home page and Search Results page
- contains NavSearch and RecipeResults components

Recipe.js
- contains NavSearch and RecipeDetail components
- pass recipe id obtained from URL path as prop to RecipeDetail component

Favorites.js
- contains NavSearch and RecipeCard components
- Axios used to get all recipes FROM Express server
- consumes/uses favorites context to display only favorited items from all recipes


* COMPONENTS *

NavSearch.js
- provides/updates search context to search query entered on input field
- redirects to Search Results page on form submission

RecipeResults.js
- used by both Home page and Search Results page
- consumes/uses search context to get search query (if empty, then get all recipes; if not empty, then get recipes from search results)
- Axios used to get all recipes OR get recipes from search results FROM Express server
- logic to show X results based on Y results per page
- contains RecipeCard CHILD component
- contains PageNumbers CHILD component
- set unique recipe id as key and pass recipe object as prop to RecipeCard component
- pass total pages and paginate callback function as props to PageNumbers component

	=> RecipeCard.js
	- consumes/uses favorites context to show red heart icon for favorited item
	- provides/updates favorites context by adding favorited item to array OR removing favorited item from array
	- contains RecipeRating CHILD component
	- contains ShareSocial CHILD component
	
		=> RecipeRating.js
		
		=> ShareSocial.js
		- share individual recipe on Facebook, Twitter (X), Telegram, WhatsApp, Linkedin, Pinterest, Reddit, and Email

	=> PageNumbers.js
	- calls the paginate callback function to pass data back to RecipeResults PARENT component

RecipeDetail.js
- Axios used to get individual recipe FROM Express server
- contains NavBreadcrumb CHILD component
- contains RecipeRating CHILD component
- contains ShareSocial CHILD component

	=> NavBreadcrumb.js
	- provides/updates search context to blank when clicking to Home page
	
	=> RecipeRating.js
	
	=> ShareSocial.js


*** EXPRESS (Back End) ***

app.js
- Axios used to get all recipes OR get individual recipe DIRECTLY FROM API
- calls the searchRecipes function in recipe-search.js

recipe-search.js
- Axios used to search recipes DIRECTLY FROM API
- returns search results back to app.js