Complete Guide To Building An App With .Net Core And React (updated 12/2022)

The complete guide to building an app from start to finish using .Net 7.0, React 18 (with Typescript) and Mobx

What you'll learn

Learn how to build an application from start to publishing with .Net Core (v2.2), React (with Typescript) and Mobx

How to build a Web API in .Net Core with Clean Architecture using the CQRS + Mediator pattern

How to use AutoMapper and MediatR packages in the .Net projects

How to build a multi-project solution with .Net Core

How to use Entity Framework Core as the Object Relational Mapper

How to integrate ASPNET Core SignalR into an application for real time web communication

How to add Identity and Authentication using .Net Core Identity

How to build a Client side application for the API with React

How to use MobX as a state management library

How to build our own Photo upload widget with a Dropzone and a Cropper to resize images

Requirements

Some development experience required (3 -6 months)

A computer with Mac OSX, Windows or Linux installed

A passion for learning how to build web applications

Description

***Course has now been refreshed for .Net 7.0, React 18 and React Router v6***Have you learnt the basics of ASP.NET Core and React? Not sure where to go next? This course should be able to help with that. In this course we learn how to build a multi-project ASP.NET Core solution that is built using Clean Architecture and the CQRS and Mediator pattern that makes our code easy to understand, reason about and extend.Both ASP.NET Core and React are hot topics and this course will enhance your knowledge of both, simply by building an application from start to finish. In each module we learn something new, whilst incrementally adding features to the application. Building an application is significantly more rewarding than building yet another Todo List from the documentation!Every line of code is demonstrated and explained and by the end of this course you will have the skills and knowledge to build your own application using the techniques taught in this course.Here are some of the things you will learn about in this course:Setting up the developer environmentCreating a multi-project solution using the the ASP.NET Core WebAPI and the React app using the DotNet CLI and the create-react-app utility.Clean Architecture and the CQRS + Mediator patternSetting up and configuring ASP.NET Core identity for authenticationUsing React with TypescriptAdding a Client side login and register function to our React applicationUsing React RouterUsing AutoMapper in ASP.NET CoreBuilding a great looking UI using Semantic UIAdding Photo Upload widget and creating user profile pagesUsing React Final Form to create re-usable form inputs with validationPaging, Sorting and FilteringUsing SignalR to enable real time web communication to a chat feature in our appPublishing the application to both IIS and LinuxGetting an ‘A’ rating for security from a well known security scanning site.Many more things as wellTools you need for this courseIn this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like… as long as it's Windows, Linux or MacIs this course for you?This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.On this course we will build an example social network application that allows users to sign up to events (similar to MeetUp or Facebook), completely from scratch. All we start with is an empty terminal window or command prompt.All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and React

Overview

Section 1: Introduction

Lecture 1 Course introduction

Lecture 2 Setting up the developer environment

Lecture 3 VS Code extensions

Lecture 4 Source code and Resources used on this course

Section 2: Walking Skeleton Part 1 - API

Lecture 5 Introduction

Lecture 6 Creating the .Net projects and references

Lecture 7 Reviewing the project files and startup

Lecture 8 The API controller and using postman

Lecture 9 Creating a domain entity

Lecture 10 Adding an Entity Framework Db Context

Lecture 11 Creating an Entity Framework code first migration

Lecture 12 Creating the database

Lecture 13 Seeding data to the Database

Lecture 14 Adding an API controller

Lecture 15 Saving changes into source control

Lecture 16 Summary of Section 2

Section 3: Walking Skeleton Part 2 - Client

Lecture 17 Introduction

Lecture 18 Creating the React project

Lecture 19 Reviewing the React project files

Lecture 20 Why React?

Lecture 21 React Components

Lecture 22 Typescript concepts

Lecture 23 Typescript demo

Lecture 24 Using Typescript with React

Lecture 25 React dev tools

Lecture 26 Fetching data from the API

Lecture 27 CORS Policy

Lecture 28 Semantic UI React

Lecture 29 Summary of section 3

Section 4: Creating a CRUD application using the CQRS + Mediator pattern

Lecture 30 Introduction

