Build and Deploy Responsive Dashboard with Next.js and Shadcn UI Components #nextjs

Build and Deploy Responsive Dashboard with Next.js and Shadcn UI Components #nextjs

59.636 Lượt nghe
Build and Deploy Responsive Dashboard with Next.js and Shadcn UI Components #nextjs
#ReactJS #TailwindCSS #WebDevelopment #nextjs #tailwindcss #reactjs #frontenddevelopment #reactwithukarsh My Channel - https://www.youtube.com/@reactwithutkarsh/ Live Demo - https://shadcn-dashboard-red.vercel.app/ Code Repo - https://github.com/whoisseth/shadcn-dashboard Learn to make a Responsive dashboard using Next.js and Shadcn UI components. This tutorial guides you through creating an easy-to-use interface for your web projects." Social Details Discord - https://discord.gg/CQMSSbG3TX Instagram - https://www.instagram.com/reactwithutkarsh/ LinkedIn - https://www.linkedin.com/in/utkarshseth2019/ GitHub - https://github.com/whoisseth Timestamps 0:00 - Introduction to the dashboard project 3:02 - Installing dependencies for Next.js setup 8:27 - Configuring UI layout using set Shadcn UI 13:11 - Creating a collapsible sidebar component 17:24 - Implementing icons, buttons, and tooltips 20:55 - Managing active page indication in the sidebar 24:28 - Creating user, orders, and settings pages 25:18 - Configuring the sidebar for mobile compatibility 27:22 - Implementing responsive sidebar collapse 28:49 - Shifting focus to dashboard creation 43:05 - Initiating bar chart creation with Recharts 50:26 - Creating the recent sales section 51:09 - Developing the sales card component 57:03 - Rendering sales card data using mapping 1:00:45 - Installing and implementing a data table for users 1:11:07 - Deploying the application on GitHub and Vercel