This device is not compatible.
You will learn to:
Set up a Redux store with Immutable.js for safe state handling.
Use Redux Toolkit’s createAsyncThunk to manage async actions.
Fetch and structure weather forecast data from an external API.
Visualize temperature data using Plotly’s charting library.
Respond to chart clicks and update the UI using Redux actions.
Add error handling and clean up fetch logic for production readiness.
Skills
Web Development
API Integration
Interactive Real-time Web Applications
Data Plotting
Prerequisites
Experience with React components and hooks
Basic understanding of Redux and asynchronous actions
Knowledge of API requests using fetch or axios
Familiarity with data visualization tools
Technologies
React
Redux
Project Description
In this project, we’ll build a weather forecast application using React, Redux Toolkit, Immutable.js, and Plotly. We’ll start by setting up Redux with immutable state management, followed by creating actions, reducers, and middleware to handle asynchronous API calls. We’ll integrate the OpenWeatherMap API to fetch forecast data based on user input, then render and interact with the data through a clean UI.
We’ll use Plotly to visualize temperature trends in a responsive chart, allowing users to explore temperatures across dates. The project emphasizes clean separation of concerns, good error handling practices, and the use of modern tooling to manage complex application state in a predictable and scalable way.
Project Tasks
1
Build the Core Application
Task 0: Get Started
Task 1: Get the API Key
Task 2: Configure Redux Store with Immutable.js Support
Task 3: Implement Redux Action Creators and Thunk
Task 4: Build the Weather Search Form
Task 5: Display Current and Selected Temperatures
2
Add Interactivity to the Application
Task 6: Plot the Weather Forecast Chart
Task 7: Show the Chart in App and Handle Clicks
Task 8: Highlight Best Practices and Add Finishing Touches
Congratulations!
Subscribe to project updates
Atabek BEKENOV
Senior Software Engineer
Pradip Pariyar
Senior Software Engineer
Renzo Scriber
Senior Software Engineer
Vasiliki Nikolaidi
Senior Software Engineer
Juan Carlos Valerio Arrieta
Senior Software Engineer
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.