React Bootcamp with .NET API (Router, Redux Toolkit, Hooks)

1. Welcome

This video helps you with a basic introduction to the course and talks about the journey to learn React from scratch.

2. Why Should You Learn React?

In this video, you will discover the key reasons why learning React is essential for any web developer who wants to create powerful and dynamic user interfaces, increase their job opportunities, and stay ahead in the fast-paced world of web development.

3. Live Demo - Final Project

This video features a live demonstration of the final project created by our team, showcasing its features and functionality in real-time.

4. What We Will Build - Part 1

This video will help you learn about React and Redux with the help of building applications such as TaskOPedia, CountOPedia, ContactOPedia, CyclOPedia, ReduxOPedia, and TravelOPedia.

5. What We Will Build - Part 2

After getting a solid foundation in React and Redux, in this video, we will understand how to build an API with .NET. This video will guide you through the various features of the restaurant website that we will be creating in this course.

6. Course Prerequisites

This video talks about the prerequisites of the course. You would need basic programming experience, formality with HTML/CSS/JS, and understanding of .NET API CRUD operations.

7. Project Resources

This video helps you with the project resources and where you can find them.

8. Tools Needed

This video talks about the tools required for the course: Visual Studio Code, Node.js, SQL Server Management Studio, and Azure subscription.

9. Visual Studio Code Extensions

This video helps you walk you through all the extensions on Visual Studio Code that we require for this course.

1. Set Up Basic HTML and Add React CDN

This video helps in setting up basic HTML and adding React CDN in visual studio code.

2. First React Code

This video helps you write your first "Hello World" React code in index.js

3. Assignment 1 - Writing First React Code

This is an assignment video on writing your first React code. Here, you will be displaying the text as your first challenge.

4. Creating Element and Rendering in React

This video helps in creating an element and rendering in React. This is the new method in React 18 to render an element in the video.

5. What Is JSX?

In this video, we will explore JSX, a syntax extension for JavaScript that allows us to write HTML-like code within our JavaScript files.

6. Better Way to Create React Projects

This video discusses how to create a React project efficiently, using the Create react app instead of setting up everything manually.

7. Create Project

In this video, you will create a basic project to get started with. Here, you will start the development environment, bundle the app into static files for production, start the test runner, etc.

8. Run the Project

This video will help you run the Taskopedia project that we created in the previous video.

9. Cleanup Project

In this video, we will walk through the process of cleaning up a project, covering essential steps and best practices to ensure a streamlined and organized folder structure along with the codebase.

10. Make the Project Functional Again

In this video, we will demonstrate how to revive a non-functional project by troubleshooting and fixing common issues.

11. First React Component

In this video, we will dive into creating your first React component from scratch. You will start with creating the MainBody component.

12. Assignment 2 - React Component

This is an assignment video on the React component. Here, you will be working on the two functions; Header() and Footer() functions.

13. Assignment 3 - Parent Child Component

This is an assignment video on the parent child component.

14. Assignment 3 Solution - Parent-Child Component

This is a solution to the assignment video on parent-child component.

15. Rules of JSX

In this video, we will explore the fundamental rules of JSX, the syntax extension used in React.

1. Work with Styles

In this video, we will cover the various techniques for working with styles in React applications.

2. Adding Bootstrap Classes

In this video, you will learn how to integrate Bootstrap classes into your React applications for rapid and responsive UI development. By the end of this video, you will be equipped with the knowledge and skills to incorporate Bootstrap seamlessly into your React projects.

3. Work with Classes - Part 1

In this video, we will dive into working with classes in React to add dynamic functionality and interactivity to our components. By the end of this video, you will have a solid understanding of how to work with classes in React and enhance your components with dynamic styling and behavior.

4. Variables in JSX

In this video, we will explore the concept of using variables in JSX to dynamically render content and customize components in React. By the end of this video, you will have a solid understanding of how to leverage variables in JSX to create flexible and interactive user interfaces in React.

5. Assignment 3 - Adding Const

This is an assignment video on how to add a new constant in a project.

6. Assignment 3 Solution - Adding Constant.

This is a solution to the assignment video on adding a new constant in a project.

7. HTML Element in JSX

In this video, we will explore how to incorporate HTML elements within JSX to enhance the structure and functionality of React components.

8. Student Component

In this video, we will walk through the process of creating a "Student" component in React. By the end of this video, you will have a solid understanding of how to create a reusable "Student" component that can be dynamically rendered and customized within your React applications.

9. Export and Import Components

In this video, we will dive into the concepts of exporting and importing components in React, allowing us to modularize our code and improve code organization. By the end of this video, you will have a solid understanding of how to export and import components effectively in your React projects.

10. Assignment 4 - Separating Student Component

This is an assignment video on separating the student component.

11. Assignment 4 Solution - Separating Student Component

This is a solution to the assignment video on separating the student component.

12. Props and Components

In this video, we will delve into the concept of props and how they enable communication between components in React. By the end of this video, you will have a solid understanding of how to effectively use props to create flexible and reusable components in your React applications.

13. Install Third-Party Libraries and Images

In this video, you will be installing third-party libraries and images. Here, you will learn how to use third party NuGet packages/libraries and how to install them in the application.

14. Import Image and Header Design

In this video, you will learn how to import and use images in our React components, as well as design a header component for our application. Here, we explore different methods for importing images, such as using the import statement or leveraging webpack loaders. By the end of this video, you will have a solid understanding of how to create and style a Footer component and organize the main content of your React application with the Main Body component.

15. Footer and Main Body Component

In this video, we will focus on creating a Footer and Main Body component in React to enhance the structure and layout of our application.

16. Assignment 5 - Fix Error and Designing

This is an assignment video on how to fix the error and the designing part.

17. Passing Components as Children

In this video, we will explore the concept of passing components as children in React, allowing for more flexible and dynamic rendering of content. We will discuss how to define and utilize component children within parent components, allowing for the insertion of different components or content between opening and closing tags.

