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
Course Curriculum
1. Introduction | |||
1. Course Introduction | 00:00:00 | ||
2. Setting up the dev environment | 00:00:00 | ||
3. Visual Studio Code extensions | 00:00:00 | ||
4. Source code and resources for this course | 00:00:00 | ||
2. Walking Skeleton Part 1-API | |||
1. Section 2 introduction | 00:00:00 | ||
2. Creating the ASP.NET Core solutions and projects using the DotNet CLI | 00:00:00 | ||
3. Creating the project references using the DotNet CLI | 00:00:00 | ||
4. Reviewing the Project files | 00:00:00 | ||
5. Running the application | 00:00:00 | ||
6. Creating a Domain entity | 00:00:00 | ||
7. Creating the DbContext and service | 00:00:00 | ||
8. Adding our first Entity Framework code first migration | 00:00:00 | ||
9. Creating the database | 00:00:00 | ||
10. Seeding data using Entity Framework fluent configuration | 00:00:00 | ||
11. Using Dependancy Injection | 00:00:00 | ||
12. Introduction to Postman | 00:00:00 | ||
13. Saving our changes into Source control using Git | 00:00:00 | ||
14. Section 2 summary | 00:00:00 | ||
3. Walking Skeleton Part 2-Client | |||
1. Section 3 introduction | 00:00:00 | ||
2. Using create-react-app to create our React application | 00:00:00 | ||
3. Reviewing the React project files | 00:00:00 | ||
4. Introduction to React – Concepts | 00:00:00 | ||
5. Introduction to React – Components | 00:00:00 | ||
6. Introduction to Typescript | 00:00:00 | ||
7. Typescript basics demo | 00:00:00 | ||
8. Using Typescript with React | 00:00:00 | ||
9. Adding React dev tools | 00:00:00 | ||
10. React Class Components | 00:00:00 | ||
11. Using React State | 00:00:00 | ||
12. Fetching data from the API | 00:00:00 | ||
13. Adding CORS support to the API | 00:00:00 | ||
14. Adding Semantic UI to our app | 00:00:00 | ||
15. Clean up and saving our code to source control | 00:00:00 | ||
16. Summary of section 3 | 00:00:00 | ||
4. Building a CRUD application in .Net Core using the CQRS and Mediator pattern | |||
1. Section 4 introduction | 00:00:00 | ||
2. Adding the Activity entity | 00:00:00 | ||
3. Seeding Activity data | 00:00:00 | ||
4. Commands and Queries – CQRS | 00:00:00 | ||
5. Introduction to MediatR | 00:00:00 | ||
6. Creating our first Query handler | 00:00:00 | ||
7. Creating the Activities API Controller | 00:00:00 | ||
8. Adding the Details Handler | 00:00:00 | ||
9. Cancellation Tokens | 00:00:00 | ||
10. Adding the Create handler | 00:00:00 | ||
11. Dealing with boilerplate code in our handlers | 00:00:00 | ||
12. Adding an Edit handler | 00:00:00 | ||
13. Adding a Delete handler | 00:00:00 | ||
14. Summary of section 4 | 00:00:00 | ||
5. Building a CRUD application in React | |||
1. Section 5 introduction | 00:00:00 | ||
2. Introduction to React Hooks | 00:00:00 | ||
3. Folder structure in React | 00:00:00 | ||
4. Getting a list of activities from the API | 00:00:00 | ||
5. Adding an Activity interface in Typescript | 00:00:00 | ||
6. Refactoring our class component to use React Hooks | 00:00:00 | ||
7. Adding the Navigation bar | 00:00:00 | ||
8. Styling React components | 00:00:00 | ||
9. Adding the Activity Dashboard | 00:00:00 | ||
10. Creating the Activity List | 00:00:00 | ||
11. Adding the Activity Details component | 00:00:00 | ||
12. Adding the Activity Form component | 00:00:00 | ||
13. Selecting an individual Activity | 00:00:00 | ||
14. Adding an edit mode to display the form | 00:00:00 | ||
15. Adding a create activity mode | 00:00:00 | ||
16. Initialising the form with data | 00:00:00 | ||
17. Controlled components in React | 00:00:00 | ||
18. Handling form submission | 00:00:00 | ||
19. Fixing issues with the dates in the form | 00:00:00 | ||
20. Adding the delete functionality | 00:00:00 | ||
21. Summary of section 5 | 00:00:00 | ||
6. Axios | |||
1. Section 6 introduction | 00:00:00 | ||
2. Setting up the agent.ts file | 00:00:00 | ||
3. Listing our activities | 00:00:00 | ||
4. Updating an Activity | 00:00:00 | ||
5. Adding a delay to our API methods | 00:00:00 | ||
6. Adding a loading component | 00:00:00 | ||
7. Adding a loading indicator for submitting data | 00:00:00 | ||
8. Isolating the loading indicator on the delete button | 00:00:00 | ||
9. Summary of section 6 | 00:00:00 | ||
7. MobX | |||
1. Section 7 introduction | 00:00:00 | ||
2. Introduction to MobX | 00:00:00 | ||
3. Setting up a MobX store | 00:00:00 | ||
4. Refactoring the activity list to use the store | 00:00:00 | ||
5. Refactoring the select activity function | 00:00:00 | ||
5. Refactoring the select activity function | 00:00:00 | ||
6. Using Async Await in our methods | 00:00:00 | ||
7. Refactoring the create activity method | 00:00:00 | ||
8. MobX computed properties | 00:00:00 | ||
9. Using an Observable Map | 00:00:00 | ||
10. Adding the edit activity action | 00:00:00 | ||
11. Adding the delete activity action | 00:00:00 | ||
12. Cleaning up our code | 00:00:00 | ||
13. Enabling MobX strict mode | 00:00:00 | ||
14. Adding MobX dev tools | 00:00:00 | ||
15. Summary of section 7 | 00:00:00 | ||
8. React Router | |||
1. Section 8 introduction | 00:00:00 | ||
2. Setting up React Router | 00:00:00 | ||
3. Setting up our Routes | 00:00:00 | ||
4. Adding Links and NavLinks | 00:00:00 | ||
5. Adding the Details link | 00:00:00 | ||
6. Getting an Activity from the API | 00:00:00 | ||
7. Using Route params | 00:00:00 | ||
8. Navigating via code | 00:00:00 | ||
9. Routing to the edit form | 00:00:00 | ||
10. Using a Fully Uncontrolled Component with a key to reset component state | 00:00:00 | ||
11. Navigating after submission | 00:00:00 | ||
12. Moving the home page outside of our navigation routes | 00:00:00 | ||
13. Scrolling to the top of the page on navigation | 00:00:00 | ||
14. More code clean up | 00:00:00 | ||
15. Summary of section 8 | 00:00:00 | ||
9. Adding some style | |||
1. Section 9 introduction | 00:00:00 | ||
2. Styling the activity list | 00:00:00 | ||
3. Grouping activities by date | 00:00:00 | ||
4. Styling the activity list items | 00:00:00 | ||
5. Creating the Activity Details page | 00:00:00 | ||
6. Styling the Activity Detailed Page Header | 00:00:00 | ||
7. Styling the Activity Detailed Info | 00:00:00 | ||
8. Styling the Activity Detailed Chat and Sidebar components | 00:00:00 | ||
9. Styling the Activity Form | 00:00:00 | ||
10. Styling the Home page | 00:00:00 | ||
11. Section 9 summary | 00:00:00 | ||
10. Error handling and validation | |||
1. Section 10 introduction | 00:00:00 | ||
2. Introduction to validation in the API | 00:00:00 | ||
3. Adding validation in the API using Data Annotations | 00:00:00 | ||
4. Adding validation in the API using Fluent Validation | 00:00:00 | ||
5. Error handling concepts in our application | 00:00:00 | ||
6. Error handling strategy | 00:00:00 | ||
7. Creating a derived Exception class for Rest exceptions | 00:00:00 | ||
8. Adding Error handling middleware | 00:00:00 | ||
9. Using our Error handling middleware | 00:00:00 | ||
10. Using Axios interceptors to catch errors | 00:00:00 | ||
11. Throwing errors in the client | 00:00:00 | ||
12. Adding routing functionality to Axios | 00:00:00 | ||
13. Handling an invalid GUID on a get request | 00:00:00 | ||
14. Adding toast notifications | 00:00:00 | ||
15. Handling network errors in Axios | 00:00:00 | ||
16. Summary of section 10 | 00:00:00 | ||
11. Forms | |||
1. Section 11 introduction | 00:00:00 | ||
2. Setting up React Final Form | 00:00:00 | ||
3. Creating a reusable Text input field | 00:00:00 | ||
4. Refactoring the form to use React Final Form | 00:00:00 | ||
5. Creating a reusable Text Area Input field | 00:00:00 | ||
6. Creating a reusable Select input field | 00:00:00 | ||
7. Setting up React Widgets | 00:00:00 | ||
8. Creating a reusable Date Input field | 00:00:00 | ||
9. Formatting the dates using Date-FNS | 00:00:00 | ||
10. Creating separate Date and Time fields | 00:00:00 | ||
11. Combining Date and Time inputs | 00:00:00 | ||
12. Initialising the form with data | 00:00:00 | ||
13. Submitting data to the server | 00:00:00 | ||
14. Form error handling | 00:00:00 | ||
15. Form validation | 00:00:00 | ||
16. Summary of section 11 | 00:00:00 | ||
12. ASP.NET Core Identity | |||
1. Section 12 introduction | 00:00:00 | ||
2. Introduction to ASP.NET Core Identity | 00:00:00 | ||
3. Adding the Identity User Entity | 00:00:00 | ||
4. Configuring Identity in our startup class | 00:00:00 | ||
5. Seeding users to the database | 00:00:00 | ||
6. Adding a Login Handler | 00:00:00 | ||
7. Adding a Base API controller | 00:00:00 | ||
8. Adding a User API controller | 00:00:00 | ||
9. Adding a User object | 00:00:00 | ||
10. JSON Web Tokens introduction | 00:00:00 | ||
11. Adding the Infrastructure project | 00:00:00 | ||
12. Adding the JWT Generator interface and class | 00:00:00 | ||
13. Generating a JWT Token | 00:00:00 | ||
14. Returning the JWT Token on successful login | 00:00:00 | ||
15. Securing our app with Authorization | 00:00:00 | ||
16. Dotnet user secrets | 00:00:00 | ||
17. Adding an authorisation policy | 00:00:00 | ||
18. Adding a Register Handler | 00:00:00 | ||
19. Testing user registration | 00:00:00 | ||
20. Adding a Fluent Validator extension for password validation | 00:00:00 | ||
21. Retrieving the Username from the token in the Http Context | 00:00:00 | ||
22. Getting the currently logged in user | 00:00:00 | ||
23. Summary of section 12 | 00:00:00 | ||
13. Client side login and register | |||
1. Section 13 introduction | 00:00:00 | ||
2. Creating the Typescript interfaces and Axios methods | 00:00:00 | ||
3. Creating a Mobx user store | 00:00:00 | ||
4. Creating a MobX root store | 00:00:00 | ||
5. Creating the Login form | 00:00:00 | ||
6. Hooking up the Login form to the API | 00:00:00 | ||
7. Dealing with submission errors | 00:00:00 | ||
8. Adding home page and NavBar user information | 00:00:00 | ||
9. Creating a MobX common store | 00:00:00 | ||
10. Using Axios request interceptor to automatically send the JWT token | 00:00:00 | ||
11. Persisting login on refresh | 00:00:00 | ||
12. Adding Modals to our application | 00:00:00 | ||
13. Adding better error messages to our form | 00:00:00 | ||
14. Adding a Register form | 00:00:00 | ||
15. Displaying server validation errors in our form | 00:00:00 | ||
16. Summary of section 13 | 00:00:00 | ||
14. Entity Framework Core Relationships | |||
1. Section 14 introduction | 00:00:00 | ||
2. Adding a class to join our Users and Activities | 00:00:00 | ||
3. Updating the Create Activity handler | 00:00:00 | ||
4. Testing in Postman | 00:00:00 | ||
5. Loading related data using Eager loading | 00:00:00 | ||
6. Adding DTOs to shape our data | 00:00:00 | ||
7. Adding AutoMapper | 00:00:00 | ||
8. Adding AutoMapper profiles | 00:00:00 | ||
9. Configuring AutoMapper mappings | 00:00:00 | ||
10. Using Lazy Loading to load related data | 00:00:00 | ||
11. Adding the Join activity feature | 00:00:00 | ||
12. Adding the remove attendance feature | 00:00:00 | ||
13. Creating a custom Auth policy | 00:00:00 | ||
14. Updating our Seed data | 00:00:00 | ||
15. Section 14 summary | 00:00:00 | ||
15. Adding Client side attendances | |||
1. Section 15 introduction | 00:00:00 | ||
2. Adding attendees to our list items | 00:00:00 | ||
3. Adding attendees to the Detailed view sidebar | 00:00:00 | ||
4. Adding the IsGoing and IsHost properties to the Activity interface | 00:00:00 | ||
5. Conditionally rendering the activity detailed header buttons | 00:00:00 | ||
6. Adding the cancel attendance function | 00:00:00 | ||
7. Hooking it all up to the API | 00:00:00 | ||
8. Loose ends | 00:00:00 | ||
9. Summary of section 15 | 00:00:00 | ||
16. Photo Upload Part 1-API | |||
1. Section 16 introduction | 00:00:00 | ||
2. Cloudinary settings | 00:00:00 | ||
3. Adding the interface and class for our Photo Accessor | 00:00:00 | ||
4. Adding the AddPhoto handler | 00:00:00 | ||
5. Adding the Domain Entity | 00:00:00 | ||
6. Adding the Add Photo Handler | 00:00:00 | ||
7. Adding the Photo API Controller | 00:00:00 | ||
8. Adding User Profiles feature | 00:00:00 | ||
9. Adding the Delete photo handler | 00:00:00 | ||
10. Adding the set main photo functionality | 00:00:00 | ||
11. Adding the Mapping Profile configuration for User images | 00:00:00 | ||
12. Summary of section 16 | 00:00:00 | ||
17. Photo Upload Part 2-Client | |||
1. Section 17 introduction | 00:00:00 | ||
2. Adding links and a profile page component | 00:00:00 | ||
3. Adding the Profile Header component | 00:00:00 | ||
4. Adding the Profile content component | 00:00:00 | ||
5. Getting the profile data from the API | 00:00:00 | ||
6. Displaying User images on the profile page | 00:00:00 | ||
7. Conditionally rendering the Photo Upload Widget | 00:00:00 | ||
8. Creating a Photo Upload Widget | 00:00:00 | ||
9. React Dropzone | 00:00:00 | ||
10. Styling our Dropzone | 00:00:00 | ||
11. React Cropper Part 1 | 00:00:00 | ||
12. React Cropper Part 2 | 00:00:00 | ||
13. Adding the Photo Upload methods to the store | 00:00:00 | ||
14. Adding the photo upload functionality to the Profile component | 00:00:00 | ||
15. Adding the set main photo functionality | 00:00:00 | ||
16. Isolating our loading indicators | 00:00:00 | ||
17. Adding Delete photo functionality | 00:00:00 | ||
18. Summary of section 17 | 00:00:00 | ||
18. Challenge | |||
1. Challenge Introduction | 00:00:00 | ||
2. Challenge Solution | 00:00:00 | ||
19. SignalR | |||
1. Section 19 Introduction | 00:00:00 | ||
2. Adding the Comment entity | 00:00:00 | ||
3. Adding the Comment DTO and mapping | 00:00:00 | ||
4. Adding the Create comment handler | 00:00:00 | ||
5. Adding a SignalR hub | 00:00:00 | ||
6. Configuring Auth for SignalR | 00:00:00 | ||
7. Adding the SignalR hub connection to the client | 00:00:00 | ||
8. Connecting to the SignalR hub from our client | 00:00:00 | ||
9. Adding the Comment functionality to the client | 00:00:00 | ||
10. Formatting Dates in words using Date-FNS | 00:00:00 | ||
11. Section 19 summary | 00:00:00 | ||
20. FollowingFollower feature | |||
1. Section 20 introduction | 00:00:00 | ||
2. Adding the UserFollower Entity | 00:00:00 | ||
3. Adding the Add Follower handler | 00:00:00 | ||
4. Adding the Delete Following handler | 00:00:00 | ||
5. Adding a Following API Controller | 00:00:00 | ||
6. Adding a Profile reader helper class and interface | 00:00:00 | ||
7. Getting a List of Followings for a user | 00:00:00 | ||
8. Adding a Custom value resolver for AutoMapper | 00:00:00 | ||
9. Adding the UI components to show followed users | 00:00:00 | ||
10. Adding the Follow Unfollow methods | 00:00:00 | ||
11. Adding the Follow Unfollow UI components | 00:00:00 | ||
12. Getting a list of followings from the API | 00:00:00 | ||
13. Using MobX reactions to get followers or followings on tab change | 00:00:00 | ||
14. Section 20 summary | 00:00:00 | ||
21. Paging, Sorting and Filtering | |||
1. Section 21 introduction | 00:00:00 | ||
2. Paging our Activity list | 00:00:00 | ||
3. Refactoring the Activity store list method for paging | 00:00:00 | ||
4. Adding vertical paging to our activity dashboard | 00:00:00 | ||
5. Adding infinite scrolling to our activity dashboard | 00:00:00 | ||
6. Updating the dashboard with Filter component | 00:00:00 | ||
7. Filtering our Activity List in the API | 00:00:00 | ||
8. Adding the Filtering methods in the client | 00:00:00 | ||
9. Updating the Activity Filters UI to allow filtering | 00:00:00 | ||
10. Adding User Activities filter in the API | 00:00:00 | ||
11. Adding User Activities filter in the client | 00:00:00 | ||
12. Summary of section 21 | 00:00:00 | ||
22. Final touches and publishing | |||
1. Section 22 introduction | 00:00:00 | ||
2. Swapping our loading indicator for Placeholders | 00:00:00 | ||
3. Adding a loading indicator to index.html | 00:00:00 | ||
4. Adding private routes on the client | 00:00:00 | ||
5. Adding logout for token expiry | 00:00:00 | ||
6. Safari bug fix | 00:00:00 | ||
7. Preparing the client application for publishing | 00:00:00 | ||
8. Building a production version of the React app | 00:00:00 | ||
9. Serving the production React app from the API server | 00:00:00 | ||
10. Adding MySQL and configuring a user | 00:00:00 | ||
11. Adding additional DB providers for Entity Framework | 00:00:00 | ||
12. Swapping the DB for MySQL | 00:00:00 | ||
13. Publishing the app to Linux – Part 1 | 00:00:00 | ||
14. Publishing the app to Linux – Part 2 | 00:00:00 | ||
15. Configuring Apache to use an HTTPS SSL certificate | 00:00:00 | ||
16. Adding Security headers to our API | 00:00:00 | ||
17. Adding Content Security Policy to our API | 00:00:00 | ||
18. Getting an A rating from a SecurityHeaders site scan | 00:00:00 | ||
19. Setting up Azure for publishing our app | 00:00:00 | ||
20. Publishing our App to Azure | 00:00:00 | ||
21. Tweaking the Azure deployment | 00:00:00 | ||
22. End of course summary | 00:00:00 |
11 STUDENTS ENROLLED