Full Stack React Bootcamp With .Net Api [2023] [10 Projects]

Master React w/ Redux Toolkit & hooks from scratch. Build 10 projects with e-commerce application [.NET API & EF Core]

What you'll learn

React 18 Fundamentals

Routing with React Router

Payments with Stripe API with React

Axios Calls

Redux Toolkit

RTK Query and Mutations

File Management in React

Authentication and Authorization in React

TypeScript

Build and deploy scalable API using .NET 7 and EF Core

10 Projects and 25 assignments

Learn Best Practices for learning React

Deploy React JS Applications to Azure

Requirements

Basic understanding of Html, CSS and Javascript

Familiarity with concept of API's

.NET API with EF Core CRUD Operation

SQL Server basics

Description

This course will be hands on course which will give you practical exposure to React with over 25 assignments and 10 projects. We will start with all the basic fundamentals along with advance concepts and related topic to make you proficient as a React.js developer.We will be building backend in .NET API and consume all of that using React.js. You are not required to build the API. That section is skippable, since I will be hosting the API online which can be used for the course. But I do teach and deploy API in the course.My Goal with this course is simple - being a .NET developer as technology evolves we have to adapt with front end frameworks. I want one course that will focus on making a backend developer give solid experience in React.js in a manner that is easy to understand and provides extensive depth to master the fundamentals and advance concepts in React.jsThis will be hands on bootcamp which will take you from zero to hero in React JS!This course contains two modulesBeginner's Guide to React (Build 8 projects)Real world project using React and .NET APIIn the first module we will build 8 small projects to understand basic fundamentals of React, Redux Toolkit and Hooks. Once we understand all the foundation, we will be building a complete real world restaurant website, where customers can place order using their credit card, track the status and admin can view/manage orders.This will be the only course you will need to learn and master React JS and we will be integrating .NET API's.We will be building 10 projects in this course. Along with a completed Restaurant website with payment integration!

Overview

Section 1: Introduction

Lecture 1 Welcome

Lecture 2 Why should you learn react?

Lecture 3 Live Demo - Final Project

Lecture 4 Feedback

Lecture 5 Additional Resources

Lecture 6 What we will build Part 1

Lecture 7 What we will build Part 2

Lecture 8 Course Prerequisites

Lecture 9 How to get Help?

Lecture 10 Project Resources

Lecture 11 Tools Needed

Lecture 12 Tools Link

Lecture 13 Visual Studio Code Extensions

Section 2: React Fundamentals

Lecture 14 Setup basic HTML and add React CDN

Lecture 15 First React Code

Lecture 16 Assignment 1 - Writing first React Code

Lecture 17 Creating Element and rendering in React

Lecture 18 What is JSX?

Lecture 19 Smart way to create React App

Lecture 20 Demo - Create React App

Lecture 21 Run the Project

Lecture 22 CleanUp Project

Lecture 23 Make project functional again

Lecture 24 First React Component

Lecture 25 Assignment 2 - React Component

Lecture 26 Assignment 3 - Parent Child Component

Lecture 27 Assignment 3 Solution - Parent Child Component

Lecture 28 Rules of JSX

Section 3: React Components

Lecture 29 Work with styles

Lecture 30 Adding Bootstrap Classes

Lecture 31 Work with Classes Part 1

Lecture 32 Variable in JSX

Lecture 33 Assignment 3 - Adding Const

Lecture 34 Assignment 3 Solution - Adding Const

Lecture 35 HTML Element in JSX

Lecture 36 Student Component

Lecture 37 Export and Import Component

Lecture 38 Assignment 4 - Separating Student Component

Lecture 39 Assignment 4 Solution - Separating Student Component

Lecture 40 Props and Components

Lecture 41 Install third party libraries and Images

Lecture 42 Import Image and Header Design

Lecture 43 Footer and Main Body Component

Lecture 44 Assignment 5 - Fix Error and Designing

Lecture 45 Passing Components as Children

Lecture 46 Final Hierarchy

Lecture 47 Arrow Function

Lecture 48 functional vs class components

Lecture 49 Class Components

Lecture 50 Assignment 6 - Convert MainBody to Class Component

Section 4: React State - CounOPedia

Lecture 51 Create CountOPedia

Lecture 52 Assignment 7 Solution - Setup CountOPedia

Lecture 53 Counter Application Buttons

Lecture 54 Click Events

