{"id":15840165,"url":"https://github.com/axendeveloper/react-weather","last_synced_at":"2025-03-15T18:33:41.262Z","repository":{"id":108870724,"uuid":"330224724","full_name":"aXenDeveloper/react-weather","owner":"aXenDeveloper","description":"Weather app that allows you to check the current weather and forecast in your chosen city.","archived":false,"fork":false,"pushed_at":"2024-02-16T10:21:38.000Z","size":895,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T04:05:18.746Z","etag":null,"topics":["i18n","openweathermap","react","typescript"],"latest_commit_sha":null,"homepage":"https://weather.axendev.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aXenDeveloper.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":"2021-01-16T18:04:40.000Z","updated_at":"2024-01-15T09:43:18.000Z","dependencies_parsed_at":"2024-10-27T01:23:28.950Z","dependency_job_id":null,"html_url":"https://github.com/aXenDeveloper/react-weather","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aXenDeveloper%2Freact-weather","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aXenDeveloper%2Freact-weather/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aXenDeveloper%2Freact-weather/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aXenDeveloper%2Freact-weather/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aXenDeveloper","download_url":"https://codeload.github.com/aXenDeveloper/react-weather/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243775755,"owners_count":20346252,"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":["i18n","openweathermap","react","typescript"],"created_at":"2024-10-05T16:41:49.347Z","updated_at":"2025-03-15T18:33:41.254Z","avatar_url":"https://github.com/aXenDeveloper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![GitHub Header](https://github.com/aXenDeveloper/react-weather/blob/main/screenshots/githubHeader.png?raw=true)\n\n# (React) Weather app\n\nWeather app is an application that allows you to check the current weather and forecast in your chosen city.\n\nThe application allows you to use: geolocation, change the display language and unit conversion (degrees, speed).\n\n_API: [OpenWeatherMap](https://openweathermap.org/)_\n\n## 🧰 Install\n\nUse commands:\n\n```bash\ngit clone https://github.com/aXenDeveloper/react-weather\n\nnpm i\n\nnpm start\n```\n\n## 🛠️ Configuration\n\nIn the project directory go to file **src/.env_template** and rename the file to **.env**\n\n### API\n\nCreate a secreet key API form [OpenWeatherMap](https://openweathermap.org/) and paste in to the **.env** file:\n\n```bash\nREACT_APP_KEY_API_WEATHER=\n```\n\n### Title website\n\nChange title website in:\n\n1. **/public/index.html**:\n   ```bash\n   \u003ctitle\u003eWeather app - aXenDev.net\u003c/title\u003e\n   ```\n2. **src/.env**:\n\n   ```bash\n   REACT_APP_TITLE_WEBSITE=XXX\n   ```\n\n3. **public/manifest.json**:\n   ```bash\n   \"short_name\": \"Weather app\",\n   \"name\": \"Weather app - aXenDev.net\",\n   ```\n\n## 🌎 Languages\n\nBefore we start - [Check the supported language for OpenWeatherMap API](https://openweathermap.org/current#multi)\n\n- {lang} - Short name of the language _for example: `pl`_,\n- {lang*flag} - Short name of the country [Check the supported country](https://flagpedia.net/index) \\_for example: `pl`*,\n- {lang*full} Full name of the language \\_for example: `polish`*\n\n---\n\n### Configuration\n\nGo to **src/i18n.ts** and edit **detection** section:\n\n```bash\nlookupCookie: 'aXenDev_WeatherAppCookie',\nlookupLocalStorage: 'aXenDev_WeatherAppLocalStorage',\nlookupSessionStorage: 'aXenDev_WeatherAppSessionStorage',\n```\n\n_(Optional)_ You can edit alse cookie config:\n\n```bash\ncookieMinutes: 10,\ncookieDomain: 'weather.aXenDev.net',\n```\n\nMore options in [i18next config documentation](https://www.i18next.com/overview/configuration-options).\n\n### Add new lang\n\n1. Go to **src/lang** and create folder for a language for example `pl`,\n2. Create file **translation.json** in **src/lang/{lang}**,\n3. Go to **src/i18n.ts** and add to import new language:\n   ```bash\n   import translation{lang} from './lang/{lang}/translation.json';\n   ```\n4. Add new lang in resources variable:\n   ```bash\n   {lang}: {\n   \ttranslation: translation{lang}\n   }\n   ```\n5. Create a new button. Go to **src/components/ChangeLang.tsx** and add new element li via function inside **ChangeLangStyle**:\n   ```bash\n   {createLang('{lang}', '{lang_flag}', '{lang_full}')}\n   ```\n\n## 🔨 Deployment\n\nCommand:\n\n```bash\nnpm run build\n```\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n## 👍 Tests\n\nCommand:\n\n```bash\nnpm test\n```\n\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n## 📂 Packages\n\n| Packages                                            | Description                                 |\n| --------------------------------------------------- | ------------------------------------------- |\n| [React](https://reactjs.org/)                       | Library for Single Page Application _(SPA)_ |\n| [React Router](https://reactrouter.com/)            | Pages in React                              |\n| [React Query](https://react-query.tanstack.com/)    | Connection with API                         |\n| [Typescript](https://www.typescriptlang.org/)       | Types in JavaScript                         |\n| [Styled components](https://styled-components.com/) | Style in JS                                 |\n| [i18n](https://react.i18next.com/)                  | Pages translations                          |\n| [Font Awesome](https://fontawesome.com/)            | Icons SVG                                   |\n\n## 🌦️ Demo Weather Icons\n\n### Group 2xx: Thunderstorm\n\n- [Thunderstorm with heavy rain](https://weather.axendev.net/demoweather/202/d),\n- [Light thunderstorm (Day)](https://weather.axendev.net/demoweather/210/d),\n- [Light thunderstorm (Night)](https://weather.axendev.net/demoweather/210/n),\n- [Thunderstorm with drizzle](https://weather.axendev.net/demoweather/231/d)\n\n### Group 5xx: Rain\n\n- [Light rain (Day)](https://weather.axendev.net/demoweather/500/d),\n- [Light rain (Night)](https://weather.axendev.net/demoweather/500/n),\n- [Freezing rain](https://weather.axendev.net/demoweather/511/d),\n- [Shower rain](https://weather.axendev.net/demoweather/521/d)\n\n### Group 6xx: Snow\n\n- [Snow (Day)](https://weather.axendev.net/demoweather/601/d),\n- [Snow (Night)](https://weather.axendev.net/demoweather/601/n),\n- [Shower sleet](https://weather.axendev.net/demoweather/613/d),\n- [Rain and snow](https://weather.axendev.net/demoweather/616/d)\n\n### Group 7xx: Atmosphere\n\n- [Mist](https://weather.axendev.net/demoweather/701/d),\n- [Volcanic ash](https://weather.axendev.net/demoweather/762/d),\n- [Tornado](https://weather.axendev.net/demoweather/781/d)\n\n### Group 800: Clear\n\n- [Clear (Day)](https://weather.axendev.net/demoweather/800/d),\n- [Clear (Night)](https://weather.axendev.net/demoweather/800/n)\n\n### Group 800: Clear\n\n- [Few clouds: 11-25% (Day)](https://weather.axendev.net/demoweather/801/d),\n- [Few clouds: 11-25% (Night)](https://weather.axendev.net/demoweather/801/n),\n- [Broken clouds: 51-84%](https://weather.axendev.net/demoweather/803/d),\n- [Overcast clouds: 85-100%](https://weather.axendev.net/demoweather/804/d),\n\n## 📷 Graphics\n\n![1](https://github.com/aXenDeveloper/react-weather/blob/main/screenshots/1-min.png?raw=true)\n\n![2](https://github.com/aXenDeveloper/react-weather/blob/main/screenshots/2-min.png?raw=true)\n\n![3](https://github.com/aXenDeveloper/react-weather/blob/main/screenshots/3-min.png?raw=true)\n\n![4](https://github.com/aXenDeveloper/react-weather/blob/main/screenshots/4-min.png?raw=true)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxendeveloper%2Freact-weather","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxendeveloper%2Freact-weather","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxendeveloper%2Freact-weather/lists"}