A production-ready, enterprise-grade admin dashboard built with Next.js, TypeScript, Tailwind CSS, and Redux Toolkit. Designed for portfolio showcases and frontend engineering interviews.
- Login, Register, Forgot Password flows
- JWT authentication via DummyJSON
- Protected routes with Next.js middleware
- Persistent login (Redux Persist + HTTP-only-style cookie for SSR middleware)
- Role-Based Access Control (RBAC) with 4 roles
- KPI cards with trend indicators
- Revenue, user growth, and sales charts
- Traffic sources pie chart
- Recent activities and transactions
- Full CRUD with DummyJSON users API
- Search, filters, sorting, pagination
- CSV export
- User profile pages
- Create, update, delete roles
- Permission matrix visualization
- Granular permission assignment
- Revenue, user, order analytics
- Conversion funnel
- Growth reports vs targets
- Profile management
- Password change
- Theme settings (light / dark / system)
- Notification preferences
- Feature-based architecture
- Strict TypeScript
- Reusable DataTable component
- Lazy-loaded charts (code splitting)
- Toast notifications (Sonner)
- Error boundaries
- Skeleton loaders
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| State | Redux Toolkit + Redux Persist |
| HTTP | Axios |
| Forms | React Hook Form + Zod |
| Charts | Recharts |
| Icons | Lucide React |
| UI Primitives | Radix UI |
| Linting | ESLint + Prettier |
- Node.js 18+
- npm
git clone <your-repo-url>
cd saas-admin-dashboard
npm install
npm run dev| Field | Value |
|---|---|
| Username | emilys |
| Password | emilyspass |
Uses DummyJSON test account. Role is assigned based on user ID for RBAC demonstration.
src/
├── app/ # Next.js App Router pages
│ ├── (auth)/ # Auth layout group
│ ├── dashboard/
│ ├── users/
│ ├── roles/
│ ├── analytics/
│ └── settings/
├── components/
│ ├── layout/ # Dashboard & auth layouts
│ ├── navigation/ # Sidebar, header
│ ├── charts/ # Recharts (lazy loaded)
│ ├── tables/ # DataTable system
│ ├── forms/
│ ├── cards/
│ └── shared/ # Button, Input, Badge, etc.
├── features/ # Feature modules
│ ├── auth/
│ ├── dashboard/
│ ├── users/
│ ├── roles/
│ ├── analytics/
│ └── settings/
├── store/
│ └── slices/ # Redux slices + async thunks
├── services/ # API service layer
├── hooks/
├── lib/
├── types/
├── constants/
└── middleware.ts # Route protection
| Role | Permissions |
|---|---|
| Super Admin | Full access |
| Admin | Users, analytics, settings (no role management) |
| Manager | View/create/edit users, analytics |
| User | Dashboard + settings only |
npm run dev # Start development server
npm run build # Production build
npm run start # Start production server
npm run lint # Run ESLint
npm run format # Format with PrettierThe app uses DummyJSON for:
POST /auth/login— AuthenticationGET /auth/me— Session validationGET /users— User listing with search/paginationPOST /users/add— Create usersPUT /users/:id— Update usersDELETE /users/:id— Delete users
Dashboard analytics and role management use mock services for demonstration.
- Feature-based folders — Business logic colocated with UI
- Centralized API layer — Axios interceptors for auth tokens and error handling
- Redux async thunks — Loading/error states for all data fetching
- Optimistic updates — User deletion updates UI immediately
- Code splitting — Charts loaded via
next/dynamic - Middleware auth — Cookie-based route protection compatible with persisted Redux state
MIT