React 2024: A Practical Guide with TypeScript & MERN Stack

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

What you will 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.


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.

Introduction and Overview

Apps Features Overview

Frontend Implementation and Data Handling

Setting Up React with TypeScript, React Router 6, Redux Toolkit, and JSON Server
Integrating API Calls and Data Handling in Redux Toolkit
Styling Home Page, Implementing Filter and Sorting Data Functionalities

Enhancing User Experience

Implementing Cart Actions addToCart and cartTotal
Implementing CartItem Component Actions, and Adding Animated Notifications

Backend Development and API Integration

Setting Up Express with MongoDB Using Mongoose
Implementing User Authentication with JWT, Bcrypt, and Express-Validator
Creating CRUD Operations, Implementing Controllers, Routes & Securing Endpoints
Implementing Multer for Poster Uploads

Advanced Full-Stack Development

Setting Up React App, Concurrent Server-Client Execution, & Router Configuration
Authentication Slice Setup with Redux Toolkit
Token Management, User Authentication, Conditional Rendering & Logout Function
Handling Error Responses
Story Creation with File Uploads and Data Fetching
Implementing Update and Delete for Stories with Author-Based Access Control

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO

Check Today's 30+ Free Courses on Telegram!