React 2024- A Practical Guide with TypeScript MERN Stack

React 2024: A Practical Guide with TypeScript & MERN Stack, available at $19.99, has an average rating of 4.4, with 17 lectures, based on 16 reviews, and has 3177 subscribers.

You will learn about 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 is ideal for individuals who are This course is ideal for developers seeking a practical understanding and deeper insights into React, Redux Toolkit and Nodejs It is particularly useful for This course is ideal for developers seeking a practical understanding and deeper insights into React, Redux Toolkit and Nodejs.

Enroll now: React 2024: A Practical Guide with TypeScript & MERN Stack

Summary

Title: React 2024: A Practical Guide with TypeScript & MERN Stack

Price: $19.99

Average Rating: 4.4

Number of Lectures: 17

Number of Published Lectures: 17

Number of Curriculum Items: 17

Number of Published Curriculum Objects: 17

Original Price: $22.99

Quality Status: approved

Status: Live

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.

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Introduction and Overview

Lecture 1: Introduction

Lecture 2: Apps Features Overview

Chapter 2: Frontend Implementation and Data Handling

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

Lecture 2: Integrating API Calls and Data Handling in Redux Toolkit

Lecture 3: Styling Home Page, Implementing Filter and Sorting Data Functionalities

Chapter 3: Enhancing User Experience

Lecture 1: Implementing Cart Actions addToCart and cartTotal

Lecture 2: Implementing CartItem Component Actions, and Adding Animated Notifications

Chapter 4: Backend Development and API Integration

Lecture 1: Setting Up Express with MongoDB Using Mongoose

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

Lecture 3: Creating CRUD Operations, Implementing Controllers, Routes & Securing Endpoints

Lecture 4: Implementing Multer for Poster Uploads

Chapter 5: Advanced Full-Stack Development

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

Lecture 2: Authentication Slice Setup with Redux Toolkit

Lecture 3: Token Management, User Authentication, Conditional Rendering & Logout Function

Lecture 4: Handling Error Responses

Lecture 5: Story Creation with File Uploads and Data Fetching

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

Instructors

Sameh Manai
Instructor

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 2 votes

4 stars: 6 votes

5 stars: 7 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!