Weather app that allows you to check the current weather and forecast in your chosen city.
GPL-3.0 License
Weather app is an application that allows you to check the current weather and forecast in your chosen city.
The application allows you to use: geolocation, change the display language and unit conversion (degrees, speed).
API: OpenWeatherMap
Use commands:
git clone https://github.com/aXenDeveloper/react-weather
npm i
npm start
In the project directory go to file src/.env_template and rename the file to .env
Create a secreet key API form OpenWeatherMap and paste in to the .env file:
REACT_APP_KEY_API_WEATHER=
Change title website in:
/public/index.html:
<title>Weather app - aXenDev.net</title>
src/.env:
REACT_APP_TITLE_WEBSITE=XXX
public/manifest.json:
"short_name": "Weather app",
"name": "Weather app - aXenDev.net",
Before we start - Check the supported language for OpenWeatherMap API
pl
,pl
,polish
Go to src/i18n.ts and edit detection section:
lookupCookie: 'aXenDev_WeatherAppCookie',
lookupLocalStorage: 'aXenDev_WeatherAppLocalStorage',
lookupSessionStorage: 'aXenDev_WeatherAppSessionStorage',
(Optional) You can edit alse cookie config:
cookieMinutes: 10,
cookieDomain: 'weather.aXenDev.net',
More options in i18next config documentation.
pl
,import translation{lang} from './lang/{lang}/translation.json';
{lang}: {
translation: translation{lang}
}
{createLang('{lang}', '{lang_flag}', '{lang_full}')}
Command:
npm run build
See the section about deployment for more information.
Command:
npm test
See the section about running tests for more information.
Packages | Description |
---|---|
React | Library for Single Page Application (SPA) |
React Router | Pages in React |
React Query | Connection with API |
Typescript | Types in JavaScript |
Styled components | Style in JS |
i18n | Pages translations |
Font Awesome | Icons SVG |