Weather application made with React
Visit the ongoing project on https://weather-vidomarkas.netlify.com/
Learn how to implement:
- react hooks
- context API
Consolidate knowledge in:
- Handling REST APIs
- Using local storage
Implementing react hooks
- Learning how to use useEffect properly to replace lifecycle methods
- Learning how to update state with useState, which does not automatically merge with the previous state, but overwrites it (using spread operator)
Navigation between dynamically created location components
Bad choice when selecting how to structure data in the location context file. Refactored context, app and location components.
Implemented react router to switch between the locations. Decided to go with react carousel and locations list where locations would be rendered all at once. This avoids the location being rendered each time when it is opened.
- Remove added location
- Implement Local storage
- Add animations
- Ability to change measure units
- Dots representing locations, current highlighted
- Transform to PWA
- Get IP location
- Get current weather and forecast from weatherbit API
- Create a list of weekdays
- Apply dynamic weather icons
- Change background depending on time of day
- Implement react router to switch between the locations
- Create a dropdown suggestion list when searching for location with Algolia autocomplete
- Increase accuracy of location with geolocation using web API
- loading screen and spinner
- Hide API keys with environmental variables
How to use
In the project directory, run:
Installs dependencies necessary to run the app.
Runs the app in the development mode.
The page will reload if you make edits.
You will also see any lint errors in the console.