18. Final Hierarchy

In this video, we will establish the final hierarchy of components for our React application, ensuring a well-structured and organized codebase. By the end of this video, you will have a clear understanding of the final component hierarchy for your React application, allowing for efficient development, maintenance, and scalability.

19. Arrow Function

In this video, we will delve into arrow functions in JavaScript and how they can be used in React components for concise and expressive code. By the end of this video, you will have a solid understanding of arrow functions in JavaScript and how to effectively utilize them in your React components for cleaner and more efficient code.

20. Functional Versus Class Components

In this video, we will compare functional components and class components in React, exploring their differences, use cases, and benefits. Here, we dive into the concepts and syntax of both types of components. By the end of this video, you will have a solid understanding of the differences between functional and class components in React, empowering you to choose the appropriate type based on the specific requirements of your application.

21. Class Components

In this video, we will explore class components in React and how they can be used to build dynamic and interactive user interfaces. Here, we dive into the syntax and features of class components, which are defined using JavaScript classes. By the end of this video, you will have a solid understanding of class components in React and how they can be leveraged to build sophisticated and feature-rich applications.

22. Assignment 6 - Convert MainBody to Class Component

This is an assignment video on converting MainBody to Class component.

1. Create CountOPedia

This video will help you with the project creation with the name CountOPedia.

2. Assignment 7 Solution - Set Up CountOPedia

This is a solution to the assignment video on setting up of the project CountOPedia from scratch.

3. Counter Application Buttons

This video talks about the buttons required for our counter application. In the counter component, we will implement a "plus" and a "minus" component.

4. Click Events

In this video, we will explore handling click events in React, allowing us to create interactive and responsive user interfaces.

5. Setting and Retrieving State

This video talks about setting and retrieving state. Here, we will define a state where we can hold a counter on which we are counting.

6. Demo - React State

This is a demo video explaining the React state. The state is immutable as you cannot directly modify the state while working in React.

7. State Summary

In this video, we will recap the key concepts and usage of state in React, providing a comprehensive summary of its importance and practical implementation.

8. New SetState Syntax

In this video, you will look at the setState() method that enqueues all of the updates made to the component state and instructs React to re-render the component and its children with the updated state.

9. CountOPedia UI

This video helps you with enhancing the UI of the CountOPedia application as it was quite boring till now

10. Random Play and Reset Button

This video helps you add a random play and reset button. As in the actual game, it doesn't work like you are awarded with a +1 when attacking, and your point gets decreased by 1 while defending.

11. Assignment 8 - Game Status and Last Play

This is an assignment video on how to get the game status and information about the last play.

12. Assignment 8 Solution - Game Status and Last Play

This is a solution to the assignment video on how to get the game status and information about the last play.

1. Create Project - ContactOPedia

This video helps you create a project titled ContactOPedia.

2. Add Components

This video helps you add multiple components to the project like Add Random Contact, Remove All Contacts, etc.

3. Skeleton of Components

This video helps you add the skeleton of components. Here, you will create the functional components for all the components that have been added till now.

4. Add Contact UI

This video demonstrates adding the Contact UI. This is the first thing you will start with as unless and until you add a contact you won't be able to to other operations.

5. Favorite and General Contact State

This video demonstrates how to add favorite and general contact state. Here, you will write the function to display the contact either as a favorite contact or general contact.

6. Individual Contact UI

This video helps you with exploring and building the UI of the individual contact. You will work on the Contact.jsx to make the UI look appealing.

7. Look and Feel ContactOPedia

This video showcases the look and feel of ContactOPedia, and provides tips on enhancing its visual appeal.

8. Add Contact Handler

In this video, learn how to add the contact handler to streamline your ContactOpedia application.

9. Add Contact in Action

This video demonstrates the process of adding a state that displays contacts in action, providing a dynamic user experience.

10. Add Validations

In this video, learn how to add validations to ensure accurate and reliable contact information.

11. Display Validation and Success Notification

This video guides you through the process of displaying validation and success notifications to provide real-time feedback to users.

12. Toggle Favorites

Add an interactive feature to your contacts with this video, which explains how to add toggle favorites contracts.

13. Assignment 9 - Delete Contact

This is an assignment video on deleting a contact.

14. Assignment 9 Solution - Delete Contact

This is a solution to the assignment video on deleting a contact.

15. Add Random User to Contact List

This video helps you write a program that adds a random user to contact list.

16. Axios Call

This video shows how to fetch data with Axios in React, save it to state, and then display it in a React component.

17. Demo - Adding Random Contact

This is a demo video on adding random contact.

18. Assignment 10 - Remove All Contact

This is an assignment video on removing all contacts.

19. Assignment 10 Solution - Remove all Contact

This is a solution to the assignment video on removing all contacts.

20. Which Contact Has to Be Updated

In this video, you will learn how to identify and update the appropriate contacts in your list, ensuring accurate and up-to-date information.

21. Toggle UI Based on Update

In this video, we will explore how to toggle the user interface based on updates in React, allowing for dynamic rendering and conditional display of components.

22. Cancel Button in Action

In this video, we will focus on implementing a cancel button action in our React application, allowing users to cancel or reset certain operations or form inputs. By the end of this video, you will have a solid understanding of how to implement a cancel button action in React, empowering users to easily cancel or revert their actions within the application.

23. Update Contact - Part 1

This is the first of the two-part video, where you will begin the process of updating a contact within our React application.

24. Update Contact - Part 2

This is the second of the two-part video where we will continue our journey of updating a contact within our React application. Building upon the previous video, we will focus on resolving any bugs or issues encountered during the initial implementation and finally updating the contact with the edited information. By the end of this video, you will have a complete understanding of how to resolve bugs, handle user input changes, and successfully update a contact within your React application.

1. Create Project - CyclOPedia

This video helps you create a project titled CyclOPedia.

2. Set Up Random API

