{"id":19223996,"url":"https://github.com/skycooper/recipeappreactstyledcomponent","last_synced_at":"2026-05-05T14:31:28.972Z","repository":{"id":178953805,"uuid":"560595325","full_name":"SkyCooper/RecipeAppReactStyledComponent","owner":"SkyCooper","description":"Project aims to create a Recipe app using React and styled components.","archived":false,"fork":false,"pushed_at":"2022-11-04T08:02:40.000Z","size":7751,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T10:15:08.050Z","etag":null,"topics":["axios","axios-react","html-css-javascript","react","react-hooks","react-router","styled-components"],"latest_commit_sha":null,"homepage":"https://cooper-recipe-app.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SkyCooper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-01T20:55:27.000Z","updated_at":"2022-11-13T01:24:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"370fd3a8-6908-400a-9b4e-e0d258209e27","html_url":"https://github.com/SkyCooper/RecipeAppReactStyledComponent","commit_stats":null,"previous_names":["skycooper/recipeappreactstyledcomponent"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SkyCooper/RecipeAppReactStyledComponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyCooper%2FRecipeAppReactStyledComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyCooper%2FRecipeAppReactStyledComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyCooper%2FRecipeAppReactStyledComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyCooper%2FRecipeAppReactStyledComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SkyCooper","download_url":"https://codeload.github.com/SkyCooper/RecipeAppReactStyledComponent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyCooper%2FRecipeAppReactStyledComponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32653455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","axios-react","html-css-javascript","react","react-hooks","react-router","styled-components"],"created_at":"2024-11-09T15:10:10.702Z","updated_at":"2026-05-05T14:31:28.952Z","avatar_url":"https://github.com/SkyCooper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Project : Recipe App (Styled Components)\n\n## Check The Live Website ➡️ https://cooper-recipe-app.netlify.app/\n\n## Visualization of the Website\n\n![Form](./recipe.gif)\n\n## Description\n\nProject aims to create a Recipe app using React and styled components.\n\n## Learning Outcomes\n\nAt the end of the project, you will be able to;\n\n- improve coding skills within HTML \u0026 CSS \u0026 JS \u0026 ReactJS.\n\n- use git commands (push, pull, commit, add etc.) and Github as Version Control System.\n\n## Problem Statement\n\n- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.\n\n## Project Skeleton\n\n```\nProject(folder)\n|\n|----README.md\n├── public\n│     └── index.html\n├── env (id / key)\n├── src\n│    ├── assests\n│    ├── components\n│    │       ├── cards\n│    │       |      ├── Cards.jsx\n│    │       |      ├── Cards.style.jsx\n│    │       ├── globalStyles\n│    │       |      ├── theme.js\n│    │       |      ├── Flex.jsx\n│    │       |      ├── globalStyle.jsx\n│    │       ├── header\n│    │       |      ├── Header.jsx\n│    │       |      ├── Header.style.jsx\n│    │       ├── nav\n│    │       |      ├── Navbar.jsx\n│    │       |      ├── Navbar.style.jsx\n│    ├── pages\n│    │       ├── about\n│    │       |      ├── About.jsx\n│    │       |      ├── About.style.jsx\n│    │       ├── detail\n│    │       |      ├── Detail.jsx\n│    │       |      ├── Detail.style.jsx\n│    │       ├── home\n│    │       |      ├── Home.jsx\n│    │       |      ├── Home.style.jsx\n│    │       ├── login\n│    │       |      ├── Login.jsx\n│    │       |      ├── Login.style.jsx\n│    │       ├── logout\n│    │       |      ├── Logout.jsx\n│    │       |      ├── Logout.style.jsx\n│    │       ├── register\n│    │       |      ├── Register.jsx\n│    │       |      ├── Register.style.jsx\n│    ├── router\n│    │       └── AppRouter.jsx\n│    │       └── PrivateRouter.jsx\n│    ├── App.js\n│    ├── index.js\n│    ├── recipe.gif\n│    ├── edemam-APIkey-instructions.pdf\n└── package.json\n```\n\n### Dependencies\n\n- react-router-dom@6.3\n\n- styled-components\n\n- react-icons\n\n- axios\n\n- https://api.edamam.com/search?q=${food}\u0026app_id=${appID}\u0026app_key=${appKey}\u0026mealType=${mealType}\n\n\n### Overview\n\nI mastered HTML \u0026 CSS \u0026 JS \u0026 ReactJS features in this project.\nYou can see the visual representation of the website above.\n\n## Notes\n\n- Step 1: Create React App using `npx create-react-app recipe-app`\n\n- Step 2: For images you can use [Images](./src/assets).\n\n- Step 3: Push your application into your own public repo on Github\n\n- Step 4: Add project gif to your project and README.md file.\n\n## Resources\n\n- 🔥 You can use [`edemam API`](https://www.edamam.com/) for your own work.\n\n- 🔥 For instructions you can use [`instructions PDF](./edemam-APIkey-instructions.pdf) for your own work.\n\n## Support\n- Open an Issue, I will check it a soon as possible 👀\n\n- Don't forget to show your support by  ⭐ the project!!\n\n\n## Quick start\n\n- Clone this repo using git clone https://github.com/SkyCooper/RecipeAppReactStyledComponent.git\n\n- Move to the appropriate directory: cd recipe-app.\n\n- Run npm run install in order to install dependencies and clean the git repo.\n\n- Change configurations in /src/config/config.js according to your cosmicjs bucket.\n\n- Run npm run dev to start the project in dev mode.\n\n- Run npm run build to build the project in /dist folder.\n\n- Now you're ready to rumble!\n\n## Contributing\n\n- Fork it (https://github.com/SkyCooper/RecipeAppReactStyledComponent)\n\n- Create your feature branch (git checkout -b feature/fooBar)\n\n- Commit your changes (git commit -am 'Add some fooBar')\n\n- Push to the branch (git push origin feature/fooBar)\n\n- Create a new Pull Request\n\n\n# \u003ccenter\u003e ⌛ Happy Coding ✍ \u003c/center\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskycooper%2Frecipeappreactstyledcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskycooper%2Frecipeappreactstyledcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskycooper%2Frecipeappreactstyledcomponent/lists"}