Build a Fullstack App with .NET Core & React.js 🚀

Learn how to build a fullstack ASP.NET Core Web API and React.js CRUD application from scratch! This beginner-friendly tutorial covers everything you need to get started with .NET Core fullstack development using Entity Framework Core, SQLite, and React. If you are looking for a dotnet core project for beginners, it might be a good fit for you.

🔧 What you'll learn:

👉 Build a fullstack .NET + React project
👉 Set up ASP.NET Core Web API with Entity Framework Core
👉 Use SQLite as your database
👉 Create a React app from scratch
👉 Integrate Tailwind CSS for styling
👉 React Router DOM for navigation
👉 Forms with react-hook-form + validation
👉 Fetch data using Axios
👉 Use Lucide React icons
👉 Add notifications with react-hot-toast

Perfect for beginners who want to learn .NET Core and React CRUD apps step by step!

💻 Free Source code : https://github.com/rd003/DotnetReactCrud
📁 Resources folder : https://github.com/rd003/DotnetReactCrud/tree/master/resources
📁 Resources folder (zip🤐 ): https://github.com/rd003/DotnetReactCrud/blob/master/resources.zip

⌛ Timestamps:

(00:00:00 - 00:00:38) Intro and demo
(00:00:39 - 00:01:40) Need to download resources
(00:01:41 - 00:03:55) Tools needed
(00:03:56 - 00:11:10) Creating a backend app
(00:11:11 - 00:14:55) Project structure
(00:14:56 - 00:15:22) Configuring app for controller
(00:15:23 - 00:17:24) Blank PeopleController
(00:17:25 - 00:30:46) Models folder, Person, AppDbContext
(00:30:47 - 00:35:03) Migration commands
(00:35:04 - 01:04:40) GET, PUT, POST, DELETE endpoints
(01:04:41 - 01:10:24) CORS
(01:10:25 - 01:20:48) Creating a react app + understanding its structure
(01:20:49 - 01:31:41) Creating pages, components and navbar
(01:31:42 - 01:44:26) React router
(01:44:27 - 01:47:15) Person component UI
(01:47:16 - 01:52:07) Displaying dummy data in PeopleList
(01:52:08 - 01:57:42) Edit and Delete Events
(01:57:43 - 02:00:46) Handling empty or null peopleList array
(02:00:47 - 02:15:11) Submit PersonForm and validations with react-hook-form
(02:15:12 - 02:18:20) Edit form
(02:18:21 - 02:19:56) handleFormSubmit for add and update
(02:19:57 - 02:24:32) state management for person
(02:24:33 - 02:28:33) Adding a toaster
(02:28:34 - 02:31:30) Environment file
(02:31:31 - 02:43:28) Consuming APIs with axios and loading state


🔖Other links:
▶Code Crunch (precise c# .net videos): https://www.youtube.com/playlist?list=PLP8UhDwXI7f8AqaxdNh98lvAeqktu9bEa
▶Single video courses: https://www.youtube.com/watch?v=e2I7EzuCt1g&list=PLP8UhDwXI7f-IFqwrx89QN1QIurYr94-p&ab_channel=RavindraDevrani
▶dot net 6+ tutorials and projects: https://www.youtube.com/playlist?list=PLP8UhDwXI7f_-5Swp8DlNa6wD15e1JYrU
▶Learn projects from scratch: https://bit.ly/3zpn9ng
▶Dotnet with different databases: https://www.youtube.com/playlist?list=PLP8UhDwXI7f-dOqUH2T2qrdQ1Ow5J6Ap_
▶Authentication and authorization: https://www.youtube.com/playlist?list=PLP8UhDwXI7f9Mcx3Q7yd7faJWBNRhjeJM
▶Design patterns with c#: https://www.youtube.com/playlist?list=PLP8UhDwXI7f8V4BgVJ97qMMA29Sd9H8Vz
▶Practical Oops with c#: https://www.youtube.com/playlist?list=PLP8UhDwXI7f8VDcivJiMkbAZCarj-VWnw


🌟 Connect with me:
👉 Blog: https://ravindradevrani.com/
👉 YouTube: https://youtube.com/@ravindradevrani
👉 Twitter: https://twitter.com/ravi_devrani
👉 GitHub: https://github.com/rd003

☕Support my work:➡️ Buy me a coffee 🍵: https://www.buymeacoffee.com/ravindradevrani

#dotnet #reactjs #aspnetcore #csharp