React 2024: A Practical Guide With Typescript & Mern Stack

API Integration, Data Handling, Authentication, Error Handling, CRUD Operations, Secure Endpoints, Access Control

What you'll learn

Develop a shopping cart using React, TypeScript, and JSON Server.

Manage state with Redux Toolkit.

Implement advanced features like search, filter, and sorting functionalities, and incorporate animated notifications.

Create a MERN application enabling users to compose and explore original stories.

Implement secure User Authentication and proficient token management.

Execute comprehensive CRUD operations, including seamless file uploads.

Requirements

Basic knowledge of React, TypeScript and Nodejs

Description

This course will involve building two advanced applications from scratch.Project 1:We will create a React application using TypeScript. We will set up React Router Dom 6 and establish a Redux Toolkit store with dummy data from a JSON file. Alongside this, we are going to define interfaces and create custom hooks to streamline data management and interaction. Configuration of a JSON server to handle the data will be included. Following this, we will integrate API calls and manage data in Redux Toolkit using createApi and useDataQuery. Additionally, we will implement search, filter, and sorting functionalities on the home page. Furthermore, we will perform cart actions such as adding items to the cart and getting the cart total, manage cart item component actions (increase and decrease quantity, clearing the cart, and remove items from the cart), and integrate animated notifications.Project 2:We will begin by configuring Express with MongoDB using Mongoose. We will emphasize secure user authentication by utilizing JWT, Bcrypt, and Express-Validator. Progressing, we will implement robust CRUD operations for the Story Model, ensuring seamless data management. By integrating Multer, we will enable effortless file uploads within the application. Shifting focus to the front-end, we will meticulously set up React (without TypeScript) with React Router Dom 6, enabling efficient routing within the application. Moreover, we will handle token authentication, manage error responses adeptly, and empower users to create stories with file uploads, enhancing interactivity. Finally, we will conclude the app by implementing update and delete functionalities for stories and incorporating author-based access control to maintain data security and integrity.

Overview

Section 1: Introduction and Overview

Lecture 1 Introduction

Lecture 2 Apps Features Overview

Section 2: Frontend Implementation and Data Handling

Lecture 3 Setting Up React with TypeScript, React Router 6, Redux Toolkit, and JSON Server

Lecture 4 Integrating API Calls and Data Handling in Redux Toolkit

Lecture 5 Styling Home Page, Implementing Filter and Sorting Data Functionalities

Section 3: Enhancing User Experience

Lecture 6 Implementing Cart Actions addToCart and cartTotal

Lecture 7 Implementing CartItem Component Actions, and Adding Animated Notifications

Section 4: Backend Development and API Integration

Lecture 8 Setting Up Express with MongoDB Using Mongoose

Lecture 9 Implementing User Authentication with JWT, Bcrypt, and Express-Validator

Lecture 10 Creating CRUD Operations, Implementing Controllers, Routes & Securing Endpoints

Lecture 11 Implementing Multer for Poster Uploads

Section 5: Advanced Full-Stack Development

Lecture 12 Setting Up React App, Concurrent Server-Client Execution, & Router Configuration

Lecture 13 Authentication Slice Setup with Redux Toolkit

Lecture 14 Token Management, User Authentication, Conditional Rendering & Logout Function

Lecture 15 Handling Error Responses

Lecture 16 Story Creation with File Uploads and Data Fetching

Lecture 17 Implementing Update and Delete for Stories with Author-Based Access Control

This course is ideal for developers seeking a practical understanding and deeper insights into React, Redux Toolkit and Nodejs