Lecture 55 Setting and Retrieving State

Lecture 56 Demo - React State

Lecture 57 State Summary

Lecture 58 New SetState Syntax

Lecture 59 CountoPedia UI

Lecture 60 Random play and Reset Button

Lecture 61 Assignment 8 - Game Status and Last Play

Lecture 62 Assignment 8 Solution - Game Status and Last Play

Section 5: ContactOPedia - CRUD Operations

Lecture 63 Create Project - ContactOPedia

Lecture 64 Add Components

Lecture 65 Skeleton of Components

Lecture 66 Add Contact UI

Lecture 67 Favorite and General Contact State

Lecture 68 Individual Contact UI

Lecture 69 Look and Feel ContactOPedia

Lecture 70 Add Contact Handler

Lecture 71 Add Contact in Action

Lecture 72 Add Validations

Lecture 73 Display Validation and Success Notification

Lecture 74 Toggle Favorites

Lecture 75 Assignment 10 - Delete Contact

Lecture 76 Assignment 10 Solution - Delete Contact

Lecture 77 Add Random User to Contact List

Lecture 78 Axios Call

Lecture 79 Demo - Adding Random Contact

Lecture 80 Assignment 11 - Remove All Contact

Lecture 81 Assignment 11 Solution - Remove all Contact

Lecture 82 Which Contact has to be updated

Lecture 83 Toggle UI Based on Update

Lecture 84 Cancel Button in Action

Lecture 85 Update Contact- Part 1

Lecture 86 Update Contact - Part 2

Section 6: CyclOPedia - Lifecycle Methods Class Components

Lecture 87 Create Project - Cyclopedia

Lecture 88 Setup Random API

Lecture 89 Display Instructor

Lecture 90 Component Did Update

Lecture 91 Controlled Component

Lecture 92 Saving in LocalStorage

Lecture 93 Separating out Instructor

Lecture 94 Component will UnMount

Lecture 95 Load Student List

Lecture 96 Bug time

Section 7: WatchOPedia - Hooks in React

Lecture 97 Create WatchOPedia

Lecture 98 Setup Counter

Lecture 99 UseState in Action

Lecture 100 Gotchas with useState

Lecture 101 Objects and State

Lecture 102 Another Gotcha with useState

Lecture 103 Something Exciting

Lecture 104 WatchoPedia Movie Setup

Lecture 105 Assignment 12 Solution - Display Movie List

Lecture 106 Assignment 13 Solution - Add Movie to watch

Section 8: CyclOPedia - Lifecycle Methods Functional Components

Lecture 107 Initial Project

Lecture 108 Name and Feedback Input fields

Lecture 109 UseEffect Overview

Lecture 110 UseEffect - First Render Only

Lecture 111 UseEffect - Unmount in Action

Lecture 112 Assignment 14 - Use Effect

Lecture 113 Assignment 14 Solution - Use Effect

Lecture 114 Load Student on Counter Update

Lecture 115 useRef and previous values

Lecture 116 Use Ref on Student Count

Lecture 117 More common use of useRef

Lecture 118 useld Hook

Section 9: RouteOPedia - Routing in React

Lecture 119 Setup RouteOPedia

Lecture 120 Create More Components

Lecture 121 First Route

Lecture 122 Link Component

Lecture 123 Assignment 15 - Product Routes

Lecture 124 Assignment 15 - Product Routes Solution

Lecture 125 Nested Routes

Lecture 126 Index in Nested Route

Lecture 127 Not Found

Lecture 128 Parameters in URL

Lecture 129 Assignment 16 - Parameters in URL

Lecture 130 NavLink Component

Lecture 131 Navigate using useNavigate Hook

Lecture 132 Using Link Component to Navigate

Lecture 133 Another Navigation Method

Lecture 134 Navigate back

Section 10: ReduxOPedia - Redux and React

Lecture 135 Setup ReduxOPedia

Lecture 136 Add Redux Store

Lecture 137 Create first Reducer and Actions

Lecture 138 Log State and Dispatch Action

Lecture 139 Retrieve value from state

Lecture 140 Dispatching Action from React Component

Lecture 141 Assignment 17 - Counter Multiplier

Lecture 142 Assignment 17 Solution - Counter Multiplier

Lecture 143 Add Destination Slice

Lecture 144 Display Destinations

Lecture 145 Select Destination

Lecture 146 Display selected destination

