React 2025: A Practical Guide with TypeScript & MERN Stack

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

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.