Cooking Home offers users an extensive recipe search engine and recommends recipes based on their favorite foods and the ingredients they have at home.
cooking-home-frontend repository contains the frontend-side codebase of the Cooking Home application.
Client URL: https://cooking-home.kro.kr
github/cooking-home-backend: https://github.com/kohdc1723/cooking-home-backend
.
├── public # static files
│ ├── favicon.ico # favicon
│ ├── index.html # main HTML file
│ ├── logo192.png # image for small screen
│ ├── logo512.png # image for large screen
│ ├── manifest.json # manifest file for progressive web
│ └── robots.txt # file for the web crawlers
│
├── src # source code for the react app
│ ├── app # app folder
│ │ ├── api # api slices
│ │ │ ├── apiSlice.js # redux api slice for cooking-home-backend
│ │ │ └── edamamApiSlice.js # redux api slice for Edamam
│ │ │
│ │ └── store.js # redux store configuration
│ │
│ ├── components # reusable react components
│ │ ├── DropdownButton.jsx # DropdownButton component
│ │ ├── Footer.jsx # Footer component
│ │ ├── Header.jsx # Header component
│ │ ├── Layout.jsx # Layout component
│ │ ├── Welcome.jsx # Welcome component
│ │ └── index.js # exporting components
│ │
│ ├── constants # constants folder
│ │ └── labels.js # labels for the recipe search filter
│ │
│ ├── features # features folder
│ │ ├── auth # features related to authentication
│ │ │ ├── components # components related to authentication
│ │ │ │ ├── AuthBotton.jsx # AuthButton component
│ │ │ │ ├── Login.jsx # Login component
│ │ │ │ ├── PersistLogin.jsx # PersistLogin component
│ │ │ │ ├── RequireAuth.jsx # RequireAuth component
│ │ │ │ └── index.js # exporting components
│ │ │ │
│ │ │ ├── authApiSlice.js # redux api slice for auth feature
│ │ │ └── authSlice.js # redux slice for auth states
│ │ │
│ │ ├── preference # features related to preference
│ │ │ ├── components # components related to preference
│ │ │ │ ├── NewPreference.jsx # NewPreference component
│ │ │ │ ├── PreferenceSetting.jsx # PreferenceSetting component
│ │ │ │ ├── PreferenceSettingForm.jsx # PreferenceSettingForm component
│ │ │ │ └── index.js # exporting components
│ │ │ │
│ │ │ └── preferenceApiSlice.js # redux api slice for preference feature
│ │ │
│ │ ├── recipe # features related to recipe
│ │ │ ├── components # components related to recipe
│ │ │ │ ├── MultipleSelect.jsx # MultipleSelect component
│ │ │ │ ├── RecipeCard.jsx # RecipeCard component
│ │ │ │ ├── RecipeDetail.jsx # RecipeDetail component
│ │ │ │ ├── RecipeFinder.jsx # RecipeFinder component
│ │ │ │ ├── RecipeResult.jsx # RecipeResult component
│ │ │ │ ├── RecipeSuggest.jsx # RecipeSuggest component
│ │ │ │ ├── SingleSelect.jsx # SingleSelect component
│ │ │ │ ├── SuggestCard.jsx # SuggestCard component
│ │ │ │ ├── SuggestContainer.jsx # SuggestContainer component
│ │ │ │ └── index.js # exporting components
│ │ │ │
│ │ │ ├── searchApiSlice.js # redux api slice for search feature
│ │ │ ├── searchParamsSlice.js # redux slice for search parameters states
│ │ │ └── suggestApiSlice.js # redux api slice for suggest feature
│ │ │
│ │ └── users # features related to users
│ │ ├── components # components related to users
│ │ │ ├── AccountSetting.jsx # AccountSetting component
│ │ │ ├── AccountSettingForm.jsx # AccountSettingForm component
│ │ │ ├── Profile.jsx # Profile component
│ │ │ ├── Register.jsx # Register component
│ │ │ └── index.js # exporting components
│ │ │
│ │ └── usersApiSlice.js # redux api slice for users feature
│ │
│ ├── hooks # custom hooks
│ │ ├── useAuth.js # handling authentication
│ │ ├── useLocalStorage.js # handling local storage
│ │ ├── usePersist.js # handling login persistence
│ │ └── useQueryString.js # handling query strings
│ │
│ ├── images # images folder
│ │ ├── logo.png # Cooking Home logo image
│ │ ├── welcome-primary.png # image for welcome page
│ │ └── welcome-secondary.png # image for welcome page
│ │
│ ├── styles # styles folder
│ │ └── muiCustomStyles.js # custom styles for Material UI
│ │
│ ├── utils # utility functions
│ │ └── recipeApiUtils.js # utility functions related to recipe search
│ │
│ ├── App.jsx # root component
│ ├── index.css # global css
│ └── index.js # entry point for rendering react app
│
├── tailwind.config.js # configuration for Tailwind CSS
├── .gitignore # gitignore file
└── README.md # README file
- The landing page.
- RecipeFinder Page provides extensive recipe search engine powered by Edamam API.
- The search engine utilizes the URL querystring parameters.
- RecipeSuggest Page offers recipe recommendations based on users' favorite food and ingredients they have at home.
- Users can login to the service.
- Users can create a new account.
- Register Page provides detailed feedback messages.
- Users can change user information (username, password)
- Users can change user preference (favorites, ingredients) which will be used for recipe recommendations
