Complete guide to building an app with .Net Core and React

32h 10m 45s
English
Paid
April 4, 2024

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.

More

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 environment

  • Creating 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 pattern

  • Setting up and configuring ASP.NET Core identity for authentication

  • Using React with Typescript

  • Adding a Client side login and register function to our React application

  • Using React Router

  • Using AutoMapper in ASP.NET Core

  • Building a great looking UI using Semantic UI

  • Adding Photo Upload widget and creating user profile pages

  • Using React Final Form to create re-usable form inputs with validation

  • Paging, Sorting and Filtering

  • Using SignalR to enable real time web communication to a chat feature in our app

  • Publishing the application to both IIS and Linux

  • Getting an ‘A’ rating for security from a well known security scanning site.

  • Many more things as well

Tools you need for this course

In 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 Mac

Is 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.

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
Who this course is for:
  • 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

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

Watch Online Complete guide to building an app with .Net Core and React

Join premium to watch
Go to premium
# Title Duration
1 Course introduction 06:45
2 Setting up the developer environment 05:38
3 VS Code extensions 06:00
4 Source code and Resources used on this course 01:58
5 Introduction 07:52
6 Creating the .Net projects and references 09:42
7 Changes to the .Net 6 hosting model 10:17
8 Reviewing the project files and startup 11:55
9 The API controller and using postman 06:07
10 Creating a domain entity 04:42
11 Adding an Entity Framework Db Context 13:42
12 Creating an Entity Framework code first migration 07:39
13 Creating the database 08:09
14 Seeding data to the Database 07:15
15 Adding an API controller 10:17
16 Saving changes into source control 07:35
17 Summary of Section 2 07:27
18 Introduction 03:31
19 Creating the React project 07:08
20 Reviewing the React project files 10:06
21 Why React? 02:47
22 React Components 07:34
23 Typescript concepts 07:10
24 Typescript demo 11:13
25 Using Typescript with React 11:04
26 React dev tools 03:36
27 Fetching data from the API 10:11
28 CORS Policy 05:00
29 Semantic UI React 13:21
30 Summary of section 3 04:49
31 Introduction 04:13
32 Clean Architecture 09:34
33 CQRS 04:01
34 Creating our first Query handler 09:41
35 Thin controllers in the API 03:48
36 Adding a Details handler 03:49
37 Adding a Create handler 09:12
38 Adding an Edit handler 06:53
39 Adding AutoMapper 06:23
40 Adding a Delete handler 06:13
41 Startup class housekeeping 05:35
42 Cancellation tokens 07:47
43 Using the debugger in VS Code 08:07
44 Summary of section 4 03:07
45 Introduction 02:44
46 Folder structure in React 05:35
47 Adding an Activity interface 06:42
48 Adding a Nav bar 04:38
49 Adding some style to the nav bar 08:05
50 Creating an activity dashboard 06:21
51 Creating an activity list 06:20
52 Creating a details view 09:06
53 Creating an Activity form 03:20
54 Selecting an activity to view 12:05
55 Displaying the create/edit form 09:33
56 Editing an activity and form basics in React 10:32
57 Handle create and edit submission 05:54
58 Using a GUID for the activity id 05:32
59 Deleting an activity 03:49
60 Summary of section 5 02:42
61 Introduction 02:29
62 Setting up axios 06:14
63 Axios types 07:02
64 Adding loading indicators 07:24
65 Posting data to the server 08:18
66 Deleting activity on the server 06:32
67 Summary of section 6 01:58
68 Introduction 02:24
69 What is MobX? 09:49
70 Setting up MobX 07:56
71 MobX actions 05:03
72 Refactoring the app to use MobX 07:53
73 MobX strict mode 04:49
74 Selecting an Activity using MobX 13:24
75 Creating an Activity using MobX 10:04
76 Deleting an activity using MobX 07:32
77 Using a Javascript map object to store the activities 08:54
78 Summary of section 7 03:05
79 Introduction 05:18
80 Installing React Router 04:24
81 Adding routes 06:06
82 Adding nav links 03:14
83 Adding a details link 03:37
84 Getting an individual activity 07:55
85 Using route parameters 07:39
86 Adding the edit activity route 10:37
87 Adding a key to the route 06:44
88 Redirect after submission 06:04
89 Moving the home page outside of nav 03:35
90 Cleaning up unused code 05:50
91 Summary of section 8 00:59
92 Introduction 02:41
93 Styling the activity list 05:18
94 Grouping the activities by date 08:14
95 Styling the list items 06:16
96 Activity details page 04:39
97 Populating the detailed components 06:36
98 Adding the activity filter component 07:41
99 Styling the home page 05:52
100 Summary of section 9 01:45
101 Introduction 07:20
102 Validation with data annotations 04:51
103 Fluent Validation 08:38
104 Handling API Error responses 06:11
105 Handling API Error responses part 2 08:59
106 Handling API Error responses part 3 05:17
107 Handling API Error responses part 4 07:25
108 Handling exceptions 12:44
109 Preparing for setting up error handling in the client app 07:43
110 Using an interceptor to handle API error responses 04:05
111 Adding a not found component 07:31
112 Handling 400 errors 08:03
113 Handling 500 errors on the client 08:34
114 Handling the validation error from an invalid GUID 06:46
115 Summary of section 10 04:07
116 Introduction 03:32
117 Setting up Formik 09:25
118 Formik with less code 04:29
119 Validation in Formik 05:55
120 Creating a reusable text input 09:42
121 Creating a reusable text area 01:40
122 Creating a reusable select input 06:57
123 Creating a reusable date input 09:42
124 The date strategy 06:22
125 Using Date-FNS 06:25
126 Hooking up the form submission to Formik 05:43
127 Summary of section 11 02:44
128 Introduction 08:54
129 Adding a user entity 05:21
130 Adding an IdentityDbContext 03:15
131 Configuring Identity in the Startup class 04:53
132 Adding seed users 06:22
133 Creating the user DTOs 04:22
134 Adding an account controller 08:39
135 JSON Web Tokens 07:23
136 Creating a token service 10:29
137 Authenticating to the app 07:20
138 Storing secrets in development 05:58
139 Creating an auth policy 02:54
140 Registering new users 04:34
141 Validating the registration of users 04:01
142 Getting the current user 04:55
143 Summary of section 12 04:18
144 Introduction 02:40
145 Creating a login form 06:13
146 Creating the interfaces and methods 03:40
147 Creating a user store 04:50
148 Displaying errors in the form 03:27
149 Setting the token upon login 04:29
150 Updating the home page and nav bar 08:10
151 Persisting the login 06:46
152 Sending up the token with the request 03:11
153 Adding Modals 08:43
154 Adding the register form 06:32
155 Handling validation errors in the register form 08:28
156 Summary of section 13 03:54
157 Introduction 09:05
158 Configuring the new relationship 09:32
159 Adding an infrastructure project 07:25
160 Updating the create activity handler 02:38
161 Testing the create activity 06:58
162 Loading related data 05:05
163 Shaping the related data 06:30
164 Configuring AutoMapper profiles 10:36
165 Adding the attendance handler 14:10
166 Adding a custom auth policy 10:59
167 Resolving the bug with with the edit handler 05:49
168 Updating the seed data 03:22
169 Summary of section 14 02:26
170 Introduction 02:11
171 Adding the attendees component 07:21
172 Updating the details component 03:47
173 Conditionally rendering the buttons 10:56
174 Adding the store methods to attend 09:41
175 Updating the create and edit methods 14:05
176 Adding a cancel activity method 07:40
177 Adding a popover for attendees 05:55
178 Summary of section 15 00:51
179 Introduction 05:48
180 Adding Cloudinary 07:45
181 Adding the Cloudinary interfaces 03:33
182 Adding the add photo logic 08:06
183 Adding the Photo entity 03:34
184 Adding the Add photo handler 06:04
185 Adding a photos controller 04:21
186 Deleting photos 09:19
187 Setting the main photo 06:21
188 Returning user profiles 06:59
189 Updating the mapping configuration 05:37
190 Returning an attendee DTO 07:10
191 Summary of section 16 02:13
192 Introduction 02:29
193 Creating a profile page 04:17
194 Adding a profile header 06:13
195 Adding the profile content 03:33
196 Getting the profile data 04:54
197 Getting the profile data part 2 04:32
198 Displaying the photos 05:55
199 Conditionally rendering the photo widget 06:02
200 Creating a photo upload widget 03:32
201 Adding a Dropzone 04:15
202 Styling the Dropzone 09:28
203 Adding a react cropper 14:10
204 Adding the photo upload method 11:01
205 Setting the main photo 08:14
206 Deleting photos 06:41
207 Summary of section 17 02:12
208 Challenge introduction 03:40
209 Introduction 06:47
210 Setting up the comment entity 06:14
211 Adding a comment DTO and mapping 02:39
212 Adding the create handler 06:00
213 Adding a list handler 04:16
214 Adding a SignalR Hub 09:44
215 Authenticating to SignalR 03:28
216 Adding SignalR to the client 09:54
217 Connecting to the hub 07:36
218 Sending comments 07:11
219 Adding validation and fix issues 05:27
220 Resolving UTC dates 10:59
221 Summary of section 19 03:35
222 Introduction 03:27
223 Adding a join entity 06:37
224 Adding a handler for following 06:17
225 Adding the controller 04:01
226 Update the profile class 02:42
227 Return a list of followers 11:27
228 Adding the following property to the mapping configuration 04:17
229 Updating the other handlers with the following property 07:25
230 Adding the UI for followers 05:05
231 Adding methods to follow and unfollow 11:14
232 Making the follow button a component 08:16
233 Getting a list of followings 10:05
234 Using MobX Reactions 01:31
235 Summary of section 20 05:12
236 Introduction 08:06
237 Adding a PagedList class 07:58
238 Adding application layer pagination logic 09:21
239 Adding a pagination header 08:08
240 Adding client side pagination 05:44
241 Adding pagination parameters 06:22
242 Adding vertical paging 05:24
243 Adding infinite scrolling 05:24
244 Adding filtering in the API 07:29
245 Client side filtering 04:22
246 Updating the filter component 04:21
247 Adding placeholders 05:45
248 Adding a user profile activities component + challenge 11:27
249 Challenge solution 01:28
250 Summary of section 21 01:28
251 Introduction 02:56
252 Adding Scroll to top for our routes 03:24
253 Adding private routes 07:24
254 Prepping the client app for production 07:07
255 Building the production build of the react app 07:07
256 Running the client app on the dotnet Kestrel server 06:16
257 Adding PostGresQL 04:24
258 Switching to PostGresQL 11:38
259 Setting up Heroku 09:18
260 Deploying the app to Heroku 09:37
261 Security tightening 09:03
262 Content security policies 12:06
263 End of course summary 04:18
264 Introduction 03:37
265 Setting up Facebook login 05:37
266 Connecting Heroku to GitHub 02:08
267 Adding the Facebook JS SDK 09:40
268 Configuring the API endpoint 10:36
269 Debugging the Facebook info 11:38
270 Facebook login finishing touches 07:35
271 Redeploying the app to Heroku 11:46
272 Introduction to Refresh Tokens 03:20
273 Adding the Refresh token domain entity 06:06
274 Updating the JWT token parameters 03:15
275 Updating the account controller 08:30
276 Testing in Postman 04:40
277 Client side configuration 10:00
278 Testing the refresh token in the client 05:54
279 Redeploying the app to Heroku 02:39
280 Introduction to Email verification 02:40
281 Setting up SendGrid 09:26
282 Require a confirmed email to sign in 07:32
283 Updating the register method 07:32
284 Adding the confirm email endpoint 04:58
285 Testing in Postman 03:46
286 Setting up the client for email confirmation 09:33
287 Adding a verify email component 08:14
288 Finishing up and testing 04:33
289 Redeploying the app to Heroku 07:18
290 Updating the project to use .Net 6 16:45
291 .Net 6 new features and how to update the project to use them 20:30
292 Updating the client packages 17:50

Similar courses to Complete guide to building an app with .Net Core and React

C# Unit Testing Essentials

C# Unit Testing Essentials

Duration 2 hours 35 minutes 23 seconds
React Hooks

React Hooks

Duration 3 hours 47 minutes 48 seconds
Node with React: Fullstack Web Development

Node with React: Fullstack Web Development

Duration 25 hours 36 minutes 19 seconds
My first Remix app

My first Remix app

Duration 5 hours 44 seconds
REACT ROUTER (v6)

REACT ROUTER (v6)

Duration 3 hours 15 minutes 27 seconds
Crack the Frontend Interview with React

Crack the Frontend Interview with React

Duration 1 hour 6 minutes 53 seconds
React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Duration 25 hours 1 minute 19 seconds
From Zero to Hero: gRPC in .NET

From Zero to Hero: gRPC in .NET

Duration 3 hours 24 minutes 24 seconds
React with TypeScript

React with TypeScript

Duration 2 hours 53 seconds
React Chrome Extension boilerplate | Shipped