This app allows you to:
- Check the current weather of a specific location
- Change the temperature unit (Celsius, Fahrenheit, Kelvin)
- Search for current weather data of a specific location
- via text search + Search Suggestion Menu
- via Geolocation (Coordinates)
- Changeable temperature unit (Celsius, Fahrenheit, Kelvin)
- Resettable location input
- master: The latest variant
- tanstack-query: Implementation of Tanstack Query (React Query) + Jotai frontend state management
- context-api: The original variant using ContextAPI
- Download the repo to your machine
- Make sure you have the
APIKEY
generated from the OpenWeatherMap - Create a
.env
file at/project-folder
then add this line into it:
VITE_OPENWEATHERMAP_APIKEY=paste-your-api-key-here
- Run this command in your terminal
npm run dev
- The terminal shows which port your localhost runs
- Enjoy :D
- React
- TypeScript
- SCSS
- React Icons
- Axios
- React Query
- Jotai
- localStorage API
- Geolocation API
"dependencies": {
"@tanstack/react-query": "^5.8.3",
"axios": "^1.6.1",
"jotai": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0"
},
"devDependencies": {
"@types/node": "^20.4.9",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"sass": "^1.65.1",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}