(React) Weather app

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

Install

Use commands:

git clone https://github.com/aXenDeveloper/react-weather

npm i

npm start

Configuration

In the project directory go to file src/.env_template and rename the file to .env

API

Create a secreet key API form OpenWeatherMap and paste in to the .env file:

REACT_APP_KEY_API_WEATHER=

Title website

Change title website in:

1. /public/index.html:

   <title>Weather app - aXenDev.net</title>
   

2. src/.env:

   REACT_APP_TITLE_WEBSITE=XXX
   

3. public/manifest.json:

   "short_name": "Weather app",
   "name": "Weather app - aXenDev.net",
   

Languages

Before we start - Check the supported language for OpenWeatherMap API

• {lang} - Short name of the language for example: pl,
• {langflag} - Short name of the country Check the supported country _for example: pl,
• {langfull} Full name of the language _for example: polish

---

Configuration

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.

Add new lang

1. Go to src/lang and create folder for a language for example pl,
2. Create file translation.json in src/lang/{lang},
3. Go to src/i18n.ts and add to import new language:

   import translation{lang} from './lang/{lang}/translation.json';
   

4. Add new lang in resources variable:

   {lang}: {
   	translation: translation{lang}
   }
   

5. Create a new button. Go to src/components/ChangeLang.tsx and add new element li via function inside ChangeLangStyle:

   {createLang('{lang}', '{lang_flag}', '{lang_full}')}
   

Deployment

Command:

npm run build

See the section about deployment for more information.

Tests

Command:

npm test

See the section about running tests for more information.

Packages

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

Demo Weather Icons

Group 2xx: Thunderstorm

• Thunderstorm with heavy rain,
• Light thunderstorm (Day),
• Light thunderstorm (Night),
• Thunderstorm with drizzle

Group 5xx: Rain

• Light rain (Day),
• Light rain (Night),
• Freezing rain,
• Shower rain

Group 6xx: Snow

• Snow (Day),
• Snow (Night),
• Shower sleet,
• Rain and snow

Group 7xx: Atmosphere

• Mist,
• Volcanic ash,
• Tornado

Group 800: Clear

• Clear (Day),
• Clear (Night)

Group 800: Clear

• Few clouds: 11-25% (Day),
• Few clouds: 11-25% (Night),
• Broken clouds: 51-84%,
• Overcast clouds: 85-100%,

Graphics