This video guides you through the process of setting up a random API, enabling you to fetch and manipulate data in CyclOPedia.

3. Display Instructor

In this video, you will learn how to display instructor information in your React application, leveraging the power of lifecycle methods.

4. componentDidUpdate

In this video, we will explore the componentDidUpdate lifecycle method in React, which allows us to respond to changes in component props or state and perform additional actions as needed.

5. Controlled Component

In this video, we will dive into the concept of controlled components in React, which provide a powerful and controlled way to manage form inputs and their corresponding state.

6. Saving in Local Storage

In this video, we will explore how to save data in the browser's local storage using React.

7. Separating Out Instructor

In this video, we will explore the process of separating out the instructor information into a separate component in our React application.

8. componentWillUnmount

In this video, we will explore the componentWillUnmount lifecycle method in React, which provides an opportunity to perform cleanup tasks and unsubscribe from external resources before a component is unmounted from the DOM. By the end of this video, you will have a solid understanding of the componentWillUnmount lifecycle method and how to leverage it in your React components to perform cleanup tasks before unmounting.

9. Load Student List

In this video, we will focus on loading a student list in our React application. Here, we explore how to fetch student data from a data source, such as an API, and dynamically render the list of students in an organized and visually appealing manner. By the end of this video, you will have a solid understanding of how to fetch and display a dynamic student list in your React application.

10. Bug Time

In this video, we will tackle and troubleshoot some bugs in our React application that we encountered.

1. Create WatchOPedia

This video helps you create a project titled WatchOPedia.

2. Set Up Counter

This video guides you through the process of setting up a counter, allowing you to track and display numeric values in your WatchOPedia project.

3. useState in Action

In this video, we will explore the useState hook in React and put it into action within our application. By the end of this video, you will have a solid understanding of how to use the useState hook effectively in your React functional components.

4. Gotchas with useState

In this video, we will explore some common gotchas and pitfalls to be aware of when using the useState hook in React. By the end of this video, you will have a solid understanding of the potential gotchas, and best practices associated with using the useState hook in React.

5. Objects and State

In this video, we will explore working with objects in React state. Join us as we dive into managing complex data structures and manipulating object state variables effectively within our React applications. By the end of this video, you will have a solid understanding of how to effectively manage and manipulate objects in React state.

6. Another Gotcha with useState

In this video, we will explore another common gotcha or potential issue to be aware of when using the useState hook in React. Here, we dive into this specific gotcha and learn how to overcome it to ensure smooth and reliable state management. By the end of this video, you will have a solid understanding of this specific gotcha and how to handle closures effectively when using the useState hook in React.

7. Something Exciting

In this video, we explore a cutting-edge feature or technique in React that will take your development skills to the next level.

8. WatchOPedia Movie Setup

In this video, we will guide you through the setup process for WatchOPedia, a movie streaming application built with React. Here, we walk you through the steps to set up the project and get it up and running on your local development environment.

9. Assignment 11 Solution - Display Movie List

This is a solution to the assignment video on displaying a movie list.

10. Assignment 12 Solution - Add a Movie to Watch

This is a solution to the assignment video on adding a movie to watch.

1. Initial Project

This video helps you with a basic overview of the project setup you did earlier with the title CyclOPedia.

2. Name and Feedback Input fields

In this video, we will focus on adding input fields for name and feedback in our React application.

3. useEffect Overview

In this video, we will explore the useEffect hook in React and provide an overview of its capabilities and use cases. By the end of this video, you will have a solid understanding of the useEffect hook and its role in managing side effects and lifecycle events in React components.

4. useEffect - First Render Only

In this video, we will explore how to use the useEffect hook in React to execute code only during the first render of a component.

5. useEffect - Unmount in Action

In this video, we will explore how to use the useEffect hook in React to handle cleanup operations when a component is unmounted.

6. Assignment 13 - Use Effect

This is an assignment video on Use Effect. Here, you are assigned a task to get the different instructors' information when you click/unclick the instructor's tab.

7. Assignment 13 Solution - Use Effect

This is a solution to the assignment video on Use Effect.

8. Load Student on Counter Update

In this video, we will explore how to load student data dynamically based on the update of a counter in a React application.

9. useRef and previous values

In this video, we will explore how to use the useRef hook in React to access and track previous values of a state or a variable.

10. useRef on Student Count

In this video, we will explore how to use the useRef hook in React to create a reference to the student count in our application.

11. More Common Uses of useRef

This video helps you explore the more common uses of useRef.

12. uselD Hook

This video will talk about the useID. It is a React hook for generating unique IDs that can be passed to accessibility attributes.

1. Set Up RouteOPedia

This video helps you set up and create a project titled RouteOPedia.

2. Create More Components

Expand your project by creating more components in this video, setting the stage for building a robust and dynamic routing system in RouteOPedia.

3. First Route

In this video, we will explore how to implement the first route in a React application using a popular routing library.

4. Link Component

In this video, we will explore how to use the Link component in React to create navigational links between different routes in our application.

5. Assignment 14 - Product Routes

This is an assignment video on product routes.

6. Assignment 14 Solution- Product Routes

This is a solution to the assignment video on product routes.

7. Nested Routes

In this video, we will explore how to implement nested routes in a React application using a routing library, such as React Router. By the end of this video, you will have a solid understanding of how to implement nested routes in your React application using a routing library.

8. Index in Nested Route

In this video, we will explore how to use an index route in nested routes within a React application. Here, we dive into this advanced routing concept and learn how to configure an index route to handle the default view or landing page for a nested route structure.

9. Not Found

This video shows how to display the error message as "Not Found" if an invalid route is typed.

10. Parameters in URL

In this video, we will explore how to work with parameters in the URL of a React application using a routing library such as React Router. By the end of this video, you will have a solid understanding of how to work with parameters in the URL of your React application.

11. Assignment 15 - Parameters in URL

This is an assignment video on parameters in URL.

