NextJs Responsive Admin Dashboard Tutorial | with NextJs, Tailwind Css, Recharts & Framer Motion
In this tutorial, you'll learn how to build a fully responsive admin dashboard using Next.js, Tailwind CSS, Recharts, and Framer Motion. We'll cover setting up the project, designing a modern UI, integrating interactive charts with Recharts, and adding smooth animations using Framer Motion. You'll also implement essential features like CRUD operations, including edit and delete functionality, as well as a real-time search feature for filtering data. By the end, you'll have a fully functional and visually appealing admin panel optimized for performance with Next.js best practices.
Live Demo: https://next-admin-dashboard-demo.ver...
Start Project (images & data): https://drive.google.com/drive/folder...
Full Project: https://buymeacoffee.com/riseofcoding...
Packages:
https://www.npmjs.com/package/recharts
https://www.npmjs.com/package/framer-...
https://www.npmjs.com/package/lucide-...
Chapters:
00:00 Intro
04:00 Header Component
10:18 Sidebar Component
19:55 Overview Page
23:00 Stat Card Component
27:34 Sales Chart Component
39:45 Category Chart Component
53:20 Order Chart Component
01:02:35 Product Chart Component
01:10:30 Products Page
01:13:35 Products Table Component
01:46:20 Clients Page
01:49:09 Clients Table Component
02:07:07 Sales Page
02:10:00 Orders Page
02:13:30 Orders Table Component