Build a Fullstack Admin Dashboard with React, ASP.NET Core 7 & TypeScript| Users Management Project

Learn how to create a Fullstack Users Management Admin Dashboard with JWT Authentication and Role-Based Authorization using ASP.NET Core 7 WebAPI, React, TypeScript, and Tailwind CSS

In this comprehensive tutorial, we build a complete Fullstack project from scratch, implementing a CRUD application with ASP.NET Core 7 WebAPI, React JS 18, TypeScript, and Tailwind CSS. We also cover JWT Authentication and Role-Based Authorization for secure user management.

This project focuses on showing you how to build a Fullstack project from 0 to 100 and build a CRUD application with ASP.NET Core WebAPI, React JS, and Tailwind CSS.

We will follow REST API patterns.

✏️ sections

- (00:00:00) 00: Demo

Back-end Project

- (00:17:05) 01: Create Backend Project
- (00:19:12) 02: Install Nuget packages
- (00:23:10) 03: Folder Structure
- (00:24:39) 04: Create Entities
- (00:32:27) 05: Create DbContext
- (00:48:18) 08: Create DTOs
- (01:02:36) 09: Create StaticUserRoles static class
- (01:05:10) 10: Add Identity
- (01:06:42) 11: Config Identity
- (01:09:20) 12: Add Authentication Schema and Jwt Bearer configs
- (01:17:30) 13: Add Controllers
- (01:18:59) 14: Add Interfaces
- (01:28:02) 15: Add and Implement LogService
- (01:35:45) 17: Add and Implement MessageService
- (01:49:56) 18: Add and Implement AuthService
- (02:47:05) 20: Implement TestController
- (02:52:16) 21: Implement LogsController
- (02:56:57) 22: Implement MessagesController
- (03:02:06) 23: Implement AuthController
- (03:15:09) 24: Test our backend with Swagger
- (03:19:09) 25: Hard Coding the OWNER ROLE manually on Database
- (03:23:14) 27: Send request headers in swagger
- (03:26:52) 28: Handle CORS Policy Error
- (03:27:38) 29: Continue to test our backend with Swagger

Front-end Project

- (03:48:32) 30: Create frontend project as well as npm packages
- (03:52:48) 31: Install and config Tailwind CSS
- (04:03:19) 32: Implement folder structure
- (04:07:48) 33: Create all pages of our application
- (04:26:13) 37: Create Types and Interfaces
- (05:15:49) 43: Create Button component
- (06:00:18) 48: RIP Matthew Perry (Chandler Bing 😕😕😕)
- (06:00:45) 49: Implement Home page
- (06:03:52) 50: Implement InputFiled component
- (06:10:28) 51: Implement Register page
- (06:30:16) 52: Implement Login page
- (06:42:36) 53: Test Login and Register
- (06:47:16) 54: implement NotFound Page
- (06:48:58) 55: implement Unauthorized Page
- (06:50:37) 56: implement PageAccessTemplate component
- (06:55:55) 57: implement Dashboard Page
- (06:59:18) 58: implement User Page
- (07:00:43) 59: implement Manager Page
- (07:02:33) 60: implement Admin Page
- (07:04:08) 61: implement Owner Page
- (07:05:45) 62: Test access to pages of User, Manager, Admin, and Owner
- (07:10:11) 63: implement Spinner component
- (07:12:33) 64: implement MyLogs Page
- (07:22:11) 65: implement SystemLogs Page
- (07:31:04) 66: implement Inbox Page
- (07:39:12) 67: implement AllMessages Page
- (07:47:23) 68: implement UsernamesComboBox component
- (07:58:00) 69: implement SendMessage Page
- (08:08:35) 70: Test Sending message
- (08:11:29) 71: Implement LatestUsersSection component
- (08:16:13) 72: Implement UserChartSection component
- (08:24:26) 73: Implement UserCountCard component
- (08:28:00) 74: Implement UserCountSection component
- (08:33:58) 75: Implement UsersTableSection component
- (08:43:16) 76: Implement UsersManagement page
- (08:52:36) 77: Implement UpdateRole page
- (09:06:57) 78: Test Update roles
- (09:11:03) 79: Outro

🌎 Me:

💖 If you enjoyed this project, don't forget to like, comment, and subscribe 💖

[hosseinmollaee]

The fact that you explained it so simply made this video even better. thanks for sharing

[mnhtada]

I just discovered this channel, I will stay here day and night, Thank you so much sir u doing great jobs ❤❤❤❤
That is exactly what I was looking for

[WanderHorizona]

for the first time in my life i watched a and completed a project without any silly errors

[jtvandertol]

Thank you for sharing your knowledge. Very helpful. Also, great music in the introduction

[khazriaymen]

thank for the great tuto first, and i wanna know why using IList for role and even call it roles when a user can have one role only

[ali_zare]

when i see your tutorial l take feel good from you and like always you are perfect, continue with fullpower, mohammad dear

[andrewfandy]

Trying to use project tutorial based after a long time learned by theories

[RahulTiwari-hqgn]

once again sir thank you so much. Thank you so much

[muxammad]

just fnished the tutorial thanks alot,

[mosiyasyed]

Thanks you soo much Sit, this was the exact tutorial I was searching for, Can you please make a video on how to host this project along with a database for free

[deependee]

hi, your tutorial is awesome, is there any chance to show how to deploy backend with database to go live with it ?

[santiagosanchez-ezwq]

Excellent tutorial, it would be good to add recover password and validate email.

[daniel]

.net 8 api with both jwt and refresh token would be great

[RahulTiwari-hqgn]

HELLO SIR HAVE YOU DECIDED WHAT VIDEO YOU ARE MAKING NEXT PLEASE TELL ME.

[enricoroselino]

i think i gonna name Owner into God instead

[rokefeler]

4:25:20 redundance, best write: (error.response && error.response.data.message) || error.message || 'An unexpected error occurred')