12. NavLink Component

In this video, we will explore how to use the NavLink component in React Router to create navigation links with active styling and behavior.

13. Navigate Using useNavigate Hook

In this video, we will explore how to navigate programmatically in a React application using the useNavigate hook provided by a routing library such as React Router.

14. Using Link Component to Navigate

In this video, we will explore how to use the Link component in React Router to navigate between routes in a React application.

15. Another Navigation Method

In this video, we will explore another method of navigation in a React application using the new hook provided by React Router.

16. Navigate Back

In this video, we will explore how to navigate back in a React application using the goBack method provided in React Router.

1. Set Up ReduxOPedia

This video helps you set up a project titled ReduxOPedia.

2. Add Redux Store

In this video, we will explore how to integrate Redux into a React application to manage a centralized store for state management.

3. Create First Reducer and Actions

In this video, we will dive into creating our first reducer and actions in a Redux-powered React application.

4. Log State and Dispatch Action

In this video, we will explore how to log the state and dispatch actions in a Redux-powered React application.

5. Retrieve Value from State

In this video, we will explore how to retrieve values from the state in a Redux-powered React application.

6. Dispatching Action from React Component

In this video, you will learn how to dispatch actions from a React component in a Redux-powered application.

7. Assignment 16 - Counter Multiplier

This is an assignment video on counter multiplier.

8. Assignment 16 Solution - Counter Multiplier

This is a solution to the assignment video on counter multiplier.

9. Add Destination Slice

In this video, we will understand how to add a destination slice to the Redux store in a React application.

10. Display Destinations

In this video, we will look at how to display destinations in a React application using data from the Redux store.

11. Select Destination

In this video, we will look at how to select a destination from a list of destinations in a React application using Redux.

12. Display Selected Destination

In this video, we will understand how to display the selected destination in a React application using data from the Redux store.

13. Reset Counter and Destination

In this video, we will explore how to reset the counter and destination in a React application using Redux.

14. Listen to Actions of a Different Reducer

In this video, we will look at how to listen to actions from a different reducer in a Redux-powered React application.

15. Say NO to Magic Strings

In this video, we will explore the importance of avoiding magic strings in a Redux-powered React application. Here, we dive into the drawbacks of using string literals directly in your code and learn how to mitigate potential issues by adopting better practices.

16. Custom Actions

In this video, we will study how to create custom actions in a Redux-powered React application.

17. Alternative Approach for Import and Export

In this video, we will explore an alternative approach for importing and exporting modules in a JavaScript project.

1. Set Up TravelOPedia

In this video, you'll learn how to set up the TravelOPedia project, creating the foundation for implementing Redux Toolkit, Query, Mutations, and Slice.

2. Set Up Destination Components

This video guides you through the process of setting up components specifically designed for managing destination-related functionalities in TravelOPedia.

3. Set Up JSON Server

Learn how to set up and configure a JSON Server in this video, allowing you to simulate a RESTful API and interact with data in TravelOPedia.

4. Create Destination API

In this video, we will focus on creating the frontend part of our application for displaying destinations in a React application.

5. Fetch Records from API

In this video, we will explore how to fetch records from an API in a React application.

6. Add Destination Controller Component

In this video, we will add a destination controller component to our React application. By the end of this video, you will have a solid understanding of how to create a destination controller component that handles the logic and state management for destinations in your React application.

7. Add Mutations

In this video, we will enhance our React application by adding the mutation functionality to modify destination data.

8. Call POST Mutation

In this video, we will focus on making a POST mutation to create a new destination in our React application.

9. Query Versus Mutation

In this video, we will explore the differences between queries and mutations. Here, we dive into the concept of queries and mutations and understand when to use each in our API.

10. Caching with RTK Query

In this video, we will explore how to implement caching with RTK Query in our React application. Here, we dive into the process of leveraging RTK Query's built-in caching capabilities to optimize data fetching and improve the performance of our application.

11. Tags in Action

In this video, we will explore how to use tags in action with RTK Query in our React application. Here, we dive into the process of adding tags to our queries and mutations to provide more fine-grained control over data fetching and caching.

12. Assignment 17 - Delete Destination

This is an assignment video on how to delete the destination.

13. Assignment 17 Solution - Delete Destination

This is a solution to the assignment video on how to delete the destination.

14. Response from Query and Parameters

In this video, we will see how to handle response data from a query with parameters in RTK Query within our React application.

15. Separating Out Individual Destination

In this video, we will focus on separating out individual destinations from a list of destinations in our React application.

16. Assignment 18 - Edit Functionality

In this assignment video, you'll tackle the task of implementing the edit functionality in TravelOPedia.

17. Assignment 18 Solution - Edit Functionality

This is a solution to the assignment video on the editing functionality.

18. Integrate RTK Query with Redux Store

In this video, you'll learn how to seamlessly integrate RTK Query with a Redux store in your React application. Discover the power of combining these two powerful tools to efficiently manage data and simplify the state management process.

19. Call Another API

In this video, we will understand how to call another API in addition to the existing one in our React application.

20. Show Random Destination

In this video, we will explore how to display a random destination from our list of destinations in our React application.

1. Introduction

This video provides an introduction to the section, ProjectOPedia.Here, you will learn about the objectives and scope of the module.

2. Create ProjectOPedia

In this video, you will create a project titled ProjectOPedia, setting the foundation for showcasing your work effectively.

3. Header and Footer

In this video, you will focus on creating the header and footer components for the ProjectOPedia application, ensuring a consistent and visually appealing layout for the project listing page.

4. Map through Project List

In this video, we will explore how to map through the project list in ProjectOPedia and dynamically render project cards.

5. Project List

In this video, we will focus on creating the project list component for the ProjectOPedia application.

6. Add Routing

In this video, we will focus on adding routing to the ProjectOPedia application, allowing users to navigate between different pages and sections of the application.

7. Topics Covered