Lecture 31 Clean Architecture

Lecture 32 CQRS

Lecture 33 Creating our first Query handler

Lecture 34 Thin controllers in the API

Lecture 35 Adding a Details handler

Lecture 36 Adding a Create handler

Lecture 37 Adding an Edit handler

Lecture 38 Adding AutoMapper

Lecture 39 Adding a Delete handler

Lecture 40 Startup class housekeeping

Lecture 41 Cancellation tokens

Lecture 42 Using the debugger in VS Code

Lecture 43 Summary of section 4

Section 5: Creating a CRUD application in React

Lecture 44 Introduction

Lecture 45 Folder structure in React

Lecture 46 Adding an Activity interface

Lecture 47 Adding a Nav bar

Lecture 48 Adding some style to the nav bar

Lecture 49 Creating an activity dashboard

Lecture 50 Creating an activity list

Lecture 51 Creating a details view

Lecture 52 Creating an Activity form

Lecture 53 Selecting an activity to view

Lecture 54 Displaying the create/edit form

Lecture 55 Editing an activity and form basics in React

Lecture 56 Handle create and edit submission

Lecture 57 Using a GUID for the activity id

Lecture 58 Deleting an activity

Lecture 59 Summary of section 5

Section 6: Axios

Lecture 60 Introduction

Lecture 61 Setting up axios

Lecture 62 Axios types

Lecture 63 Adding loading indicators

Lecture 64 Posting data to the server

Lecture 65 Deleting activity on the server

Lecture 66 Summary of section 6

Section 7: MobX

Lecture 67 Introduction

Lecture 68 What is MobX?

Lecture 69 Setting up MobX

Lecture 70 MobX actions

Lecture 71 Refactoring the app to use MobX

Lecture 72 MobX strict mode

Lecture 73 Selecting an Activity using MobX

Lecture 74 Creating an Activity using MobX

Lecture 75 Deleting an activity using MobX

Lecture 76 Using a Javascript map object to store the activities

Lecture 77 Summary of section 7

Section 8: Routing

Lecture 78 Introduction

Lecture 79 Installing React Router

Lecture 80 Adding routes

Lecture 81 Adding nav links

Lecture 82 Adding a details link

Lecture 83 Getting an individual activity

Lecture 84 Using route parameters

Lecture 85 Adding the edit activity route

Lecture 86 Adding a key to the route

Lecture 87 Redirect after submission

Lecture 88 Moving the home page outside of nav

Lecture 89 Cleaning up unused code

Lecture 90 Summary of section 8

Section 9: Styling the User Interface

Lecture 91 Introduction

Lecture 92 Styling the activity list

Lecture 93 Grouping the activities by date

Lecture 94 Styling the list items

Lecture 95 Activity details page

Lecture 96 Populating the detailed components

Lecture 97 Adding the activity filter component

Lecture 98 Styling the home page

Lecture 99 Summary of section 9

Section 10: Error handling

Lecture 100 Introduction

Lecture 101 Validation with data annotations

Lecture 102 Fluent Validation

Lecture 103 Handling API Error responses

Lecture 104 Handling API Error responses part 2

Lecture 105 Handling API Error responses part 3

Lecture 106 Handling API Error responses part 4

Lecture 107 Handling exceptions

Lecture 108 Preparing for setting up error handling in the client app

Lecture 109 Using an interceptor to handle API error responses

Lecture 110 Adding a not found component

Lecture 111 Handling 400 errors

Lecture 112 Handling 500 errors on the client

Lecture 113 Handling the validation error from an invalid GUID

Lecture 114 Summary of section 10

Section 11: Forms

Lecture 115 Introduction

Lecture 116 Setting up Formik

Lecture 117 Formik with less code

Lecture 118 Validation in Formik

Lecture 119 Creating a reusable text input

Lecture 120 Creating a reusable text area

Lecture 121 Creating a reusable select input

Lecture 122 Creating a reusable date input

Lecture 123 The date strategy

Lecture 124 Using Date-FNS

Lecture 125 Hooking up the form submission to Formik

Lecture 126 Summary of section 11

