{"id":15598650,"url":"https://github.com/josuto/weather-app","last_synced_at":"2026-02-25T19:34:14.941Z","repository":{"id":152264245,"uuid":"594834351","full_name":"Josuto/weather-app","owner":"Josuto","description":"Simple weather app to practice React.","archived":false,"fork":false,"pushed_at":"2024-08-04T10:28:26.000Z","size":736,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-28T09:30:05.279Z","etag":null,"topics":["github-actions","husky","mui5","react-testing-library","reactjs","tdd","trunk-based-development","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://weather-app-josuto.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Josuto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-01-29T19:25:59.000Z","updated_at":"2024-08-04T10:28:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"c8af40b0-805a-4b09-a92d-a0cc49e49073","html_url":"https://github.com/Josuto/weather-app","commit_stats":{"total_commits":96,"total_committers":3,"mean_commits":32.0,"dds":"0.45833333333333337","last_synced_commit":"bebcd44e7cd1a2786d1e75ce880a97a96909a1b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Josuto/weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josuto%2Fweather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josuto%2Fweather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josuto%2Fweather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josuto%2Fweather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Josuto","download_url":"https://codeload.github.com/Josuto/weather-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josuto%2Fweather-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29836310,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T19:08:47.527Z","status":"ssl_error","status_checked_at":"2026-02-25T18:59:04.705Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["github-actions","husky","mui5","react-testing-library","reactjs","tdd","trunk-based-development","typescript","vercel-deployment"],"created_at":"2024-10-03T01:40:54.158Z","updated_at":"2026-02-25T19:34:14.926Z","avatar_url":"https://github.com/Josuto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a simple single-page [weather app](https://weather-app-bl3j-mj7uar3t4-josu-martinezs-projects.vercel.app) made in\nReact.\n\n[![CD](https://github.com/Josuto/weather-app/actions/workflows/pipeline.yml/badge.svg?branch=main)](https://github.com/Josuto/weather-app/actions/workflows/pipeline.yml)\n![Test Results](./badges/badge-test-results.svg)\n![Coverage](./badges/badge-test-coverage.svg)\n\n# How it works\n\nThe intent of this app is purely academic; I created it to further practice my knowledge\nin web front-end app development in React. This weather app specifies a dropdown list that\nserves as a municipality search bar so that any user can pick one at a time. When she does\nit, a card showing several weather data (max, min, and current temperature, rain\nprobability, etc.) is displayed.\n\nCards include a save and a close button. When clicking on the save\nbutton, some municipality identification data is stored at the local storage of the user's\nbrowser, thus enabling the weather app to re-fetch the weather data of her favourite\nmunicipalities whenever she comes back to the site where the app is hosted (unless she\nmanually deletes the browser local storage contents). Once saved, the user is also able to\ndiscard the card from her favourite municipalities, thus deleting its related data from\nthe local storage.\n\nThe close button, on another hand, not only removes the card from the\nview, but also deletes its related data from the local storage.\n\nLast but not least, the weather app only works for Spanish municipalities, but I am pretty\nsure that you are smart enough to update or even scale it to make it work with other\nmunicipalities around the world ;-)\n\n# Followed practices\n\nI followed Test Driven-Development (TDD) to build this app. This means that before writing\nany new feature, I first focused on building a test that I expected the code to pass\nfollowing the red-green-refactor loop. That\nway, [paraphrasing Dave Farley](https://twitter.com/davefarley77/status/1640382698207297536),\nI was able to work in small steps and getting really useful feedback on my endeavour.\n\nOn the topic of validation, it is also worth mentioning that I followed Kent C.Dodds'\n[Testing Trophy](https://testingjavascript.com/) methodology to write the right (mostly\nintegration) tests to gain the required confidence on the validity of my code.\n\nAnother important point to mention is that single-page is not synonym of putting all the\ncode in one single file. Despite React is some fantastic library to build front-end\napplications, we (developers) should follow standard patterns and techniques to modularise\nour web apps, as mentioned by Juntao QIU\nin [this inspiring article](https://martinfowler.com/articles/modularizing-react-apps.html).\nSo I did.\n\nFinally, I also followed the [trunk-base development](https://trunkbaseddevelopment.com/)\nmethodology. Not to say that I needed\nany other Git workflow for this project since I am the one and only developer of this app,\nbut I wanted to highlight the main benefit of this methodology: avoid the merge hell.\nBesides, I truly believe that you do not need other branches when it comes to build an app\nmeant to provide users with new features (use feature toggles/flags if you are to\nincorporate experimental ones).\n\n# Used technologies\n\nHere is a list of the most outstanding technologies that I used to implement this app:\n\n- [Create React App](https://github.com/facebook/create-react-app) with React 18\n- [Typescript](https://www.typescriptlang.org/)\n- [MUI](https://mui.com/) component library\n- [Custom MUI theme](https://mui.com/material-ui/customization/theming/)\n  and React [useMediaQuery](https://mui.com/material-ui/react-use-media-query/) for\n  responsive layouts\n- [useSRW](https://swr.vercel.app/) to automatically fetch weather data updates from an\n  external service\n- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n  with [Jest](https://jestjs.io/) to validate the code\n- [Husky](https://github.com/typicode/husky) to define both a pre-commit hook to TS\n  compile and [prettify](https://prettier.io/) the code and a\n  pre-push hook to run all the code tests before performing version control\n- [Vercel](https://vercel.com/) as a deployment and hosting infrastructure\n- CI/CD via [Github Actions](https://docs.github.com/en/actions)\n\n# Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section\nabout [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for\nmore information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best\nperformance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section\nabout [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more\ninformation.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at\nany time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (\nwebpack, Babel, ESLint, etc) right into your project so you have full control over them.\nAll of the commands except `eject` will still work, but they will point to the copied\nscripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and\nmiddle deployments, and you shouldn’t feel obligated to use this feature. However we\nunderstand that this tool wouldn’t be useful if you couldn’t customize it when you are\nready for it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosuto%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosuto%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosuto%2Fweather-app/lists"}