{"id":18419551,"url":"https://github.com/tutods/chakra-weather-app","last_synced_at":"2025-09-05T00:41:45.386Z","repository":{"id":120506136,"uuid":"481713762","full_name":"tutods/chakra-weather-app","owner":"tutods","description":"This project is created after my challenge to xgeeks interview. This time I make some changes!","archived":false,"fork":false,"pushed_at":"2022-04-25T10:01:36.000Z","size":9597,"stargazers_count":6,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T13:37:21.722Z","etag":null,"topics":["axios","chakra-ui","chakraui","openweathermap","openweathermap-api","react","typescript","xgeeks"],"latest_commit_sha":null,"homepage":"https://chakra-weather-app.vercel.app","language":"TypeScript","has_issues":false,"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/tutods.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-04-14T18:43:41.000Z","updated_at":"2024-02-05T09:46:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"62d9181b-09b5-4670-915c-18ae14cdc963","html_url":"https://github.com/tutods/chakra-weather-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tutods/chakra-weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Fchakra-weather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Fchakra-weather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Fchakra-weather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Fchakra-weather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutods","download_url":"https://codeload.github.com/tutods/chakra-weather-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Fchakra-weather-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273695223,"owners_count":25151481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","chakra-ui","chakraui","openweathermap","openweathermap-api","react","typescript","xgeeks"],"created_at":"2024-11-06T04:17:24.250Z","updated_at":"2025-09-05T00:41:45.374Z","avatar_url":"https://github.com/tutods.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./public/media/home.png\" width=\"auto\" height=\"500px\" \u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eReact Weather App\u003c/h1\u003e\n\u003cp align=\"center\" style=\"margin:0\"\u003eThis repository contain a \u003cstrong\u003eReact\u003c/strong\u003e project using the \u003cstrong\u003eOpen Weather Map\u003c/strong\u003e API.\u003c/p\u003e\n\u003cp align=\"center\"\u003eThis project are created to a \u003cstrong\u003exgeeks\u003c/strong\u003e challenge.\n\u003cbr /\u003e\n\u003ca align=\"center\" href=\"https://github.com/TutoDS/react-weather-app\"\u003eFirst Version\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/react-1E4174?style=for-the-badge\u0026logo=react\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"webpack\" src=\"https://img.shields.io/badge/webpack-1E4174?style=for-the-badge\u0026logo=webpack\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"chakra ui\" src=\"https://img.shields.io/badge/chakra%20ui-1E4174?style=for-the-badge\u0026logo=chakra-ui\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-1E4174?style=for-the-badge\u0026logo=TypeScript\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"eslint\" src=\"https://img.shields.io/badge/eslint-1E4174?style=for-the-badge\u0026logo=eslint\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"prettier\" src=\"https://img.shields.io/badge/prettier-1E4174?style=for-the-badge\u0026logo=prettier\u0026logoColor=white\" /\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\u003ch2\u003e💡 What you will found?\u003c/h2\u003e\n\nYou can found the folders below:\n\n```\n.\n├── public\n└── src\n    ├── assets\n    │   ├── styles\n    │   └── media\n    ├── components\n    ├── contexts\n    ├── pages\n    │   └── Main\n    └── shared\n        ├── @types\n        ├── hooks\n        ├── services\n        └── utils\n```\n\n\u003ch3 style=\"font-weight: 300\"\u003e🗂 Details\u003c/h3\u003e\n\n\u003e **`public`:** files you want each user can access, like images, favicon, etc.\n\n\u003e **`src/assets`:** on this folder I save my global styles (`global.scss`) and project media (SVG files, images, ...)\n\n\u003e **`src/components`:** all the components to this project\n\n\u003e **`src/contexts`:** in some applications I use contexts, so this folder is for them\n\n\u003e **`src/pages`:** usually I use `react-router-dom` package, and for that, the `Main/index.tsx` is the file with all routes, and to each page I create another folder and respective files in `src/pages`\n\n\u003e **`src/shared/@types`:** you can imagine that is the folder to storage all the types created for this project (yes, I use Typescript!)\n\n\u003e **`src/shared/hooks`:** folder to storage custom hooks\n\n\u003e **`src/shared/services`:** folder to storage external services, usually with `axios` package\n\n\u003e **`src/shared/utils`:** common functions, regex's, etc.\n\n\u003ch3 style=\"font-weight: 300\"\u003e📄 Files\u003c/h3\u003e\n\nIn this boilerplate you can found this initial files:\n\n\u003e **`.webpack.config.js`:** **Webpack** config to run the web server and build the project\n\n\u003e **`.dockerignore`, `Dockerfile` and `docker-compose.yml`:** files related with Docker (if you want create a container)\n\u003e \u003csmall\u003eIn this case, I create only the image to run a dev server (not a build server)\u003c/small\u003e\n\n\u003e **`.prettierrc` and `.prettierignore`:** **Prettier** configuration files;\n\n\u003e **`tsconfig.json`:** My configurations to **TypeScript** \u003csmall\u003e(I use `baseUrl` option to clean the imports)\u003c/small\u003e\n\n\u003ch2 style=\"font-weight: 300\"\u003e⚔️ Original Challenge\u003c/h2\u003e\n\nIf you have interest on details about the original challenge you can see the [`assignment.md` file](./assignment.md).\n\n\u003ch2 style=\"font-weight: 3000\"\u003e📸 Final Result\u003c/h2\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ch3 style=\"font-weight: 300\"\u003eHomepage\u003c/h3\u003e\n\u003cimg src=\"./public/media/home.png\" alt=\"home\" width=\"auto\" height=\"600px\"  /\u003e\n\n\u003ch3 style=\"font-weight: 300\"\u003eAdd a new City\u003c/h3\u003e\n\u003cimg src=\"./public/media/add-city.png\" alt=\"add city\" width=\"auto\" height=\"600px\" /\u003e\n\n\u003ch3 style=\"font-weight: 300\"\u003eRemove one City\u003c/h3\u003e\n\u003cimg src=\"./public/media/remove-city.png\" alt=\"remove city\" width=\"auto\" height=\"600px\" /\u003e\n\n\u003ch3 style=\"font-weight: 300\"\u003eView City Weather for the next 7 days\u003c/h3\u003e\n\u003cimg src=\"./public/media/city-weather.png\" alt=\"city\" width=\"auto\" height=\"600px\" /\u003e\n\n\u003ch3 style=\"font-weight: 300\"\u003eView more details about specific day\u003c/h3\u003e\n\u003cimg src=\"./public/media/weather-info.png\" alt=\"day details\" width=\"auto\" height=\"600px\" /\u003e\n\u003c/div\u003e\n\n\u003ch2 style=\"font-weight: 300\"\u003e🧾 To Do / Improvements\u003c/h2\u003e\n\n-   [x] ~Make the app responsive~\n-   [x] ~Add **Docker** configuration files~\n-   [ ] Use **Redux**\n-   [ ] Create tests\n-   [x] ~Add **ESLint**~\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\u003cdiv align=\"right\" style=\"margin-top: 50px\"\u003e\n\u003ch3 style=\"font-weight: 300\"\u003e\n🧑🏻‍💻 About Me\n\u003c/h3\u003e\n\n\u003ca href=\"https://github.com/TutoDS\" alt=\"TutoDS\"\u003e\n\u003cimg src=\"https://github.com/tutods.png\" alt=\"Daniel Sousa @TutoDS\" width=\"100px\" style=\"border-radius: 100%\"\u003e\n\u003cbr /\u003e\n \u003csub\u003e\u003cb\u003eDaniel Sousa @TutoDS\u003c/b\u003e\u003c/sub\u003e\n\u003c/a\u003e\n\n\u003cdiv style=\"margin: 20px 0\" /\u003e\n\n[facebook]: https://facebook.com/tutods2014\n[twitter]: https://twitter.com/tutods\n[youtube]: https://youtube.com/tutods2014\n[instagram]: https://instagram.com/dsousa_12\n[linkedin]: https://www.linkedin.com/in/daniel-sousa-tutods/\n[gitlab]: https://gitlab.com/jdaniel.asousa\n\n[\u003cimg src=\"https://img.shields.io/badge/Facebook%20-%232671E5.svg?\u0026style=for-the-badge\u0026logo=Facebook\u0026logoColor=white\" alt=\"Facebook\"/\u003e][facebook] [\u003cimg src=\"https://img.shields.io/badge/Twitter%20-%231DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" alt=\"Twitter\"/\u003e][twitter]\n\n[\u003cimg src=\"https://img.shields.io/badge/LinkedIn%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"/\u003e][linkedin] [\u003cimg src=\"https://img.shields.io/badge/Instagram%20-%23E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" alt=\"Instagram\"/\u003e][instagram]\n\n[\u003cimg src=\"https://img.shields.io/badge/YouTube%20-%23FF0000.svg?\u0026style=for-the-badge\u0026logo=YouTube\u0026logoColor=white\" alt=\"YouTube\"/\u003e][youtube] [\u003cimg src=\"https://img.shields.io/badge/Gitlab%20-%23181717.svg?\u0026style=for-the-badge\u0026logo=gitlab\u0026logoColor=white\"/\u003e][gitlab]\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutods%2Fchakra-weather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutods%2Fchakra-weather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutods%2Fchakra-weather-app/lists"}