This video will help you revisit the topics covered so far.

1. API is Optional and You Can Use the API Right Here

In this video, you'll receive a walkthrough of the API that you'll be building, providing an overview of its features and functionality.

2. Set Up Storage Account for Images on Azure

Learn how to set up a storage account for images on Azure in this video, enabling you to store and retrieve images for your API.

3. Create API Project

Follow along as this video demonstrates the process of creating the API project, setting up the necessary structure and configurations.

4. Install NuGet Packages

In this video, you'll learn how to install all the required NuGet packages for this section, ensuring that your API has the necessary dependencies.

5. Set Up Connection String and DBContext

This video guides you through the process of setting up the connection string and DBContext, establishing the connection to the database for your API.

6. Create SQL Tables and Push Migrations

Learn how to create SQL tables and push migrations in this video, allowing you to define and manage the database schema for your API.

7. Add Name to AspNetUsers

In this video, explore how to add a name field to the AspNetUsers table, enhancing the user management functionality of your API.

8. Create Menu Item Table

Follow along as this video helps you create a menu item table for the shopping cart functionality of your API.

9. Seed Menu Items

In this video, the focus is on seeding the menu item data in the application's database, providing initial data for testing and demonstration purposes.

10. Get Menu Item and API Response

In this video, we will explore how to retrieve menu item data from the API and handle the API response in the application.

11. Get Individual Menu Item

In this video, we will focus on retrieving an individual menu item from the API and displaying it in the application.

12. Add Storage Account Connection String

In this video, we will explore how to add a storage account connection string to the application. Here, we go through the process of integrating Azure Storage into the application and configuring the necessary connection string to establish a connection between the application and storage account.

13. Implement Blob Service

In this video, you'll learn how to implement Blob Service in your .NET API. Explore the functionalities and features of Blob Service, allowing you to efficiently handle file storage and retrieval operations within your application.

1. Create Menu Item

In this video, you'll learn how to create menu items using the .NET API, allowing you to add, store, and manage menu items in your application.

2. Create Menu Item in Action

Follow along as this video demonstrates the process of creating menu items that can be customized and updated according to your specific needs and requirements.

3. Update Menu Item

Learn how to update menu items in this video, enabling you to modify existing menu items to reflect changes or updates in your application.

4. Delete Menu Item

In this video, you'll write a program to delete menu items, providing the ability to remove unnecessary or outdated items from your application.

5. Correct Status Code and Success Flag

This video explains how to correct the status code and success flag in your API, ensuring accurate and appropriate response codes and flags for menu item-related operations.

1. Add Login and Register DTOs

Learn how to add login and register DTOs (Data Transfer Objects) in this video, enabling the handling of user authentication and registration data.

2. Auth Controller and Dependency Injection

Explore the auth controller and dependency injection in this video, understanding their role in the authentication and authorization process and how to integrate them into your application.

3. Register in Action

Follow along as this video demonstrates the implementation of the registration functionality in your application, allowing users to create new accounts securely.

4. Login in Action

In this video, focus on implementing the login functionality in your application, providing a secure way for users to authenticate and access restricted resources.

5. JWT Token

Discover the JWT (JSON Web Token) and its significance in authentication and authorization. Learn how to add and utilize JWT tokens in your application for secure communication.

6. Add Authentication and Authorization Endpoints

Follow the steps in this video to add authentication and authorization endpoints, enabling secure access to protected resources within your .NET API.

7. Set Up API for Authentication

Learn how to set up your API to support authentication, configuring the necessary settings and middleware to enforce secure authentication protocols.

8. Add Security to Swagger

In this video, focus on enhancing the security of the Swagger documentation in your API. Implement measures to ensure that the API documentation remains protected and accessible only to authorized users.

1. Add Shopping Cart Models

In this video, learn how to add shopping cart models to your application, providing the necessary structure for managing items in the user's cart.

2. Shopping Cart Controller and Logic

Follow along as this video demonstrates the implementation of the shopping cart controller and the corresponding logic in your application, allowing users to interact with their shopping carts.

3. Update Shopping Cart Endpoint

Learn how to update the shopping cart endpoint in this video, ensuring that users can add, remove, and update items in their shopping carts.

4. Test Shopping Cart Endpoint

In this video, discover the process of testing the shopping cart endpoint, ensuring that the functionality works as expected and handles different scenarios.

5. Get Shopping Cart

Focus on implementing the "Get Shopping Cart" functionality in your application, enabling users to retrieve the contents of their shopping carts.

6. Order Header and Details Model

Learn how to create the order header and order details models in this video, laying the foundation for order management within your application.

7. Order DTOs

Follow along as this video explains the process of creating Order DTOs (Data Transfer Objects), facilitating the exchange of order-related data between client and server.

8. Get Order

This video explains how to add the "Get Order" functionality to the application, allowing users to retrieve details about their placed orders.

9. Create Order in Action

In this video, we will understand how to work on the "Create Order" functionality in our application, enabling users to place orders and complete the purchase process.

10. Update Order Details

Explore how to add the "Update Order Details" functionality to your application, providing users with the ability to modify specific details of their placed orders.

11. Stripe Payment Endpoint

Follow along as this video guides you through the process of implementing the Stripe payment endpoint, enabling users to process secure payments for their orders.

12. Stripe Client Secret in Action

Learn how to implement the Stripe client secret in your application's action, ensuring secure and authenticated communication with the Stripe payment gateway.

13. Shopping Cart API Update

In this video, focus on updating the Shopping Cart API, incorporating new features and enhancements to improve the shopping cart functionality in your application.

14. Deploy API

This video demonstrates the process of deploying your API, making it available for users to access and interact with your shopping cart and order functionality.

1. Typescript Introduction

In this video, get introduced to TypeScript and learn about its benefits and features in web development.

2. Create App with TypeScript

This video guides you through the process of creating an application using TypeScript, setting up the necessary configurations and file structures.

3. Package JSON

