React Next.js admin dashboard project tutorial for beginners. School management app design with Next.js and Tailwind. Admin, teacher, student, and parent dashboards with responsive tables and animated charts.

You are watching the first part of the project (The design part)
Watch the second part (Full-stack school management app): (Coming soon)

If it is valuable to you, you can support Lama Dev.
Join: https://www.youtube.com/channel/UCOxWrX5MIdXIeRNaXC3sqIg/join
Buy me a coffee: https://www.buymeacoffee.com/lamadev

Source Code:
Start here: https://github.com/safak/next-dashboard-ui/tree/starter
Completed version: https://github.com/safak/next-dashboard-ui/tree/completed

Join Lama Dev groups
X / Twitter: https://x.com/lamawebdev
Facebook: https://www.facebook.com/groups/lamadev
Instagram: https://www.instagram.com/lamawebdev
Discord: https://discord.gg/yKremu4mPr

00:00 Introduction
02:38 Installation
05:06 Next.js 15 Pages and Layout Tutorial
11:01 Next.js Tailwind Responsive Layout 
18:10 Next.js Tailwind Responsive Menu Design
23:01 Next.js Tailwind Responsive Navbar Design
30:18 Next.js Admin Dashboard Design
39:40 Next.js Animated Chart Tutorial 
40:51 Next.js Radial Chart with Re-Charts
52:19 Next.js Animated Bar Chart Example  
01:00:11 React Next.js Animated Line Chart Example
01:05:54 React Calendar Tutorial 
01:10:36 Events Component Design 
01:15:04 Announcement Component Design  
01:20:10 Next.js Student Dashboard Design
01:25:56 React Big Calendar (Schedule Calendar) Tutorial 
01:43:01 School Management App Parent Dashboard Design   
01:43:54 React/Next.js List Table Design with Pagination 
01:53:56 React/Next.js Responsive Reusable List Table
02:11:20 School Management App Other List Pages
02:34:08 School Management App Single Teacher Page Design
02:58:15 School Management App Single Student Page Design
03:00:17 Next.js Dynamic Form Buttons (Create, Update, Delete)
03:09:12 React/Next.js Form Modal Design 
03:17:11 React Next.js Form Design 
03:18:35 React-Hook-Form Tutorial 
03:19:35 React-Hook-Form with Zod Validation Tutorial 
03:32:25 React/Next.js Form Inputs with Validation
03:47:48 Rendering Forms Conditionally in React   
03:50:30 Next.js Lazy Loading Import Tutorial with dynamic()
03:54:22 Outro

YouTube

Learn how to design a responsive school management dashboard using Next.js and Tailwind CSS. The dashboard displays different views for admin, student, parent, and teacher roles. Key features include animated charts, user-specific views, and a customizable form using React Hook Form. This project helps in understanding the latest versions of React and Next.js and improving frontend design skills.

Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard

<p>can u design a database using supabase</p>


<p>@Lama Dev is a great teacher…I learned a lot from him.</p>
