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

The complete guide to building an app from start to finish using ASP.NET Core, React (with Typescript) and Mobx
  • 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

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 buildmulti-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 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

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

1 Course Introduction
2 Setting up the dev environment
3 Visual Studio Code extensions
4 Source code and resources for this course

Walking Skeleton Part 1 – API
5 Section 2 introduction
6 Seeding data using Entity Framework fluent configuration
7 Using Dependancy Injection
8 Introduction to Postman
9 Saving our changes into Source control using Git
10 Section 2 summary
11 Creating the ASP.NET Core solutions and projects using the DotNet CLI
12 Creating the project references using the DotNet CLI
13 Reviewing the Project files
14 Running the application
15 Creating a Domain entity
16 Creating the DbContext and service
17 Adding our first Entity Framework code first migration
18 Creating the database

Walking Skeleton Part 2 – Client
19 Section 3 introduction
20 React Class Components
21 Using React State
22 Fetching data from the API
23 Adding CORS support to the API
24 Adding Semantic UI to our app
25 Clean up and saving our code to source control
26 Summary of section 3
27 Using create-react-app to create our React application
28 Reviewing the React project files
29 Introduction to React – Concepts
30 Introduction to React – Components
31 Introduction to Typescript
32 Typescript basics demo
33 Using Typescript with React
34 Adding React dev tools

Building a CRUD application in .Net Core using the CQRS + Mediator pattern
35 Section 4 introduction
36 Adding the Create handler
37 Dealing with boilerplate code in our handlers
38 Adding an Edit handler
39 Adding a Delete handler
40 Summary of section 4
41 Adding the Activity entity
42 Seeding Activity data
43 Commands and Queries – CQRS
44 Introduction to MediatR
45 Creating our first Query handler
46 Creating the Activities API Controller
47 Adding the Details Handler
48 Cancellation Tokens

Building a CRUD application in React
49 Section 5 introduction
50 Creating the Activity List
51 Adding the Activity Details component
52 Adding the Activity Form component
53 Selecting an individual Activity
54 Adding an edit mode to display the form
55 Adding a create activity mode
56 Initialising the form with data
57 Controlled components in React
58 Handling form submission
59 Fixing issues with the dates in the form
60 Introduction to React Hooks
61 Adding the delete functionality
62 Summary of section 5
63 Folder structure in React
64 Getting a list of activities from the API
65 Adding an Activity interface in Typescript
66 Refactoring our class component to use React Hooks
67 Adding the Navigation bar
68 Styling React components
69 Adding the Activity Dashboard

70 Section 6 introduction
71 Setting up the agent.ts file
72 Listing our activities
73 Updating an Activity
74 Adding a delay to our API methods
75 Adding a loading component
76 Adding a loading indicator for submitting data
77 Isolating the loading indicator on the delete button
78 Summary of section 6

79 Section 7 introduction
80 Adding the edit activity action
81 Adding the delete activity action
82 Cleaning up our code
83 Enabling MobX strict mode
84 Adding MobX dev tools
85 Summary of section 7
86 Introduction to MobX
87 Setting up a MobX store
88 Refactoring the activity list to use the store
89 Refactoring the select activity function
90 Using Async Await in our methods
91 Refactoring the create activity method
92 MobX computed properties
93 Using an Observable Map

React Router
94 Section 8 introduction
95 Using a Fully Uncontrolled Component with a key to reset component state
96 Navigating after submission
97 Moving the home page outside of our navigation routes
98 Scrolling to the top of the page on navigation
99 More code clean up
100 Summary of section 8
101 Setting up React Router
102 Setting up our Routes
103 Adding Links and NavLinks
104 Adding the Details link
105 Getting an Activity from the API
106 Using Route params
107 Navigating via code
108 Routing to the edit form

Adding some style
109 Section 9 introduction
110 Styling the Home page
111 Section 9 summary
112 Styling the activity list
113 Grouping activities by date
114 Styling the activity list items
115 Creating the Activity Details page
116 Styling the Activity Detailed Page Header
117 Styling the Activity Detailed Info
118 Styling the Activity Detailed Chat and Sidebar components
119 Styling the Activity Form

Error handling and validation
120 Section 10 introduction
121 Using Axios interceptors to catch errors
122 Throwing errors in the client
123 Adding routing functionality to Axios
124 Handling an invalid GUID on a get request
125 Adding toast notifications
126 Handling network errors in Axios
127 Summary of section 10
128 Introduction to validation in the API
129 Adding validation in the API using Data Annotations
130 Adding validation in the API using Fluent Validation
131 Error handling concepts in our application
132 Error handling strategy
133 Creating a derived Exception class for Rest exceptions
134 Adding Error handling middleware
135 Using our Error handling middleware

136 Section 11 introduction
137 Creating separate Date and Time fields
138 Combining Date and Time inputs
139 Initialising the form with data
140 Submitting data to the server
141 Form error handling
142 Form validation
143 Summary of section 11
144 Setting up React Final Form
145 Creating a reusable Text input field
146 Refactoring the form to use React Final Form
147 Creating a reusable Text Area Input field
148 Creating a reusable Select input field
149 Setting up React Widgets
150 Creating a reusable Date Input field
151 Formatting the dates using Date-FNS

ASP.NET Core Identity
152 Section 12 introduction
153 JSON Web Tokens introduction
154 Adding the Infrastructure project
155 Adding the JWT Generator interface and class
156 Generating a JWT Token
157 Returning the JWT Token on successful login
158 Securing our app with Authorization
159 Dotnet user secrets
160 Adding an authorisation policy
161 Adding a Register Handler
162 Testing user registration
163 Introduction to ASP.NET Core Identity
164 Adding a Fluent Validator extension for password validation
165 Retrieving the Username from the token in the Http Context
166 Getting the currently logged in user
167 Summary of section 12
168 Adding the Identity User Entity
169 Configuring Identity in our startup class
170 Seeding users to the database
171 Adding a Login Handler
172 Adding a Base API controller
173 Adding a User API controller
174 Adding a User object

