This device is not compatible.

Build a Weather App Using React, Redux, and Immutable.js

Free

PROJECT


Build a Weather App Using React, Redux, and Immutable.js

Build a weather forecast app using React, Redux Toolkit, Immutable.js, and Plotly to fetch, display, and interact with temperature data from OpenWeatherMap.

Build a Weather App Using React, Redux, and Immutable.js

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

Hear what others have to say
Join 1.4 million developers working at companies like

Relevant Courses

Use the following content to review prerequisites or explore specific concepts in detail.