React 2025: A Practical Guide with TypeScript & MERN Stack

Name: React 2025: A Practical Guide with TypeScript & MERN Stack
Rating: 4.5 (22 reviews)

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

Created bySameh Manai

Last updated 12/2024

English

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.

Course content

5 sections • 17 lectures • 4h 14m total length

Introduction1:27
Build two apps using React and TypeScript on Mern stack, featuring a shopping cart with Redux Toolkit and a story app with authentication, file uploads, and create-read-update-delete operations.
Apps Features Overview6:33
Explore app features by managing a manga store cart: sorting, adding, removing items, and checkout with notifications. Learn authentication, error handling, and protected routes across two apps.

Setting Up React with TypeScript, React Router 6, Redux Toolkit, and JSON Server10:40
Set up a React app with TypeScript, React Router 6, Redux Toolkit, and JSON Server, creating a typed Redux store, routes, and a mock API for data.
Integrating API Calls and Data Handling in Redux Toolkit6:05
Styling Home Page, Implementing Filter and Sorting Data Functionalities14:50
Style the home page with Bootstrap and React icons, implement a search filter and sorting by price and title, and wire up the responsive layout and cart button.

Implementing Cart Actions addToCart and cartTotal12:18
Implement a Redux Toolkit shop slice to add items to the cart, track item quantity and total price, and expose updates to the navbar and cart page.
Implementing CartItem Component Actions, and Adding Animated Notifications19:40
Implement a cart item component with actions to increase, decrease, remove, and clear items, and add animated notifications for purchase success or empty cart warnings on cart page.

Setting Up Express with MongoDB Using Mongoose10:19
Set up an express API in a new project, connect to MongoDB with mongoose using env variables, run with nodemon, and verify a hello from node server response at http://localhost:5000.
Implementing User Authentication with JWT, Bcrypt, and Express-Validator32:18
Create a mongoose user model and build register, login, and account controllers, then protect routes with bcrypt, json web token, and express-validator validations.
Creating CRUD Operations, Implementing Controllers, Routes & Securing Endpoints23:24
Create a stories API with mongoose, defining a story schema (author, title, text, poster, views) and implement CRUD controllers and routes secured by protect-off and token authentication.
Implementing Multer for Poster Uploads7:16

Setting Up React App, Concurrent Server-Client Execution, & Router Configuration18:00
Authentication Slice Setup with Redux Toolkit22:48
Set up an authentication slice with redux toolkit, configure axios, create async thunks for register and login, store the token in local storage, and navigate on success.
Token Management, User Authentication, Conditional Rendering & Logout Function17:51
Explore token management, user authentication, and logout flows in a React 2025 app, including axios request interception, local storage tokens, and conditional rendering of protected routes.
Handling Error Responses14:48
Story Creation with File Uploads and Data Fetching26:16
Create and fetch stories with poster uploads, display them on dedicated pages, and protect the write route for authenticated users.
Implementing Update and Delete for Stories with Author-Based Access Control10:08
Learn to implement author-based update and delete for stories in a React and TypeScript MERN app, using async thunks, axios calls, and dynamic routing to manage story data.

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.

Who this course is for:

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

React 2025: A Practical Guide with TypeScript & MERN Stack

What you'll learn

Explore related topics

Course content

Introduction and Overview2 lectures • 8min

Frontend Implementation and Data Handling3 lectures • 32min

Enhancing User Experience2 lectures • 32min

Backend Development and API Integration4 lectures • 1hr 13min

Advanced Full-Stack Development6 lectures • 1hr 50min

Requirements

Description

Who this course is for: