ASP.NET Core Web API & React: Full-Stack CRUD Mastery

Dive into the world of full-stack development with our comprehensive tutorial on building a CRUD (Create, Read, Update, Delete) application. In this step-by-step guide, we explore the powerful combination of .NET 8 Web API, React 18, Chakra UI, and Axios to create a modern and efficient product crud app. Learn how to seamlessly integrate the backend functionality using .NET 8 Web API to handle data operations, and discover the art of crafting responsive and dynamic user interfaces with React 18. Enhance the visual appeal and user experience using the Chakra UI library, and ensure smooth communication between the frontend and backend with Axios. This tutorial provides a hands-on approach to mastering key technologies. Follow along as we guide you through each stage, from project setup to implementation, and empower you to build a robust and user-friendly CRUD application. ASP.NET Core Web API & React: Full-Stack CRUD Mastery Other Tutorials https://youtu.be/GGETOtoGqrQ https://youtu.be/WxkI70w-bwY https://youtu.be/8mqx_PklI-g Buy Me Coffee : https://www.patreon.com/posts/asp-net-web-api-145956711 #net8 #react18 #crud Chapters 0:00 Demo App 1:34 Prerequisites for this course 1:42 Create .NET Web Api With Controllers 2:33 Install Nuget Packages 3:37 Create AppDbContext Class 4:27 Register SqlServer Db ConnectionStrings in program.cs 5:20 Define ConnectionStrings in appsettings.json for SQLSERVER 6:20 Create Product Model Class 7:41 Configure DbSet for database table 7:58 Create Initial Migrations 8:38 Update Database with vs code command 9:22 Install SQLServer Vs Code Extension 10:16 Create Product Controller 11:30 Implement HTTP get method for return list of products 12:28 Test Get List of product HTTP get method 12:44 Create HTTP POST Method for create product 14:18 Test HTTP POST method in swagger 15:00 View Inserted Data in sqlserver through vs code extension 15:20 Implement HTTP Get Method for return single product by their id 16:25 Test Get Single Product By their id from swagger 16:50 Implement HttpPut Method for update product 18:20 Test HttpPut Method from swagger 18:55 Implement HttpDelete Method to delete product by their id 20:20 Test In Swagger HttpDelete Method 21:00 Create React With Vite 22:00 Install Chakra UI react for styling our app 22:34 Wrap component with Chakra Provider 22:48 Install poppins font from google fonts 23:22 Define custom port in vite config 23:44 Design Homepage table for showing list of products 26:02 Install Chakra UI Icons 28:40 Install Axios for fetching data 29:06 Fetch Data From .net web api using axios react 30:26 Define type Product Interface in typescript react 32:35 Iterate Array in react 33:37 Enable Cors In .net 8 web api 36:10 Display Chakra Ui Avatar 37:41 Display Chakra Ui Loading Skeleton When fetching Data 45:18 Implement Create Product In React Axios With Chakra UI Modal 48:10 Create Product Form In react 56:21 Edit product with axios react 56:32 Define State in react for store single product fetch from .net web api 56:44 Fetch Single product from react with axios 1:05:22 Delete product from client react with axios 1:05:40 Display Chakra ui popover for confirmation dialog 1:08:25 Display toast message after successfully deleted product 1:10:10 Implement View Detail In from react with axios fetch single product from .net 8 web api 1:10:38 Use Chakra Ui Drawer to show product detail 1:11:11 Define Props Types for View Detail product and drawer 1:13:21 Open Drawer from parent component