Section 12: Identity

Lecture 127 Introduction

Lecture 128 Adding a user entity

Lecture 129 Adding an IdentityDbContext

Lecture 130 Configuring Identity in the Startup class

Lecture 131 Adding seed users

Lecture 132 Creating the user DTOs

Lecture 133 Adding an account controller

Lecture 134 JSON Web Tokens

Lecture 135 Creating a token service

Lecture 136 Authenticating to the app

Lecture 137 Storing secrets in development

Lecture 138 Creating an auth policy

Lecture 139 Registering new users

Lecture 140 Validating the registration of users

Lecture 141 Getting the current user

Lecture 142 Summary of section 12

Section 13: Client side login and registration

Lecture 143 Introduction

Lecture 144 Creating a login form

Lecture 145 Creating the interfaces and methods

Lecture 146 Creating a user store

Lecture 147 Displaying errors in the form

Lecture 148 Setting the token upon login

Lecture 149 Updating the home page and nav bar

Lecture 150 Persisting the login

Lecture 151 Sending up the token with the request

Lecture 152 Adding Modals

Lecture 153 Adding the register form

Lecture 154 Handling validation errors in the register form

Lecture 155 Summary of section 13

Section 14: Entity Framework Relationships

Lecture 156 Introduction

Lecture 157 Configuring the new relationship

Lecture 158 Adding an infrastructure project

Lecture 159 Updating the create activity handler

Lecture 160 Testing the create activity

Lecture 161 Loading related data

Lecture 162 Shaping the related data

Lecture 163 Configuring AutoMapper profiles

Lecture 164 Adding the attendance handler

Lecture 165 Adding a custom auth policy

Lecture 166 Resolving the bug with with the edit handler

Lecture 167 Updating the seed data

Lecture 168 Summary of section 14

Section 15: Feature - Client side attendance

Lecture 169 Introduction

Lecture 170 Adding the attendees component

Lecture 171 Updating the details component

Lecture 172 Conditionally rendering the buttons

Lecture 173 Adding the store methods to attend

Lecture 174 Updating the create and edit methods

Lecture 175 Adding a cancel activity method

Lecture 176 Adding a popover for attendees

Lecture 177 Summary of section 15

Section 16: API Image upload

Lecture 178 Introduction

Lecture 179 Adding Cloudinary

Lecture 180 Adding the Cloudinary interfaces

Lecture 181 Adding the add photo logic

Lecture 182 Adding the Photo entity

Lecture 183 Adding the Add photo handler

Lecture 184 Adding a photos controller

Lecture 185 Deleting photos

Lecture 186 Setting the main photo

Lecture 187 Returning user profiles

Lecture 188 Updating the mapping configuration

Lecture 189 Returning an attendee DTO

Lecture 190 Summary of section 16

Section 17: Client image upload

Lecture 191 Introduction

Lecture 192 Creating a profile page

Lecture 193 Adding a profile header

Lecture 194 Adding the profile content

Lecture 195 Getting the profile data

Lecture 196 Getting the profile data part 2

Lecture 197 Displaying the photos

Lecture 198 Conditionally rendering the photo widget

Lecture 199 Creating a photo upload widget

Lecture 200 Adding a Dropzone

Lecture 201 Styling the Dropzone

Lecture 202 Adding a react cropper

Lecture 203 Adding the photo upload method

Lecture 204 Setting the main photo

Lecture 205 Deleting photos

Lecture 206 Summary of section 17

Section 18: Challenge

Lecture 207 Challenge introduction

Section 19: SignalR

Lecture 208 Introduction

Lecture 209 Setting up the comment entity

Lecture 210 Adding a comment DTO and mapping

Lecture 211 Adding the create handler

Lecture 212 Adding a list handler

Lecture 213 Adding a SignalR Hub

Lecture 214 Authenticating to SignalR

Lecture 215 Adding SignalR to the client

Lecture 216 Connecting to the hub

Lecture 217 Sending comments

Lecture 218 Adding validation and fix issues

Lecture 219 Resolving UTC dates

Lecture 220 Summary of section 19

Section 20: Followers / Following feature

