This device is not compatible.

Integrate Redux in a Front-end Template

PROJECT


Integrate Redux in a Front-end Template

In this project, we will learn how to work with a pre-built React template. We'll use Redux to add advanced functionalities and the Faker library to generate fake (but reasonable) data for our application.

Integrate Redux in a Front-end Template

You will learn to:

Work with a pre-built React template.

Use Redux and React Hooks to develop the React application.

Uplift the state to share the data between multiple functional components.

Display values from a fake API to the React application.

Skills

React.js

Web Development

Prerequisites

Good understanding of JavaScript

Good understanding of Redux

Basic understanding of React components and state

Basic understanding of React useState and useEffect Hooks

Technologies

React

Redux

Faker

Javascript

Project Description

In this project, we will learn to integrate Redux into a React template. We will use fake data to populate our application and use React Hooks to manage the state.

We will start by changing the website’s branding. We’ll update the site name, information, and other content displayed to a user. Next, we will add the user login and registration functionalities to our application using Redux.

After that, we will use the Faker library to generate fake (but reasonable) data for our application. We will categorize our data as free and premium. To fetch and view premium data, a user must purchase a (dummy) subscription.

In the end, we will create separate UIs for the free and premium data fetched from the Faker library.

Project Tasks

1

Introduction

Task 0: Getting Started

Task 1: Start the Application

2

Application Branding

Task 2: Update the Navbar Component

Task 3: Update the Landing Page Header Component

Task 4: Update the Landing Page Component

3

Setting up Redux

Task 5: Create a Redux Slice

Task 6: Create and Provide Redux Store

4

Setting up Registration and Login Functionality

Task 7: Create Registration Component

Task 8: Create the Login Component

Task 9: Create a New Route for the Login Page

Task 10: Create an Action for Registration

Task 11: Create an Action for Login

Task 12: Dispatch an Action on Registering

Task 13: Dispatch an Action on Logging in

5

Using Faker Library

Task 14: Use the Faker Library

Task 15: Render Fetched Data from Faker

Task 16: Create a Header Component for Data Templates

Task 17: Create a Free Template Component

Task 18: Create a Premium Template Component

Congratulations!