This device is not compatible.
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.
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!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.