Lecture 147 Reset counter and destination

Lecture 148 Listen to action of a different Reducer

Lecture 149 Say NO to magic strings

Lecture 150 Custom Actions

Lecture 151 Alternative Approach for import and export

Section 11: TravelOPedia - Redux Toolkit, Query, Mutations and Slice

Lecture 152 Setup TravelOPedia

Lecture 153 Setup Destination Components

Lecture 154 Setup JSON Server

Lecture 155 Create Destination API

Lecture 156 Fetch Records from API

Lecture 157 Add Destination Controller Component

Lecture 158 Add Mutations

Lecture 159 Call POST Mutation

Lecture 160 query vs mutation

Lecture 161 Caching with RTK Query

Lecture 162 TAGS in Action

Lecture 163 Assignment 18 - Delete Destination

Lecture 164 Assignment 18 Solution - Delete Destination

Lecture 165 Response from Query and Parameters

Lecture 166 Separating out Individual Destination

Lecture 167 Assignment 19 - Edit Functionality

Lecture 168 Assignment 19 Solution - Edit Functionality

Lecture 169 Integrate RTK Query with Redux Store

Lecture 170 Call Another API

Lecture 171 Show Random Destination

Section 12: 12 .NET API - Basic Setup

Lecture 172 API is optional and you can use the API right here

Lecture 173 Setup Storage Account for Images on Azure

Lecture 174 Create API Project

Lecture 175 Install NuGet Packages

Lecture 176 Setup Connection String and DBContext

Lecture 177 Create SQL Tables and push Migrations

Lecture 178 Add Name to AspNetUsers

Lecture 179 Create Menu Item Table

Lecture 180 Seed Menu Items

Lecture 181 Get Menu Item and API Response

Lecture 182 Get Individual Menu Item

Lecture 183 Add Storage Account Connection String

Lecture 184 Implement Blob Service

Section 13: .NET API - Menu Item

Lecture 185 Create Menu Item

Lecture 186 Create Menu Item In Action

Lecture 187 Update Menu Item

Lecture 188 Delete Menu Item

Lecture 189 Correct Status Code and Success Flag

Section 14: .NET API - Authentication and Authorization

Lecture 190 Add Login and Register DTOs

Lecture 191 Auth Controller and Dependency Injection

Lecture 192 Register in Action

Lecture 193 Login in Action

Lecture 194 JWT Token

Lecture 195 Add Authentication and Authorization Endpoints

Lecture 196 Setup API for Authentication

Lecture 197 Add Security to Swagger

Section 15: .NET API - Shopping Cart and Order

Lecture 198 Add Shopping Cart Models

Lecture 199 Shopping Cart Controller and Logic

Lecture 200 Update Shopping Cart Endpoint

Lecture 201 Test Shopping Cart Endpoint

Lecture 202 Get Shopping Cart

Lecture 203 Order Header and Details Model

Lecture 204 Order DTOs

Lecture 205 Get Order

Lecture 206 Create Order in Action

Lecture 207 Update Order Details

Lecture 208 Stripe Payment Endpoint

Lecture 209 Stripe Client Secret in Action

Lecture 210 Shopping Cart API Update

Lecture 211 Deploy API

Section 16: 16 Red Mango - Home Page

Lecture 212 Typescript Introduction

Lecture 213 Create App with Typescript

Lecture 214 Package Json

Lecture 215 File CleanUp

Lecture 216 Install Bootstrap and Bootstrap Icons

Lecture 217 Header and Footer Component

Lecture 218 Header UI

Lecture 219 Fetch Menu Items & Interfaces in TS

Lecture 220 Better Structure

Lecture 221 Card Component

Lecture 222 Home Page UI

Lecture 223 Add Routing and Not Found

Lecture 224 Menu Item Details Page

Section 17: 17 Setup Redux and RTK

Lecture 225 Add Redux and Tedux Toolkit to Project

Lecture 226 Add Query to Fetch Menu Items

Lecture 227 Call Slice to Fetch Data

Lecture 228 Display Loading Text

Lecture 229 Assignment 20 - Load Menu Item Details

Lecture 230 Assignment 20 Solution - Load Menu Item Details

Lecture 231 Manage Quantity on Menu Item Details

Section 18: Shopping Cart

Lecture 232 User ID for Shopping Cart

Lecture 233 Setup Shopping Cart Query and Mutation

