CRUD with React, Typescript & .NET 8 Web API, EF Core, SQLite

In this video we will create from scratch CRUD with React, Typescript and .NET 8 Web Api together with CORS, fluent validation, mapster, global exception handling, entity framework core setup and SQLite database. This is a beginners course after which you will be able to create a simple React app with features of routing, displaying the contents in a table and performing CRUD operations on resources fetched from .NET 8 Web Api.

If you find my videos helpful you can consider to support me 😁

Source code:

Linkedin:

Timecodes:
Introduction : 0:00:00 - 0:00:48
Demo: 0:00:49 - 0:03:15
Creating .NET Web API: 0:03:16 - 0:03:50
Remove redundant code: 0:03:50 - 0:04:35
Adding class libraries: 0:04:36 - 0:07:42
Entity framework and SQLite nuGet setup: 0:07:43 - 0:09:45
MovieDbContext class: 0:09:46 - 0:10:34
Base entity class: 0:10:35 - 0:11:34
Movie entity class: 0:11:35 - 0:12:34
Setup of DbConext: 0:12:35 - 0:13:05
Dotnet EF migrations: 0:15:03 - 0:17:15
Applying migrations: 0:17:16 - 0:18:15
Show created sqlite database: 0:18:16 - 0:18:57
CQRS pattern: 0:18:58 - 0:20:34
MediatR nuGet package: 0:20:35 - 0:21:25
Setting up the CQRS structure: 0:21:26 - 0:25:23
QueryHandler: 0:25:24 - 0:26:45
Mapster nuGet package: 0:26:46 - 0:28:02
Mapping configuration: 0:28:03 - 0:28:38
DependencyInjection class and QueryHandler: 0:28:39 - 0:32:36
GetMovieByIdQuery (extra code to QueryHandler, mappingConfig): 0:33:17 - 0:37:33
Commands-Create classes: 0:37:34 - 0:40:42
Commands-Update classes: 0:40:43 - 0:44:07
Commands-Delete classes: 0:44:08 - 0:46:21
Modules: 0:46:22 - 0:51:31
Request: 0:51:32 - 0:52:28
Endpoints in MovieModule: 0:52:29 - 0:57:21
Web API - check endpoints: 0:57:22 - 0:59:23
FluentValidation - CRUD classes: 0:59:24 - 1:05:16
GetMovieByQueryValidator: 1:05:17 - 1:06:37
Behaviors (Validator class): 1:06:38 - 1:11:20
Validation error class: 1:11:21 - 1:13:11
Validation exception class: 1:13:12 - 1:15:07
Check validation: 1:15:08 - 1:17:23
NotFoundException: 1:17:24 - 1:19:20
ExceptionHandler: 1:19:21 - 1:26:20
Start on React (install node JS): 1:28:21 - 1:28:50
Create Client folder and npm create vite: 1:28:50 - 1:30:43
remove some of the auto-gen files/code: 1:30:44 - 1:31:48
react - think of which components to make: 1:31:49 - 1:33:17
react - create components: 1:33:18 - 1:35:13
react - create models: 1:35:14 - 1:38:04
react - make routers and interceptors (axios): 1:38:05 - 1:39:21
react - api (apiConnector) and npm install axios: 1:39:22 - 1:40:08
react - config tsx and apiConnector: 1:40:09 - 1:52:10
react - npm install semantic-ui-react: 1:52:11 - 1:54:15
react - MovieTable component: 1:54:16 - 1:59:57
react - MovieTableItem component: 1:59:58 - 2:00:47
react - MovieTable and MovieTableItem component: 2:00:48 - 2:05:50
react - app component: 2:05:51 - 2:07:09
CORS: 2:07:10 - 2:09:05
Demo of frontend: 2:09:06 - 2:09:26
react - routing (npm install react-router-dom): 2:09:27 - 2:12:33
react - more routing (main , app): 2:12:34 - 2:14:56
react - create movie (and movieTableItem): 2:14:57 - 2:16:48
react - movieForm (edit): 2:16:49 - 2:30:09
react - handle an error (and demo of the fronend/backend): 2:30:10 - 2:31:44
react - add a handle for API errors (axiosInterceptor): 2:31:45 - 2:39:52
react - add it to the app file (useEffect), also apiConnector: 2:39:53 - 2:43:44
react - add it to the app file (useEffect), also apiConnector: 2:39:53 - 2:44:30

#csharp #dotnet #crud #react

[lauwwulan]

Thanks a million! Your explanation is easy to understand, and it's cool how you follow every naming convention and best practice!

[manooj]

wow very well explain you deserve million sub

[Kamilek]

CRUD with exception handling, validation and structure.. unicorn on YT. Dzięki! :)

[TuCominek]

Przed 301! Thanks for the video keep good work Remik :D

[troom]

Hello again Remik.
Try replacing React with blazor webassembly. You can also use the mudblazor library to help you with UI.
I used to write in React with TypeScript, but for single-person projects Blazor won. (From a .NET developer's perspective, of course)

[tidianediallo]

Hi Remiguesz, that's great
Try replacing React with blazor webassembly also use the mudblazor to help you with UI.

[codewithirshad]

If we want to auto-generate that Interfaces in Models folder from backend using open API how we can do that?

[rpvxrdb]

How would you go about deploying this project?

[rpvxrdb]

Thank you for the video! is the source code available?