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

#ReactJS #TailwindCSS #WebDevelopment #nextjs #tailwindcss #reactjs #frontenddevelopment #reactwithukarsh

Social Details

Timestamps
0:00 - Introduction to the dashboard project
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

[shaheryaryousaf]

Liked the video by just seeing the thumbnail, because the design is very clean. Will try to watch it in coming days.

[mohdali-yqgq]

Wonderful, Shadcn is really amazing to creat the top notch applications and thanks to bring such a great tutorial.

[MrPkmonster]

Hello, thank you so much for such greate content. I've learned a lot from this tutorial. You've provided a bunch of useful tools such windowsize, debug window, .... and i love the way you sharing.

[d_snippet]

Thanks for the video brother, was trying to learn how to use Shadcn and found the right one....👍

[fahad_ahmad_x]

For anyone getting the Error: Hydration failed because the initial UI does not match what was rendered on the server. It is because of the useWindowWidth hook, since the window object is not available on the server, during SSR 'onlyWidth' won't be correctly set, leading to different content being rendered on the server and the client.
To fix it I used an eventListener with useEffect to make sure the I wait for the SSR to finish and start client render:

const [windowWidth, setWindowWidth] = useState(0);

useEffect(() => {
window.addEventListener("resize", () => {

});
}, []);
const mobileWidth = windowWidth < 768;

[Simple_OG]

Shadcn makes so easy every developer in my company loves it

[muliayusuf]

may be for the next project you can use supabase as database firebase

[xvgiirt]

@Shad Sir is very good teacher and i am also a student of his teacher who is create Shadcn and also you are a good teacher

[madhurchaturvedi]

Great video bro very help full for admin dash bord

[mdsafikulislam]

My humble request is that you please make a Dashboard using Tailwind CSS and NEXT.JS.
Thanks in Advance.

[asadmehboob]

Can you please add server side, sorting, filtering, searching, pagination using Tanstack Shadcn datatable

[omotehinseelvis]

Pls how did you get tsrafc to create the typed component template?

[mocambiquemaputomatola]

Hello, can you help me? I intend to develop an academic management system using Next.js 14, and I want to know how I can update students' grades using an Excel file that contains the grades for all assessments and the corresponding student numbers for each grade. Considering that each student accesses the system using their student number as a username and a password to access the student area, and all information has to be stored in the PostgreSQL database management system, I have a question: can I use PostgreSQL from Vercel or Supabase?

[rajankumar-htug]

Bhai plz esko aap Typescript, Shadcn UI, Prisma, Mongodb baniye na plz Hindi me plz 🙏

[rajatjaswaldev]

Hi which VS Code Icons pack are you using.


The icons which come next to the folder name or file name.

[NOELOLBAID]

Thanks for the video, I try it on astro with the oficial docs but never works, any chance to make a video Shacdnui + AStro?

[CanaldoSiloks]

I have a question about the input select. When I am in mobile screen and I click on select, happen an involuntary resizable in select. Do you know how to fix this?

[nature_enthusiast_Akshat]

Utkarsh bhai mere ko ye batao ki main side nav bna rha hu jo layout me rhega lekin isko dikhana tab hai jab login ho jae par layout wala to sab me rhega ye kaise kru

[ibrahimcious]

hello, I'm getting the hydration error when applying mobileWidth in SideNavbar. It said "expected server HTML to contain a matching <button> in <div>". How to solve this?

[broken_jail]

it is not fully responsive as on mobile screen the side bar is still there which shouldnt be so