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

The complete guide to building an app from start to finish using ASP.NET Core, React (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 updated for .Net 6.0 and React 17***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 Changes to the .Net 6 hosting model

Lecture 8 Reviewing the project files and startup

Lecture 9 The API controller and using postman

Lecture 10 Creating a domain entity

Lecture 11 Adding an Entity Framework Db Context

Lecture 12 Creating an Entity Framework code first migration

Lecture 13 Creating the database

Lecture 14 Seeding data to the Database

Lecture 15 Adding an API controller

Lecture 16 Saving changes into source control

Lecture 17 Summary of Section 2

Section 3: Walking Skeleton Part 2 - Client

Lecture 18 Introduction

Lecture 19 Creating the React project

Lecture 20 Reviewing the React project files

Lecture 21 Why React?

Lecture 22 React Components

Lecture 23 Typescript concepts

Lecture 24 Typescript demo

Lecture 25 Using Typescript with React

Lecture 26 React dev tools

Lecture 27 Fetching data from the API

Lecture 28 CORS Policy

Lecture 29 Semantic UI React

Lecture 30 Summary of section 3

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

Lecture 31 Introduction

Lecture 32 Clean Architecture

Lecture 33 CQRS

Lecture 34 Creating our first Query handler

Lecture 35 Thin controllers in the API

Lecture 36 Adding a Details handler

Lecture 37 Adding a Create handler

Lecture 38 Adding an Edit handler

Lecture 39 Adding AutoMapper

Lecture 40 Adding a Delete handler

Lecture 41 Startup class housekeeping

Lecture 42 Cancellation tokens

Lecture 43 Using the debugger in VS Code

Lecture 44 Summary of section 4

Section 5: Creating a CRUD application in React

Lecture 45 Introduction

Lecture 46 Folder structure in React

Lecture 47 Adding an Activity interface

Lecture 48 Adding a Nav bar

Lecture 49 Adding some style to the nav bar

Lecture 50 Creating an activity dashboard

Lecture 51 Creating an activity list

Lecture 52 Creating a details view

Lecture 53 Creating an Activity form

Lecture 54 Selecting an activity to view

Lecture 55 Displaying the create/edit form

Lecture 56 Editing an activity and form basics in React

Lecture 57 Handle create and edit submission

Lecture 58 Using a GUID for the activity id

Lecture 59 Deleting an activity

Lecture 60 Summary of section 5

Section 6: Axios

Lecture 61 Introduction

Lecture 62 Setting up axios

Lecture 63 Axios types

Lecture 64 Adding loading indicators

Lecture 65 Posting data to the server

Lecture 66 Deleting activity on the server

Lecture 67 Summary of section 6

Section 7: MobX

Lecture 68 Introduction

Lecture 69 What is MobX?

Lecture 70 Setting up MobX

Lecture 71 MobX actions

Lecture 72 Refactoring the app to use MobX

Lecture 73 MobX strict mode

Lecture 74 Selecting an Activity using MobX

Lecture 75 Creating an Activity using MobX

Lecture 76 Deleting an activity using MobX

Lecture 77 Using a Javascript map object to store the activities

Lecture 78 Summary of section 7

Section 8: Routing

Lecture 79 Introduction

Lecture 80 Installing React Router

Lecture 81 Adding routes

Lecture 82 Adding nav links

Lecture 83 Adding a details link

Lecture 84 Getting an individual activity

Lecture 85 Using route parameters

Lecture 86 Adding the edit activity route

Lecture 87 Adding a key to the route

Lecture 88 Redirect after submission

Lecture 89 Moving the home page outside of nav

Lecture 90 Cleaning up unused code

Lecture 91 Summary of section 8

Section 9: Styling the User Interface

Lecture 92 Introduction

Lecture 93 Styling the activity list

Lecture 94 Grouping the activities by date

Lecture 95 Styling the list items

Lecture 96 Activity details page

Lecture 97 Populating the detailed components

Lecture 98 Adding the activity filter component

Lecture 99 Styling the home page

Lecture 100 Summary of section 9

Section 10: Error handling

Lecture 101 Introduction

Lecture 102 Validation with data annotations

Lecture 103 Fluent Validation

Lecture 104 Handling API Error responses

Lecture 105 Handling API Error responses part 2

Lecture 106 Handling API Error responses part 3

Lecture 107 Handling API Error responses part 4

Lecture 108 Handling exceptions

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

Lecture 110 Using an interceptor to handle API error responses

Lecture 111 Adding a not found component

Lecture 112 Handling 400 errors

Lecture 113 Handling 500 errors on the client

Lecture 114 Handling the validation error from an invalid GUID

Lecture 115 Summary of section 10

Section 11: Forms

Lecture 116 Introduction

Lecture 117 Setting up Formik

Lecture 118 Formik with less code

Lecture 119 Validation in Formik

Lecture 120 Creating a reusable text input

Lecture 121 Creating a reusable text area

Lecture 122 Creating a reusable select input

Lecture 123 Creating a reusable date input

Lecture 124 The date strategy

Lecture 125 Using Date-FNS

Lecture 126 Hooking up the form submission to Formik

Lecture 127 Summary of section 11

Section 12: Identity

Lecture 128 Introduction

Lecture 129 Adding a user entity

Lecture 130 Adding an IdentityDbContext

Lecture 131 Configuring Identity in the Startup class

Lecture 132 Adding seed users

Lecture 133 Creating the user DTOs

Lecture 134 Adding an account controller

Lecture 135 JSON Web Tokens

Lecture 136 Creating a token service

Lecture 137 Authenticating to the app

Lecture 138 Storing secrets in development

Lecture 139 Creating an auth policy

Lecture 140 Registering new users

Lecture 141 Validating the registration of users

Lecture 142 Getting the current user

Lecture 143 Summary of section 12

Section 13: Client side login and registration

Lecture 144 Introduction

Lecture 145 Creating a login form

Lecture 146 Creating the interfaces and methods

Lecture 147 Creating a user store

Lecture 148 Displaying errors in the form

Lecture 149 Setting the token upon login

Lecture 150 Updating the home page and nav bar

Lecture 151 Persisting the login

Lecture 152 Sending up the token with the request

Lecture 153 Adding Modals

Lecture 154 Adding the register form

Lecture 155 Handling validation errors in the register form

Lecture 156 Summary of section 13

Section 14: Entity Framework Relationships

Lecture 157 Introduction

Lecture 158 Configuring the new relationship

Lecture 159 Adding an infrastructure project

Lecture 160 Updating the create activity handler

Lecture 161 Testing the create activity

Lecture 162 Loading related data

Lecture 163 Shaping the related data

Lecture 164 Configuring AutoMapper profiles

Lecture 165 Adding the attendance handler

Lecture 166 Adding a custom auth policy

Lecture 167 Resolving the bug with with the edit handler

Lecture 168 Updating the seed data

Lecture 169 Summary of section 14

Section 15: Feature - Client side attendance

Lecture 170 Introduction

Lecture 171 Adding the attendees component

Lecture 172 Updating the details component

Lecture 173 Conditionally rendering the buttons

Lecture 174 Adding the store methods to attend

Lecture 175 Updating the create and edit methods

Lecture 176 Adding a cancel activity method

Lecture 177 Adding a popover for attendees

Lecture 178 Summary of section 15

Section 16: API Image upload

Lecture 179 Introduction

Lecture 180 Adding Cloudinary

Lecture 181 Adding the Cloudinary interfaces

Lecture 182 Adding the add photo logic

Lecture 183 Adding the Photo entity

Lecture 184 Adding the Add photo handler

Lecture 185 Adding a photos controller

Lecture 186 Deleting photos

Lecture 187 Setting the main photo

Lecture 188 Returning user profiles

Lecture 189 Updating the mapping configuration

Lecture 190 Returning an attendee DTO

Lecture 191 Summary of section 16

Section 17: Client image upload

Lecture 192 Introduction

Lecture 193 Creating a profile page

Lecture 194 Adding a profile header

Lecture 195 Adding the profile content

Lecture 196 Getting the profile data

Lecture 197 Getting the profile data part 2

Lecture 198 Displaying the photos

Lecture 199 Conditionally rendering the photo widget

Lecture 200 Creating a photo upload widget

Lecture 201 Adding a Dropzone

Lecture 202 Styling the Dropzone

Lecture 203 Adding a react cropper

Lecture 204 Adding the photo upload method

Lecture 205 Setting the main photo

Lecture 206 Deleting photos

Lecture 207 Summary of section 17

Section 18: Challenge

Lecture 208 Challenge introduction

Section 19: SignalR

Lecture 209 Introduction

Lecture 210 Setting up the comment entity

Lecture 211 Adding a comment DTO and mapping

Lecture 212 Adding the create handler

Lecture 213 Adding a list handler

Lecture 214 Adding a SignalR Hub

Lecture 215 Authenticating to SignalR

Lecture 216 Adding SignalR to the client

Lecture 217 Connecting to the hub

Lecture 218 Sending comments

Lecture 219 Adding validation and fix issues

Lecture 220 Resolving UTC dates

Lecture 221 Summary of section 19

Section 20: Followers / Following feature

Lecture 222 Introduction

Lecture 223 Adding a join entity

Lecture 224 Adding a handler for following

Lecture 225 Adding the controller

Lecture 226 Update the profile class

Lecture 227 Return a list of followers

Lecture 228 Adding the following property to the mapping configuration

Lecture 229 Updating the other handlers with the following property

Lecture 230 Adding the UI for followers

Lecture 231 Adding methods to follow and unfollow

Lecture 232 Making the follow button a component

Lecture 233 Getting a list of followings

Lecture 234 Using MobX Reactions

Lecture 235 Summary of section 20

Section 21: Paging, Sorting and Filtering

Lecture 236 Introduction

Lecture 237 Adding a PagedList class

Lecture 238 Adding application layer pagination logic

Lecture 239 Adding a pagination header

Lecture 240 Adding client side pagination

Lecture 241 Adding pagination parameters

Lecture 242 Adding vertical paging

Lecture 243 Adding infinite scrolling

Lecture 244 Adding filtering in the API

Lecture 245 Client side filtering

Lecture 246 Updating the filter component

Lecture 247 Adding placeholders

Lecture 248 Adding a user profile activities component + challenge

Lecture 249 Challenge solution

Lecture 250 Summary of section 21

Section 22: Finishing touches and publishing

Lecture 251 Introduction

Lecture 252 Adding Scroll to top for our routes

Lecture 253 Adding private routes

Lecture 254 Prepping the client app for production

Lecture 255 Building the production build of the react app

Lecture 256 Running the client app on the dotnet Kestrel server

Lecture 257 Adding PostGresQL

Lecture 258 Switching to PostGresQL

Lecture 259 Deployment to flyio - Dockerise the app

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

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

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

Lecture 263 Deployment to flyio - creating a github action

Lecture 264 Deployment to flyio - Automatic deployment with github actions

Lecture 265 Heroku no longer providing a free service

Lecture 266 Setting up Heroku

Lecture 267 Deploying the app to Heroku

Lecture 268 Security tightening

Lecture 269 Content security policies

Lecture 270 End of course summary

Section 23: Bonus section - Identity Cookbook

Lecture 271 Introduction

Lecture 272 Setting up Facebook login

Lecture 273 Connecting Heroku to GitHub

Lecture 274 Adding the Facebook JS SDK

Lecture 275 Configuring the API endpoint

Lecture 276 Debugging the Facebook info

Lecture 277 Facebook login finishing touches

Lecture 278 Redeploying the app to Heroku

Lecture 279 Introduction to Refresh Tokens

Lecture 280 Adding the Refresh token domain entity

Lecture 281 Updating the JWT token parameters

Lecture 282 Updating the account controller

Lecture 283 Testing in Postman

Lecture 284 Client side configuration

Lecture 285 Testing the refresh token in the client

Lecture 286 Redeploying the app to Heroku

Lecture 287 Introduction to Email verification

Lecture 288 Setting up SendGrid

Lecture 289 Require a confirmed email to sign in

Lecture 290 Updating the register method

Lecture 291 Adding the confirm email endpoint

Lecture 292 Testing in Postman

Lecture 293 Setting up the client for email confirmation

Lecture 294 Adding a verify email component

Lecture 295 Finishing up and testing

Lecture 296 Redeploying the app to Heroku

Section 24: Updating to .Net 6

Lecture 297 Updating the project to use .Net 6

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

Lecture 299 Updating the client packages

Section 25: Legacy content

Lecture 300 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