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

33h 23m 53s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 263 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1.1. Introduction to the course

All Course Lessons (263)

#Lesson TitleDurationAccess
1
1.1. Introduction to the course Demo
06:25
2
1.2. Setting up the developer environment
05:52
3
1.3. Adding VS Code extensions
06:27
4
1.4. Course assets and source code
05:48
5
2.1. Introduction
08:06
6
2.2. Creating the .Net projects
08:16
7
2.3. Reviewing whats in the projects
11:03
8
2.4. Creating a domain entity
08:02
9
2.5. Creating the Entity Framework DbContext class
10:46
10
2.6. Creating an Entity Framework migration
12:13
11
2.7. Seeding data into the Database
13:01
12
2.8. Creating an API Controller
13:26
13
2.9. Using Postman to test the API Endpoints
06:28
14
2.10. Saving our code into source control
09:01
15
2.11. Summary of section 2
07:27
16
3.1. Introduction
03:46
17
3.2. Creating the React project
04:44
18
3.3. Reviewing the React project files
08:51
19
3.4. Fetching data from the API
08:36
20
3.5. Configuring CORS on the API
06:48
21
3.6. Creating an Activity type in TypeScript
07:45
22
3.7. Using the React developer tools
03:07
23
3.8. Adding Material UI
10:33
24
3.9. Adding HTTPS support to the client app
05:46
25
3.10. Adding Axios for data fetching
06:05
26
3.11. Summary of section 3
02:33
27
4.1. Introduction
04:38
28
4.2. Clean architecture concepts
09:13
29
4.3. CQRS concepts
04:01
30
4.4. Adding a Mediator handler for a List
11:25
31
4.5. Adding a Mediator handler for the Details
07:01
32
4.6. Making the API Controllers thinner
05:41
33
4.7. Adding a Mediator handler for Creating an Activity
08:30
34
4.8. Adding a Mediator handler for Editing an Activity
07:49
35
4.9. Adding AutoMapper to the project
06:02
36
4.10. Adding a Mediator Delete handler
04:35
37
4.11. Using Cancellation Tokens
08:19
38
4.12. Using the .Net Debugger
10:41
39
4.13. Summary of section 4
03:07
40
5.1. Introduction
03:13
41
5.2. Folder structure in React
06:26
42
5.3. Creating a Nav bar
06:47
43
5.4. Styling the Nav bar
10:15
44
5.5. Adding a dashboard component
07:56
45
5.6. Creating a card for the activities
10:12
46
5.7. Creating an activity details view
07:36
47
5.8. Selecting an individual activity to view
11:01
48
5.9. Creating an Activity form component
05:57
49
5.10. Using the useState hook
09:38
50
5.11. Form basics in React
11:54
51
5.12. Form submission in React
10:40
52
5.13. Deleting an activity
06:37
53
5.14. Summary of section 5
02:38
54
6.1. Introduction
09:17
55
6.2. Setting up React Query
08:48
56
6.3. React Query developer tools
03:23
57
6.4. Creating a custom hook
04:41
58
6.5. Creating a base Axios instance
07:02
59
6.6. Updating an activity with a React query mutation
10:51
60
6.7. Setting the selected activity from React query
07:16
61
6.8. Creating an activity with a React query mutation
03:47
62
6.9. Deleting an activity
04:49
63
6.10. Summary of section 6
01:16
64
7.1. Introduction
05:01
65
7.2. Setting up React Router
04:28
66
7.3. Adding routes
12:01
67
7.4. Adding navigation links
10:44
68
7.5. Routing to activity details
06:32
69
7.6. Fetching an individual activity from the API
07:57
70
7.7. Adding a route to edit an activity
06:32
71
7.8. Using keys in the routes
04:49
72
7.9. Summary of section 7
00:59
73
8.1. Introduction
02:30
74
8.2. Styling the Activity Card
13:00
75
8.3. Stying the Activity Details component
05:55
76
8.4. Adding the content for the Activity details
10:15
77
8.5. Adding a filters component
11:03
78
8.6. Adding a home page
06:57
79
8.7. Formatting the dates
09:30
80
8.8. Summary of section 8
01:28
81
9.1. Introduction
03:00
82
9.2. What is MobX
08:29
83
9.3. Setting up MobX
08:03
84
9.4. Using MobX
04:22
85
9.5. MobX Actions
06:15
86
9.6. Using an alternative approach with MobX
03:57
87
9.7. Computed properties
05:40
88
9.8. Adding loading state
07:05
89
9.9. React query fetching
05:29
90
9.10. Summary of section 9
03:00
91
10.1. Introduction
08:07
92
10.2. Validation with Data annotations
09:34
93
10.3. Validating with Fluent Validation
09:20
94
10.4. Adding Validation middleware
07:15
95
10.5. Adding exception handling middleware
14:03
96
10.6. Handling API error responses part 1
06:28
97
10.7. Handling API error responses part 2
06:08
98
10.8. Handling API error responses part 3
09:42
99
10.9. Handling exceptions
08:25
100
10.10. Validation revisited
05:18
101
10.11. Validation revisited part 2
10:38
102
10.12. Setting up the client for error handling
08:41
103
10.13. Using an Axios interceptor to handle errors
09:24
104
10.14. Adding a not found component
04:09
105
10.15. Handling Bad Requests
06:10
106
10.16. Handling server errors
07:49
107
10.17. Summary of section 10
02:40
108
11.1. Introduction
03:18
109
11.2. Setting up React hook form
12:07
110
11.3. Validating the inputs
07:52
111
11.4. Validating the inputs part 2
05:33
112
11.5. Creating a reusable Text Input
12:27
113
11.6. Creating a reusable Select Input
10:06
114
11.7. Creating a reusable Date input
14:35
115
11.8. Creating a reusable Place autocomplete input part 1
09:25
116
11.9. Creating a reusable Place autocomplete input part 2
08:43
117
11.10. Creating a reusable Place autocomplete input part 3
17:34
118
11.11. Form submission
07:43
119
11.12. Adding the map view
12:12
120
11.13. Summary of section 11
02:04
121
12.1. Introduction
06:50
122
12.2. Adding the user entity
07:58
123
12.3. Configuring Identity
05:49
124
12.4. Seeding users into the Database
05:36
125
12.5. Testing the Login endpoint
06:50
126
12.6. Creating an auth policy
03:24
127
12.7. Registering new users
09:40
128
12.8. Getting the current user info
07:40
129
12.9. Summary of section 12
03:15
130
13.1. Introduction
02:06
131
13.2. Creating a Login form
11:09
132
13.3. Authenticating with the Cookie
10:01
133
13.4. Creating a user menu
13:24
134
13.5. Conditionally making queries
06:13
135
13.6. Private routes
09:31
136
13.7. Adding a register form
11:51
137
13.8. Handling API validation errors
08:09
138
13.9. Summary of section 13
01:27
139
14.1. Introduction
09:20
140
14.2. Configuring the relationship
12:39
141
14.3. Creating the Infrastructure Project
10:07
142
14.4. Updating the Create Activity
10:08
143
14.5. Loading related data
07:25
144
14.6. Shaping the data
11:26
145
14.7. Using projection
06:55
146
14.8. Adding the Attendance function
12:23
147
14.9. Adding a custom auth policy
15:57
148
14.10. Resolving the edit bug
10:10
149
14.11. Updating the seed data
04:19
150
14.12. Summary of section 14
02:26
151
15.1. Introduction
02:12
152
15.2. Updating the types and queries
04:57
153
15.3. Updating the Activity card
04:32
154
15.4. Creating a profile card
06:34
155
15.5. Creating a popover
05:37
156
15.6. Updating the details component
10:12
157
15.7. Adding the attendance query
09:44
158
15.8. Button improvements
08:06
159
15.9. Optimistic updating
13:57
160
15.10. Summary of section 15
01:12
161
16.1. Introduction
05:53
162
16.2. Adding cloudinary
09:32
163
16.3. Adding the image service
04:32
164
16.4. Implementing the image service logic
09:13
165
16.5. Creating a photo entity
07:42
166
16.6. Creating the add photo handler
05:45
167
16.7. Creating a profiles controller
07:36
168
16.8. Getting a list of photos
06:11
169
16.9. Deleting photos
10:41
170
16.10. Setting the main photo
07:45
171
16.11. Getting the user profile
06:56
172
16.12. Summary of section 16
02:13
173
17.1. Introduction
02:32
174
17.2. Creating a Profile page
08:33
175
17.3. Creating a profile header
06:16
176
17.4. Creating the profile content
07:07
177
17.5. Getting the profile data
05:14
178
17.6. Displaying the images
14:15
179
17.7. Conditionally rendering the photo upload widget
06:13
180
17.8. Adding a photo upload widget
03:08
181
17.9. Adding React Dropzone
06:07
182
17.10. Adding React Cropper
10:23
183
17.11. Uploading the image
13:29
184
17.12. Setting the main image
12:12
185
17.13. Deleting an image
08:30
186
17.14. Adding an about page
12:57
187
17.15. Summary of section 17
00:54
188
18.1. Introduction to challenge
03:27
189
19.1. Introduction
06:57
190
19.2. Setting up the comment entity
05:24
191
19.3. Creating the CommentDTO and mapping
03:35
192
19.4. Creating an add comment handler
06:57
193
19.5. Creating a list handler for the comments
02:59
194
19.6. Creating a SignalR Hub
09:32
195
19.7. Client SignalR setup part 1
14:16
196
19.8. Client SignalR setup part 2
09:57
197
19.9. Configuring the chat component
03:41
198
19.10. Sending comments
11:37
199
19.11. Converting dates to use UTC
05:40
200
19.12. Summary of section 19
03:35
201
20.1. Introduction
03:09
202
20.2. Adding the join entity
07:23
203
20.3. Creating a follow toggle handler
07:01
204
20.4. Getting a list of followings
06:39
205
20.5. Updating the profile class and mapping profiles
13:24
206
20.6. Configuring the UI for followings
05:14
207
20.7. Adding the follow toggle method
07:32
208
20.8. Adding a followers component
15:13
209
20.9. Summary of section 20
01:31
210
21.1. Introduction
05:56
211
21.2. Setting up cursor pagination part 1
10:53
212
21.3. Setting up cursor pagination part 2
04:43
213
21.4. Setting up client pagination part 1
08:22
214
21.5. Setting up client pagination part 2
04:11
215
21.6. Improving the UI
08:08
216
21.7. Adding infinite scrolling
06:29
217
21.8. Setting up filtering in the API
12:17
218
21.9. Client side filtering
04:11
219
21.10. Updating the filters
07:52
220
21.11. Challenge
04:50
221
21.12. Challenge solution
07:01
222
21.13. Summary of section 21
01:28
223
22.1. Introduction
03:27
224
22.2. Preparing the client app for publishing
12:53
225
22.3. Serving the client app from the .Net Kestrel server
08:10
226
22.4. Creating a Sql Server DB
12:36
227
22.5. Connecting to the Sql Server
03:23
228
22.6. Configuring the app to use Sql Server
13:46
229
22.7. Setting up Azure
11:01
230
22.8. Creating an Azure Sql DB
06:35
231
22.9. Deploying the app to Azure
13:50
232
22.10. Continuous deployment part 1
09:49
233
22.11. Continuous deployment part 2
10:53
234
22.12. Final checks and config settings
09:49
235
22.13. End of course summary
03:29
236
23.1. Introduction to the identity cookbook
03:22
237
23.2. Creating a resend account
07:18
238
23.3. Require email confirmation in identity
04:52
239
23.4. Creating an email service
08:02
240
23.5. Updating the account controller
09:10
241
23.6. Testing the confirm email functionality
08:53
242
23.7. Setting up the client
11:07
243
23.8. Adding the verify email component
12:25
244
23.9. Updating the login form
10:42
245
23.10. Adding a resend email component
10:17
246
23.11. Deploying the email confirmation feature to Azure
12:40
247
23.12. Introduction to the password reset feature
01:05
248
23.13. Creating a password change function for logged in users
09:11
249
23.14. Adding the forgot password feature on the API
07:22
250
23.15. Creating a form wrapper for our authentication forms
13:54
251
23.16. Creating a change password form
12:58
252
23.17. Creating a forgot password form
11:16
253
23.18. Creating a reset password form
09:30
254
23.19. Deploying the password reset feature to Azure
04:44
255
23.20. Introduction to Social login
02:29
256
23.21. Setting up GitHub and getting the keys
06:05
257
23.22. Setting up the client methods
06:40
258
23.23. Adding the auth callback component
08:32
259
23.24. Adding the social login API endpoint part 1
13:06
260
23.25. Adding the social login API endpoint part 2
05:14
261
23.26. Adding the social login API endpoint part 3
06:42
262
23.27. Adding the social login API endpoint part 4
07:46
263
23.28. Deploying the social login feature to Azure
08:18