In this video, delve into the package.json file in a Node.js project, gaining a deeper understanding of its purpose and how it relates to managing dependencies and scripts in your application.

4. File Cleanup

In this video, we will perform file cleanup in our project, ensuring a clean and organized codebase for better maintainability and readability.

5. Install Bootstrap and Bootstrap Icons

Learn how to install Bootstrap and Bootstrap icons in this video, leveraging these powerful front-end frameworks to enhance the visual appeal and functionality of your Red Mango website.

6. Header and Footer Component

Follow along as we add the header and footer component to the Red Mango website in this video, providing consistent navigation and branding elements across all pages.

7. Header UI

In this video, we take a closer look at the user interface of the header section, discussing its design and functionality to create an engaging and user-friendly browsing experience on the Red Mango website.

8. Fetch Menu Items and Interfaces in TypeScript

In this video, we will be fetching menu items from an API and utilizing TypeScript interfaces to enhance type safety and code integrity.

9. Better Structure

In this video, we will be improving the structure of a project to enhance code organization and maintainability.

10. Card Component

In this video, we will work on creating a reusable card component that can be used to display various types of content in a visually appealing manner.

11. Homepage UI

In this video, we will dive into the design of the homepage UI. We'll explore different elements, layouts, and visual components to create an appealing and user-friendly interface for the Red Mango website.

12. Add Routing and Not Found

In this video, we will be working on implementing routing functionality in a web application, allowing users to navigate between different pages or views. Additionally, we will cover the implementation of a "Not Found" page to handle routes that do not match any defined routes.

13. Menu Item Details Page

In this video, we will walk you through the process of creating a menu item details page for the Red Mango web application. You will learn how to display detailed information about a specific menu item, including its description, and any additional details relevant to the product.

1. Add Redux and Redux Toolkit to Project

In this video, we walk you through the steps of adding Redux and Redux Toolkit to your project.

2. Add Query to Fetch Menu Items

In this video, we demonstrate how to add a query to fetch menu items using Redux and Redux Toolkit. Explore the benefits of integrating Redux with data fetching and make your restaurant website dynamic and responsive.

3. Call Slice to Fetch Data

In this video, we will be making use of Redux slices to fetch data from the server. By leveraging Redux slices, we can efficiently manage the state related to data fetching and ensure a consistent and predictable flow of data throughout our application.

4. Display Loading Text

In this video, we will work on displaying a loading text or spinner while the data is being fetched from the server. This helps provide a better user experience by indicating that the application is working on retrieving the requested information.

5. Assignment 19 - Load Menu Item Details

This is an assignment video on loading menu item details.

6. Assignment 19 Solution - Load Menu Item Details

This is a solution to the assignment video on loading menu item details.

7. Manage Quantity on Menu Item Details

In this video, we will work on implementing the functionality to manage the quantity of a menu item on the menu item details page. This allows users to select the desired quantity of a menu item before adding it to their cart.

1. User ID for Shopping Cart

In this video, we will focus on associating the shopping cart with a user ID. This allows us to provide personalized shopping cart functionality, where each user has their own cart that persists across sessions.

2. Set Up Shopping Cart Query and Mutation

In this video, we will guide you through the process of setting up shopping cart queries and mutations using Redux and Redux Toolkit.

3. Add to Cart in Action

In this video, we will be implementing the "Add to Cart" functionality in our application. This feature allows users to add menu items to their shopping cart.

4. Assignment 20 - Add to Cart Homepage

This is an assignment video on adding to cart homepage.

5. Assignment 20 Solution - Add to Cart Homepage

This is a solution to the assignment video on adding to cart homepage.

6. Add Mini Loader to Homepage

In this video, we will show you how to enhance the user experience on the homepage of your restaurant website by adding a mini loader.

7. Mini Loader Component

In this video, we will be creating a mini loader component. The mini loader component will be used to indicate that a certain section of the website is loading or processing data. To implement the mini loader component, we will create a reusable React component that displays a loading animation or spinner.

8. Main Loader

In this video, we will be creating a main loader component. The main loader component will be used to indicate that the entire website is loading or processing data.

9. Loader on Add to Cart in Details Page

In this video, we will be adding a loader to the "Add to Cart" functionality on the menu item details page. The loader will provide visual feedback to the user while the item is being added to the cart.

10. Shopping Cart Interface

In this video, we will dive into creating a shopping cart interface for your restaurant website. We will guide you through the process of designing and implementing a visually appealing and user-friendly cart interface.

11. Get Shopping Cart and Store in Slice

In this video, we will be retrieving the shopping cart data from the server and storing it in a Redux slice.

12. Shopping Cart Page

In this video, we will guide you through the process of creating a dedicated shopping cart page for your restaurant website.

13. Shopping Cart Summary

In this video, we will be creating a shopping cart summary component. The shopping cart summary component will provide users with an overview of their current shopping cart, including the total number of items and the total price.

14. Add Reducers to Shopping Cart Slice

In this video, we will be adding reducers to the shopping cart slice in our Redux store. Reducers are responsible for updating the state in response to specific actions.

15. Shopping Cart Functional

In this video, we will add the shopping cart functionality that focuses on providing a seamless and user-friendly experience for managing and processing orders in the restaurant website.

16. Show Distinct Items in Cart

In this video, we will focus on implementing the functionality to display distinct items in the shopping cart. Instead of displaying multiple instances of the same item with different quantities, we will show each item only once and provide the total quantity and price for that item.

17. Display Pickup Details

In this video, we will enhance the shopping cart functionality by displaying pickup details. We will add fields where users can enter their preferred pickup date and time, allowing them to specify when they would like to collect their order.

18. Controller Component Helper Method

In this video, we will create a helper method in the controller component to handle common functionalities related to the shopping cart. This method will centralize the logic for adding items to the cart, updating quantities, and removing items.

19. Loading Component

