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 😁 https://buymeacoffee.com/remikzalewski Source code: https://github.com/RemigiuszZalewski/YoutubeVideos/tree/main/Movies Linkedin: https://linkedin.com/in/remigiusz-zalewski 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 DbContext setup in Program.cs: 0:13:06 - 0:14:24 Appsettings.json file : 0:14:25 - 0:15:02 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 Changes in Program.cs: 0:32:37 - 0:33:16 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 Setup ExceptionHandler in Program.cs: 1:26:21 - 1:28: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