Lecture 234 Add to Cart in Action

Lecture 235 Assignment 21 - Add to Cart Home Page

Lecture 236 Assignment 21 Solution - Add to Cart Home Page

Lecture 237 Add Mini Loader on Home Page

Lecture 238 Mini Loader Component

Lecture 239 Main Loader

Lecture 240 Loader on Add to Cart in Details Page

Lecture 241 Shopping Cart Interface

Lecture 242 Get Shopping Cart and Store in Slice

Lecture 243 Shopping Cart Page

Lecture 244 Shopping Cart Summary

Lecture 245 Add Reducers to Shopping Cart Slice

Lecture 246 Shopping Cart Functional

Lecture 247 Show Distinct Items in Cart

Lecture 248 Display Pickup Details

Lecture 249 Controller Component Helper Method

Lecture 250 Loading Component

Section 19: 19 Authentication and Authorization

Lecture 251 Login and Register UI

Lecture 252 How Login and Register will work

Lecture 253 Add Auth API

Lecture 254 Authentication Slice and User Interface

Lecture 255 Controller Components in Register

Lecture 256 Response API Interface

Lecture 257 Register User

Lecture 258 Controller Login Fields

Lecture 259 Login in Action

Lecture 260 Add Token to LocalStorage

Lecture 261 Decode JWT Token

Lecture 262 Toggle Login and Logout button

Lecture 263 Login and Logout in Action

Lecture 264 Small Bug with Authentication

Lecture 265 Toastify Notifications

Lecture 266 Add Loader on Register

Lecture 267 Add Test Components for Authentication and Authorization

Lecture 268 Authentication with HOC

Lecture 269 Authorization with HOC

Lecture 270 Only Authenticated User can Add to Cart

Lecture 271 Dynamic User ID

Lecture 272 Cleanup test Components

Section 20: 20 Payments

Lecture 273 Load User Details of Logged in User

Lecture 274 Stripe and React

Lecture 275 Create Payment API

Lecture 276 Calling Payment API

Lecture 277 Use Location State

Lecture 278 Stripe Card Demo

Lecture 279 Order Summary UI

Lecture 280 Local Interfaces

Lecture 281 Dynamic Order Summary

Lecture 282 Stripe Processing

Lecture 283 Stripe success object

Section 21: 21 Order

Lecture 284 Order API

Lecture 285 Create Order Object to Create Order

Lecture 286 Create Order

Lecture 287 Order Confirmed Logic

Lecture 288 Order Confirmation Page

Lecture 289 Get Order Endpoints in API

Lecture 290 My Orders UI

Lecture 291 Dynamic My Orders

Lecture 292 Bug with my orders

Lecture 293 Make a new component for Order List

Lecture 294 12 Order Details

Lecture 295 13 Assignment 22 - Solve Data Bug

Lecture 296 14 Manage Orders Header based on Role

Lecture 297 15 Status Color Helper Method

Lecture 298 16 Display Badge for Order Status

Lecture 299 17 Back to Order Button

Lecture 300 18 Buttons for Nest Status

Lecture 301 19 Order Status Badge on Order List

Lecture 302 20 Order API - PUT Endpoint

Section 22: 22 Menu Items

Lecture 303 Create Menu Item List Page

Lecture 304 Assignment 23 - Dynamic Menu Item List

Lecture 305 Menu Item Upsert UI

Lecture 306 Controller Components Menu Item

Lecture 307 Upload Image in React

Lecture 308 Menu Item API Mutations

Lecture 309 Create Menu Item

Lecture 310 Update Designing

Lecture 311 Load Menu Item to Update

Lecture 312 Update Menu Item

Lecture 313 Category Dropdown

Lecture 314 Small Bug

Lecture 315 Delete Menu Item

Lecture 316 Assignment 25 - Data goes away on refresh

Lecture 317 Assignment 25 - Bug Solution

Section 23: 23 Home UI

Lecture 318 Banner

Lecture 319 Renaming Folder

Lecture 320 Store Search Value in Redux

Lecture 321 Search in Banner

Lecture 322 Show all Category for Filter

Lecture 323 Category Filters in Action

Lecture 324 Sorting in Action

Lecture 325 Skip Getting Shopping Cart

Lecture 326 Authentication and Authorization End Points

Lecture 327 Deploy to Azure

Anyone looking to learn React,.NET / Java developers who wants to learn front end framework