Bento Grid Generator - v0 by Vercel
bentogrid.v0.buildChat with v0. Generate UI with simple text prompts. Copy, paste, ship.
SortableJS
sortablejs.github.ioSortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
Next.js School Management Dashboard UI Design Tutorial
youtube.comReact 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
High-quality videos on frontend development
buildui.comLearn how to build modern user interfaces for the web.
Theme UI Gallery
theme-ui-gallery.netlify.appCopy and paste-able component structures pre-styled to match your theme
Tiptap - Dev Toolkit Editor Suite
tiptap.devTiptap is a suite of content editing & real time collaboration tools. Build editor experiences like Notion in weeks, not years.
SyntaxUI - Stop coding from scratch. Build faster. Launch sooner.
syntaxui.comGet free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!
