Loading video player...
š Deploy your full-stack apps and databases with Sevalla: https://sevalla.com/?utm_source=codewithsadee&utm_medium=Referral&utm_campaign=youtube Build a SaaS Admin Dashboard with React, Shadcn UI & TypeScript In this video, you will learn how to build a modern SaaS Admin Dashboard using React, Shadcn UI, and TypeScript. We will build a professional "Vendor Security" interface featuring responsive charts, advanced data tables with sorting and pagination, and a beautiful dark mode UI. By the end of this tutorial, you will have a production-ready dashboard template that you can use for your own SaaS projects or client work. š Essential links - Assets: https://drive.google.com/file/d/11u2nuU8XYKQk7W7onWxAWZVCnh3l6pk6/view?usp=sharing - GitHub gist: https://gist.github.com/codewithsadee/425d0351bfd082cb47109e6daa2d5335 - Source Code: https://www.patreon.com/posts/new-react-source-144446490?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link - Source Code2: https://buymeacoffee.com/codewithsadee/e/482916 š What You Will Learn in This Course: ā How to setup a React project with TypeScript & Tailwind CSS ā Installing and customizing Shadcn UI components ā Building "Vendor Breakdown" charts using Recharts (or your specific chart lib) ā Creating an Advanced Data Table (Vendor Movements) ā Implementing Search, Column Sorting, and Pagination ā Custom cell rendering (Status badges, Progress bars, Action buttons) ā Responsive design best practices for Dashboards š ļø Tech Stack Used: ā React (with TypeScript) ā Shadcn UI (Radix UI + Tailwind CSS) ā Recharts (for Data Visualization) ā Lucide React (Icons) ā Vite (Build Tool) āļø Timestamps: 0:00 Intro 2:18 Project demo 5:57 Project initial 11:23 Shadcn UI setup 16:13 Theme toggle functionality 17:50 App sidebar 24:04 Change theme 24:49 App sidebar 42:33 Header 51:57 Page & Page header 57:43 Dashboard card 1:04:26 Dashboard Bar chart 1:13:14 Dashboard Radial chart 1:24:49 Dashboard Table 1:30:03 Advance Data table 2:10:45 Final demo š Connect With Me: Twitter/X: https://x.com/codewithsadee_ Instagram: https://instagram.com/codewithsadee LinkedIn: https://linkedin.com/in/codewithsadee #reactjs #shadcnui #typescript #webdevelopment #dashboard #saas #frontend #adminpanel