In this video, we will implement a loading component to enhance the user experience when data is being fetched or processed. The loading component will display a spinner or a loading message to indicate that the application is in progress and the user should wait for the operation to complete.

1. Login and Register UI

This video showcases the user interface design and layout for the login and registration pages, providing a seamless and intuitive user experience.

2. How Login and Register Will Work

This video explains the underlying workflow and logic behind the login and registration processes, ensuring a smooth and secure user authentication flow.

3. Add Auth API

In this video, the necessary APIs for handling user authentication are added to the backend, enabling communication between the frontend and server.

4. Authentication Slice and User Interface

In this video, you will look at the authentication slice implemented in Redux, managing the user authentication state and providing the necessary actions and reducers. The user interface components are also designed and integrated with Redux.

5. Controller Components in Register

This video focuses on implementing controller components for the registration page, handling user input validation and interaction with the backend API.

6. Response API Interface

In this video, you will look at the response API interface defined to handle the responses from the authentication API endpoints, ensuring consistent data structures and error handling.

7. Register User

In this video, the registration functionality is implemented, allowing users to create new accounts by providing their credentials and personal information.

8. Controller Login Fields

In this video, the controller components for the login page are implemented, enabling users to enter their credentials and initiate the login process.

9. Login in Action

This video covers the implementation of the login functionality, including the communication with the authentication API and handling the login response.

10. Add Token to Local Storage

This video covers how the authentication token received upon successful login is stored securely in the browser's local storage for subsequent requests and user sessions.

11. Decode JWT Token

This video helps you understand how the JWT token received from the server is decoded to extract relevant user information, such as user ID and role, for authentication and authorization purposes.

12. Toggle Login and Logout button

In this video, you will see how, based on the user's authentication status, the login and logout buttons are toggled dynamically to provide a consistent user interface.

13. Login and Logout in Action

In this video, you will look at the implementation of the logout functionality, allowing users to securely log out of their accounts.

14. Small Bug with Authentication

This video addresses a minor bug related to the authentication process and provides a fix to ensure smooth user experience.

15. Toastify Notifications

In this video, you will learn about the Toastify library. It is integrated to display notifications and alerts for successful operations, errors, and important user messages related to authentication.

16. Add Loader on Register

This video helps you with adding loader on register. A loading component is added to provide visual feedback to users during the registration process, indicating that the request is being processed.

17. Add Test Components for Authentication and Authorization

In this video, the test components are created to validate and verify the authentication and authorization functionalities, ensuring their correctness and reliability.

18. Authentication with HOC

In this video, you will learn about higher-order components (HOCs). These are utilized to handle the authentication logic and restrict access to certain routes and functionalities based on user authentication status.

19. Authorization with HOC

In this video, you will look at the authorization logic, which is implemented using HOCs to control access to specific resources and functionalities based on user roles and permissions.

20. Only Authenticated User Can Add to Cart

This video helps with implementing the add-to-cart functionality, which is restricted only to authenticated users, ensuring that only logged-in users can interact with the shopping cart.

21. Dynamic User ID

In this video, you will work on dynamic user ID management, implemented to associate user-specific data and actions, providing a personalized experience throughout the website.

22. Cleanup Test Components

In this video, you will work on cleanup test components. The test components used for authentication and authorization verification are cleaned up and optimized, ensuring efficient and reliable testing processes.

1. Load User Details of Logged-In User

This video explains how to retrieve and load the details of the logged-in user, such as name and address, to provide a personalized payment experience.

2. Stripe and React

This video provides an introduction to integrating the Stripe payment gateway with the React frontend is provided in this video, setting the foundation for handling payments.

3. Create Payment API

In this video, you will see the necessary API endpoints for processing payments and communicating with the Stripe backend implemented, enabling secure and reliable payment transactions.

4. Calling Payment API

In this video, you will look at the frontend implementation for calling the payment API, allowing users to initiate the payment process and submit their payment details securely.

5. Use Location State

In this video, the location state is utilized to pass relevant data and parameters during the payment process, ensuring accurate and seamless communication between components.

6. Stripe Card Demo

In this video, a demonstration of integrating the Stripe card element into the payment form is provided, enabling users to enter their card details securely.

7. Order Summary UI

In this video, you will work on the user interface for displaying the order summary, including the selected items and total amount.

8. Local Interfaces

In this video, you will work on the local interfaces for handling payment-related data, such as the payment details and order summary, defined to ensure type safety and consistency.

9. Dynamic Order Summary

In this video, you will work on the order summary that is dynamically updated based on the selected items in the shopping cart, providing users with an accurate overview of their order before payment.

10. Stripe Processing

In this video, you will work on the payment processing logic using the Stripe payment gateway, ensuring secure and reliable payment transactions.

11. Stripe success object

In this video, you will work on the success object returned by the Stripe payment gateway, to handle successful payment transactions and update the order status accordingly.

1. Order API

This video covers the implementation of the necessary API endpoints for managing orders, including creating new orders and retrieving order details.

2. Create Order Object to Create Order

In this video, you will look at the process of creating an order object and populating it with the required information to create a new order.

3. Create Order

In this video, you will see the frontend implementation for creating a new order, including sending the order data to the backend API.

4. Order Confirmed Logic

In this video, you will look at the logic for handling the order confirmation process, including updating the order status and displaying a confirmation message.

5. Order Confirmation Page

In this video, you will implement a dedicated order confirmation page, providing users with a summary of their placed order and relevant information.

6. Get Order Endpoints in API

In this video, you will work on additional API endpoints for retrieving orders, including the user's own orders and all orders, to support order management.

7. My Orders UI

In this video, you will work on the user interface for displaying the user's own orders, allowing users to view and track their order history.

8. Dynamic My Orders

In this video, you will learn how the user's order history is dynamically loaded and displayed on the My Orders page, providing an up-to-date overview of their past orders.

9. Bug with My Orders

This video addresses and resolves a bug related to the display of the user's order history, ensuring accurate and consistent data presentation.

