Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kohdc1723/cooking-home-frontend
Frontend side of the Cooking Home application
https://github.com/kohdc1723/cooking-home-frontend
amazon-cloudfront amazon-route53 amazon-s3 cicd edamam-api github-actions javascript material-ui mobile-first reactjs redux-toolkit tailwind-css
Last synced: about 14 hours ago
JSON representation
Frontend side of the Cooking Home application
- Host: GitHub
- URL: https://github.com/kohdc1723/cooking-home-frontend
- Owner: kohdc1723
- Created: 2023-10-31T23:24:31.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-04T00:46:49.000Z (12 months ago)
- Last Synced: 2024-01-05T01:14:22.673Z (12 months ago)
- Topics: amazon-cloudfront, amazon-route53, amazon-s3, cicd, edamam-api, github-actions, javascript, material-ui, mobile-first, reactjs, redux-toolkit, tailwind-css
- Language: JavaScript
- Homepage: https://cooking-home.kro.kr
- Size: 22.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cooking-home-frontend
***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](https://cooking-home.kro.kr)
> github/cooking-home-backend: [https://github.com/kohdc1723/cooking-home-backend](https://github.com/kohdc1723/cooking-home-backend)
---
---
# Tech stack
### Built with
![javascript-logo]
![react-logo]
![tailwindcss-logo]
![mui-logo]
![redux-logo]
![edamam-logo]
### CI/CD with
![s3-logo]
![cloudfront-logo]
![route53-logo]
![github-actions-logo]
---
---
# File structure
.
├── 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
---
---
# Screenshots
## Welcome Page
- The landing page.
### Desktop
### Mobile
---
## RecipeFinder Page
- RecipeFinder Page provides extensive recipe search engine powered by Edamam API.
- The search engine utilizes the URL querystring parameters.
### Desktop
### Mobile
---
## RecipeSuggest Page
- RecipeSuggest Page offers recipe recommendations based on users' favorite food and ingredients they have at home.
### Desktop
### Mobile
---
## Login Page
- Users can login to the service.
### Desktop
### Mobile
---
## Register Page
- Users can create a new account.
- Register Page provides detailed feedback messages.
### Desktop
### Mobile
---
## Profile Page
- Users can change user information (username, password)
- Users can change user preference (favorites, ingredients) which will be used for recipe recommendations
### Desktop
### Mobile
---
---
[javascript-logo]: https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black
[route53-logo]: https://img.shields.io/badge/Amazon%20Route53-8C4FFF?style=for-the-badge&logo=amazonroute53&logoColor=white
[github-actions-logo]: https://img.shields.io/badge/Github%20Actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white
[react-logo]: https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black
[redux-logo]: https://img.shields.io/badge/Redux-764ABC?style=for-the-badge&logo=redux&logoColor=white
[s3-logo]: https://img.shields.io/badge/Amazon%20S3-569A31?style=for-the-badge&logo=amazons3&logoColor=white
[cloudfront-logo]: https://img.shields.io/badge/Amazon%20CloudFront-232F3E?style=for-the-badge&logo=amazonaws&logoColor=white
[mui-logo]: https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white
[tailwindcss-logo]: https://img.shields.io/badge/Tailwind%20CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white
[edamam-logo]: https://img.shields.io/badge/Edamam%20API-6ACC00?style=for-the-badge&logoColor=white