Unlock unlimited learning

Get instant access to all 262 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

.NET Logging Done Right: An Opinionated Approach Using Serilog

.NET Logging Done Right: An Opinionated Approach Using Serilog

Sources: pluralsight
Establishing a foundational framework for logging can save hours in troubleshooting and provide valuable insights to both utilization and performance within all of your applicat...
5 hours 2 minutes 40 seconds
Scale React Development with Nx

Scale React Development with Nx

Sources: egghead
On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to
1 hour 34 minutes 10 seconds
Unlock The Power Of Microservices In The Azure Cloud

Unlock The Power Of Microservices In The Azure Cloud

Sources: Julio Casal
Deploy your .NET microservices to Kubernetes in the Microsoft Azure cloud, so you can handle production demands, minimize operational issues and save a lot of money on infrastru...
9 hours 5 minutes 43 seconds
React Js A-Z With Laravel - For Beginner to Advanced Level

React Js A-Z With Laravel - For Beginner to Advanced Level

Sources: udemy
This React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W
68 hours 1 minute 33 seconds
React Simplified - Advanced

React Simplified - Advanced

Sources: webdevsimplified.com
Once you become a good React developer, it is time to start diving into advanced React concepts. This course will take you from a junior to a mid-level React d
11 hours 34 minutes 10 seconds