Lecture 221 Introduction

Lecture 222 Adding a join entity

Lecture 223 Adding a handler for following

Lecture 224 Adding the controller

Lecture 225 Update the profile class

Lecture 226 Return a list of followers

Lecture 227 Adding the following property to the mapping configuration

Lecture 228 Updating the other handlers with the following property

Lecture 229 Adding the UI for followers

Lecture 230 Adding methods to follow and unfollow

Lecture 231 Making the follow button a component

Lecture 232 Getting a list of followings

Lecture 233 Using MobX Reactions

Lecture 234 Summary of section 20

Section 21: Paging, Sorting and Filtering

Lecture 235 Introduction

Lecture 236 Adding a PagedList class

Lecture 237 Adding application layer pagination logic

Lecture 238 Adding a pagination header

Lecture 239 Adding client side pagination

Lecture 240 Adding pagination parameters

Lecture 241 Adding vertical paging

Lecture 242 Adding infinite scrolling

Lecture 243 Adding filtering in the API

Lecture 244 Client side filtering

Lecture 245 Updating the filter component

Lecture 246 Adding placeholders

Lecture 247 Adding a user profile activities component + challenge

Lecture 248 Challenge solution

Lecture 249 Summary of section 21

Section 22: Finishing touches and publishing

Lecture 250 Introduction

Lecture 251 Adding Scroll to top for our routes

Lecture 252 Adding private routes

Lecture 253 Prepping the client app for production

Lecture 254 Building the production build of the react app

Lecture 255 Running the client app on the dotnet Kestrel server

Lecture 256 Adding PostGresQL

Lecture 257 Switching to PostGresQL

Lecture 258 Deployment to flyio - Dockerise the app

Lecture 259 Deployment to flyio - updating the config to use docker postgres

Lecture 260 Deployment to flyio - using fly launch to create deploy config

Lecture 261 Deploy to flyio - creating the config variables and secrets

Lecture 262 Deployment to flyio - creating a github action

Lecture 263 Deployment to flyio - Automatic deployment with github actions

Lecture 264 Heroku no longer providing a free service

Lecture 265 Setting up Heroku

Lecture 266 Deploying the app to Heroku

Lecture 267 Security tightening

Lecture 268 Content security policies

Lecture 269 End of course summary

Section 23: Bonus section - Identity Cookbook

Lecture 270 Introduction

Lecture 271 Setting up Facebook login

Lecture 272 Adding the Facebook JS SDK

Lecture 273 Adding the client methods for FB Login

Lecture 274 Configuring the API endpoint

Lecture 275 Debugging the Facebook info

Lecture 276 Redeploying the app to Flyio

Lecture 277 Introduction to Refresh Tokens

Lecture 278 Adding the Refresh token domain entity

Lecture 279 Updating the JWT token parameters

Lecture 280 Updating the account controller

Lecture 281 Testing in Postman

Lecture 282 Client side configuration

Lecture 283 Testing the refresh token in the client

Lecture 284 Redeploying the app to Flyio

Lecture 285 Introduction to Email verification

Lecture 286 Setting up SendGrid

Lecture 287 Require a confirmed email to sign in

Lecture 288 Updating the register method

Lecture 289 Adding the confirm email endpoint

Lecture 290 Testing in Postman

Lecture 291 Setting up the client for email confirmation

Lecture 292 Adding a verify email component

Lecture 293 Finishing up and testing

Lecture 294 Redeploying the app to Flyio

Section 24: Updating to .Net 6

Lecture 295 Updating the project to use .Net 6

Lecture 296 .Net 6 new features and how to update the project to use them

Lecture 297 Updating the client packages

Section 25: Updating to .Net 7, React 18 and React Router 6

Lecture 298 Updating .Net to .Net 7.0

Lecture 299 Updating to React 18

Lecture 300 Updating to React Router 6

Lecture 301 Fixing any typescript errors

Section 26: Legacy content

Lecture 302 Where to find the legacy content

Beginners to .Net Core or React or Typescript who want to learn how to build something with these tools,Students who prefer the practical approach to learning rather than learning by theory