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

Опубликовано: 19 Март 2026
на канале: Momo Taheri

12,729

297

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

Completed codes: https://github.com/mohammad-taheri1/U...

Full Playlist:    • Fullstack JWT Authentication and Role-Base...

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:39:41) 06: Config Database in Program.cs
(00:46:37) 07: Config Enums in Program.cs
(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:34:49) 16: Inject LogService in Program.cs
(01:35:45) 17: Add and Implement MessageService
(01:49:56) 18: Add and Implement AuthService
(02:46:08) 19: Inject MessageService and AuthService in Program.cs
(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:22:16) 26: Decode our token in jwt.io
(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:14:07) 34: Create path.ts file
(04:17:41) 35: Create globalConfig.ts
(04:22:18) 36: Create axiosInstance.ts
(04:26:13) 37: Create Types and Interfaces
(04:36:54) 38: Create auth.utils.ts file
(04:47:07) 39: Create auth.context.tsx
(05:08:07) 40: Create useAuth.hook.ts
(05:09:31) 41: Create AuthSpinner.tsx
(05:11:52) 42: Create AuthGuard.tsx
(05:15:49) 43: Create Button component
(05:24:23) 44: Create layout- Header.tsx
(05:34:27) 45: Create layout- Sidebar.tsx
(05:41:32) 46: Create layout- index.tsx
(05:46:05) 47: Create routes- index.tsx
(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:
Telegram: https://t.me/DevEmpower
LinkedIn:   / mohammad-taheri1
GitHub: https://github.com/mohammad-taheri1
Medium:   / devempower
Portfolio: https://devempower.ir/

💖 If you enjoyed this project, don't forget to like, comment, and subscribe 💖
💖 Support me by buying a coffee: https://www.buymeacoffee.com/DevEmpower 💖