{"id":19109293,"url":"https://github.com/obrm/weather-widget","last_synced_at":"2026-05-06T19:02:54.632Z","repository":{"id":163025390,"uuid":"637773804","full_name":"obrm/weather-widget","owner":"obrm","description":"Weather Widget is a simple app built with React, TypeScript, SCSS \u0026 Vite, displaying weather for six locations using mock data. Designed for responsiveness, it adapts to various screen sizes on desktops, laptops, tablets \u0026 smartphones. Two versions of App.tsx \u0026 WeatherCard.tsx showcase different design patterns.","archived":false,"fork":false,"pushed_at":"2023-05-10T09:37:34.000Z","size":16452,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-22T10:57:33.354Z","etag":null,"topics":["react","sass","typescript","vite"],"latest_commit_sha":null,"homepage":"https://obrm-weather-widget.netlify.app","language":"TypeScript","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/obrm.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":"2023-05-08T11:32:56.000Z","updated_at":"2023-05-09T13:02:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"51d9ee39-f474-4e93-8150-4fcc9dd358b3","html_url":"https://github.com/obrm/weather-widget","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/obrm/weather-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fweather-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fweather-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fweather-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fweather-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/obrm","download_url":"https://codeload.github.com/obrm/weather-widget/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fweather-widget/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263861949,"owners_count":23521355,"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","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":["react","sass","typescript","vite"],"created_at":"2024-11-09T04:19:56.653Z","updated_at":"2026-05-06T19:02:54.566Z","avatar_url":"https://github.com/obrm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather Widget App\n\nWeather Widget is a basic and simple web application that displays weather for six locations using mock data from `weatherData.ts`. It's built with React, TypeScript, SCSS and Vite. The application is designed with responsiveness in mind, ensuring that the layout and components adapt seamlessly to different screen sizes and orientations, providing an optimal user experience on a variety of devices, including desktops, laptops, tablets and smartphones. There are three versions of the `App.tsx` and `WeatherCard.tsx` files, showcasing different design patterns. In this repo you will find two more branches: `with-compound-v1`, `with-compound-v2`.\n\n## Version 1 (under the master branch): Standard Components\n\nIn this version, the `WeatherCard` component receives a `cityWeather` prop and directly utilizes sub-components like `City`, `WeatherIcon`, `WeatherName`, and `Temperature`.\n\n## Version 2: Compound Components version 1 (under the with-compound-v1 branch):\n\nIn this version the `WeatherCard` component accepts a `weather` prop and children components. In the `App` component, child components are included as children of the `WeatherCard` component.\n\n## Version 3: Compound Components version 2 (under the with-compound-v2 branch):\n\nIn this version the `WeatherCard` component accepts a `weather` prop and children components. In the `App` component, a single `WeatherCardContent` child component is included as children of the `WeatherCard` component.\n\n## Screenshots\n### Desktop View\n![Weather Widget App - Desktop View](./src/assets/screenshots/desktop.png)\n\n### Mobile View\n![Weather Widget App - Mobile View](./src/assets/screenshots/mobile.png)\n\n## Live Demo\nExperience the Weather Widget App in action by visiting the live demo:\n\n[Weather Widget Live Demo](https://obrm-weather-widget.netlify.app)\n\n## Installation\n\nTo set up the Weather Widget App locally, follow these steps:\n\n1. Ensure you have [Node.js](https://nodejs.org/en) and [Git](https://git-scm.com/) installed on your machine.\n2. Clone the repository:\n\n```\ngit clone https://github.com/obrm/weather-widget.git\n```\n\n3. Navigate to the project directory:\n\n```\ncd weather-widget\n```\n\n4. Install the required dependencies:\n```\nnpm install\n```\n\n5. Start the development server:\n```\nnpm run dev\n```\n\nThe application should now be running at [http://localhost:5173](http://localhost:5173).\n\n## Usage\n\nTo use the Weather Widget App, simply open it in your browser. The application will display the weather for six locations, with data sourced from the `weatherData.ts` file.\n\nThe app is responsive, providing a seamless experience on both desktop and mobile devices. Resize your browser window to see the layout adapt to different screen sizes.\n\n#### Technologies Used\n\n* [React](https://reactjs.org/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [SCSS](https://sass-lang.com/)\n* [Vite](https://vitejs.dev/)\n\n#### License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Contact Information\nFor any questions, concerns, or support, feel free to reach me out via email: [obrm770@gmail.com](mailto:obrm770@gmail.com).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobrm%2Fweather-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobrm%2Fweather-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobrm%2Fweather-widget/lists"}