10. Make a New Component for Order List

In this video, you will work on the separate component created for rendering the list of orders, improving code organization and reusability.

11. Order Details

In this video, you will look at the implementation of the order details page, where users can view specific order details.

12. Assignment 21 - Solve Data Bug

This is an assignment video focused on identifying and resolving a data bug related to order management.

13. Manage Orders Header based on Role

In this video, you will implement the user interface for managing orders, enhanced to display different headers based on the user's role, providing role-specific functionality.

14. Status Color Helper Method

In this video, you will implement the helper method for determining the color of order status badges to visually distinguish different order statuses.

15. Display Badge for Order Status

In this video, you will work on the order status badges that are displayed on the order list, providing users with a visual representation of the status of each order.

16. Back to Order Button

In this video, you will implement the back button in the order details page, allowing users to easily navigate back to the order list.

17. Buttons for Next Status

In this video, you will work on the buttons for transitioning the order status to the next available status, providing order management functionality.

18. Order Status Badge on Order List

In this video, you will see how the order status badges are added to the order list, allowing users to quickly identify the status of each order.

19. Order API - PUT Endpoint

In this video, you will work on the additional API endpoint for updating the order status to support order status transitions.

20. Update Order Status

In this video, you will implement the frontend implementation for updating the order status, including sending the updated status to the backend API, is covered.

21. Cancel and Completed Buttons Condition

In this video, you will work on the condition for displaying the Cancel and Completed buttons based on the current order status to enforce order management rules.

22. All Orders Page

In this video, you will work on a dedicated page for displaying all orders, including orders from all users.

1. Create Menu Item List Page

This video helps you with the initial setup and design of the menu item list page, where all menu items are displayed.

2. Assignment 22 - Dynamic Menu Item List

This is an assignment video that challenges you to create a dynamic menu item list, where menu items are fetched from the API and displayed dynamically.

3. Menu Item Upsert UI

In this video, you will work on the user interface for creating and updating menu items, including the form inputs and layout.

4. Controller Components Menu Item

In this video, you will work on the controller components for creating, updating, and deleting menu items, providing the necessary functionality to interact with menu items.

5. Upload Image in React

The process of uploading and displaying images for menu items using React is explained and implemented in this video.

6. Menu Item API Mutations

In this video, you will work on the necessary API mutations for creating, updating, and deleting menu items in the backend.

7. Create Menu Item

The front-end implementation for creating a new menu item, including sending the menu item data to the backend API, is covered in this video.

8. Update Designing

In this video, the design and layout of the menu item update page are enhanced and updated to improve user experience.

9. Load Menu Item to Update

In this video, you will work on the process of loading an existing menu item from the API and populating the update form with its data.

10. Update Menu Item

In this video, you will work on the front-end implementation for updating an existing menu item, including sending the updated data to the backend API.

11. Category Dropdown

In this video, you will look at the dropdown component for selecting the category of a menu item, providing a convenient way to assign categories.

12. Small Bug

This video addresses and resolves a small bug related to menu item management functionality.

13. Delete Menu Item

The implementation of the delete functionality for menu items, including sending the delete request to the backend API, is covered in this video.

14. Assignment 23 - Data Goes Away on Refresh

This is an assignment video on data being reset on refresh and how to resolve it.

15. Assignment 23 - Bug Solution

This is a bug solution to the assignment video on data being reset on refresh and how to resolve it.

1. Banner

The implementation of the banner section on the homepage, including the design and layout, is covered in this video.

2. Renaming Folder

This video explains the process of renaming a folder in the project structure to ensure proper organization and naming conventions.

3. Store Search Value in Redux

The implementation of storing the search value in Redux state, allowing for easy access and management across components, is covered in this video.

4. Search in Banner

In this video, you will see the integration of the search functionality within the banner section of the homepage is implemented, allowing users to search for specific items.

5. Show all Category for Filter

In this video, you will see the implementation of displaying all available categories for filtering purposes.

6. Category Filters in Action

The integration of category filters in the application, allowing users to filter menu items based on categories, is implemented in this video.

7. Sorting in Action

The implementation of the sorting functionality for menu items, allowing users to sort items based on different criteria, is covered in this video.

8. Skip Getting Shopping Cart

This video explains the process of skipping the API call to get the shopping cart when the user is not authenticated, improving performance.

9. Authentication and Authorization Endpoints

The implementation of authentication and authorization endpoints in the API is covered in this video.

10. Deploy to Azure

The process of deploying the restaurant website to Azure, a cloud hosting platform, is explained and demonstrated in this video.

1. Introduction

This video provides an introduction to the section and an overview of the topics covered in the videos related to pagination and search order list.

2. Add Search to Orders in API

The implementation of search functionality for orders in the API, allowing users to search for specific orders based on criteria, is covered in this video.

3. Add Pagination to Orders in API

In this video, you will look at the explanation and implementation of pagination for orders in the API, allowing users to navigate through a large number of orders.

4. Add UI Filters

The implementation of user interface filters for the order list page, providing options to filter orders based on different criteria, is covered in this video.

5. Controller Components

In this video, you will look at the controller components for handling pagination and filters in the order list page, providing the necessary functionality.

6. Local Filters in Action

The integration of local filters in the application, allowing users to filter orders on the client side, is implemented in this video.

7. API Filters in Action

The integration of API filters in the application, allowing users to send filter parameters to the API to retrieve filtered results, is covered in this video.

8. Small Bug

This video addresses and resolves a small bug related to the pagination and filtering functionality.

9. Get Total Records

In this video, you will look at the explanation and implementation of retrieving the total number of records for pagination purposes.

10. Pagination in Action

In this video, you will see the integration of the pagination functionality in the order list page, allowing users to navigate through different pages of orders.

11. Page Size in Action

In this video, you will look at the explanation and implementation of the page size functionality, allowing users to configure the number of orders displayed per page.