Client side login and register
175 Section 13 introduction
176 Using Axios request interceptor to automatically send the JWT token
177 Persisting login on refresh
178 Adding Modals to our application
179 Adding better error messages to our form
180 Adding a Register form
181 Displaying server validation errors in our form
182 Summary of section 13
183 Creating the Typescript interfaces and Axios methods
184 Creating a Mobx user store
185 Creating a MobX root store
186 Creating the Login form
187 Hooking up the Login form to the API
188 Dealing with submission errors
189 Adding home page and NavBar user information
190 Creating a MobX common store

Entity Framework Core Relationships
191 Section 14 introduction
192 Using Lazy Loading to load related data
193 Adding the Join activity feature
194 Adding the remove attendance feature
195 Creating a custom Auth policy
196 Updating our Seed data
197 Section 14 summary
198 Adding a class to join our Users and Activities
199 Updating the Create Activity handler
200 Testing in Postman
201 Loading related data using Eager loading
202 Adding DTOs to shape our data
203 Adding AutoMapper
204 Adding AutoMapper profiles
205 Configuring AutoMapper mappings

Adding Client side attendances
206 Section 15 introduction
207 Adding attendees to our list items
208 Adding attendees to the Detailed view sidebar
209 Adding the IsGoing and IsHost properties to the Activity interface
210 Conditionally rendering the activity detailed header buttons
211 Adding the cancel attendance function
212 Hooking it all up to the API
213 Loose ends
214 Summary of section 15

Photo Upload Part 1 – API
215 Section 16 introduction
216 Adding the set main photo functionality
217 Adding the Mapping Profile configuration for User images
218 Summary of section 16
219 Cloudinary settings
220 Adding the interface and class for our Photo Accessor
221 Adding the AddPhoto handler
222 Adding the Domain Entity
223 Adding the Add Photo Handler
224 Adding the Photo API Controller
225 Adding User Profiles feature
226 Adding the Delete photo handler

Photo Upload Part 2 – Client
227 Section 17 introduction
228 Styling our Dropzone
229 React Cropper Part 1
230 React Cropper Part 2
231 Adding the Photo Upload methods to the store
232 Adding the photo upload functionality to the Profile component
233 Adding the set main photo functionality
234 Isolating our loading indicators
235 Adding Delete photo functionality
236 Summary of section 17
237 Adding links and a profile page component
238 Adding the Profile Header component
239 Adding the Profile content component
240 Getting the profile data from the API
241 Displaying User images on the profile page
242 Conditionally rendering the Photo Upload Widget
243 Creating a Photo Upload Widget
244 React Dropzone

245 Challenge Introduction
246 Challenge Solution

247 Section 19 Introduction
248 Formatting Dates in words using Date-FNS
249 Section 19 summary
250 Adding the Comment entity
251 Adding the Comment DTO and mapping
252 Adding the Create comment handler
253 Adding a SignalR hub
254 Configuring Auth for SignalR
255 Adding the SignalR hub connection to the client
256 Connecting to the SignalR hub from our client
257 Adding the Comment functionality to the client

FollowingFollower feature
258 Section 20 introduction
259 Adding the Follow Unfollow methods
260 Adding the Follow Unfollow UI components
261 Getting a list of followings from the API
262 Using MobX reactions to get followers or followings on tab change
263 Section 20 summary
264 Adding the UserFollower Entity
265 Adding the Add Follower handler
266 Adding the Delete Following handler
267 Adding a Following API Controller
268 Adding a Profile reader helper class and interface
269 Getting a List of Followings for a user
270 Adding a Custom value resolver for AutoMapper
271 Adding the UI components to show followed users

Paging, Sorting and Filtering
272 Section 21 introduction
273 Adding User Activities filter in the API
274 Adding User Activities filter in the client
275 Summary of section 21
276 Paging our Activity list
277 Refactoring the Activity store list method for paging
278 Adding vertical paging to our activity dashboard
279 Adding infinite scrolling to our activity dashboard
280 Updating the dashboard with Filter component
281 Filtering our Activity List in the API
282 Adding the Filtering methods in the client
283 Updating the Activity Filters UI to allow filtering

Final touches and publishing
284 Section 22 introduction
285 Adding MySQL and configuring a user
286 Adding additional DB providers for Entity Framework
287 Swapping the DB for MySQL
288 Publishing the app to Linux – Part 1
289 Publishing the app to Linux – Part 2
290 Configuring Apache to use an HTTPS SSL certificate
291 Adding Security headers to our API
292 Adding Content Security Policy to our API
293 Getting an A rating from a SecurityHeaders site scan
294 Setting up Azure for publishing our app
295 Swapping our loading indicator for Placeholders
296 Publishing our App to Azure
297 Tweaking the Azure deployment
298 End of course summary
299 Adding a loading indicator to index.html
300 Adding private routes on the client
301 Adding logout for token expiry
302 Safari bug fix
303 Preparing the client application for publishing
304 Building a production version of the React app
305 Serving the production React app from the API server


Download Paid Udemy Courses For Free.


About freetutorial

Check Also

Data Science Bootcamp With 5 Data Science Projects

Data Science and Machine Learning Masterclass with Python with 5 Data Science Real World Projects …

Leave a Reply

Your email address will not be published. Required fields are marked *