TechNeth CRM is a high-performance, aesthetically premium CRM dashboard built with Next.js 15, Redux Toolkit, and Tailwind CSS. It features a complex, responsive four-column layout, real-time interactive widgets, and deep state management integration.
- Centralized State Management: Fully migrated to Redux Toolkit. Eliminates prop drilling by utilizing typed hooks (
useAppSelector,useAppDispatch) and a centralized data store. - Interactive Productivity Widgets:
- Noted (Task Widget): Local-state powered task management with completion toggling, creation, and deletion.
- Chat Widget: Real-time message interface with auto-scrolling, symmetric message bubbles, and message history management.
- Responsive Dual-Drawer System:
- Custom-built mobile drawers for both navigation (left) and secondary widgets (right).
- High-performance CSS transitions (
transform,opacity,visibility) for smooth, app-like interactions.
- Premium UI/UX:
- Beautiful beige-green professional color palette.
- Collapsible desktop widgets to maximize workspace.
- Fully accessible design with ARIA support and semantic HTML.
- Architecture:
- Clean separation of concerns between state, logic, and presentation.
- Optimized component memoization for smooth rendering.
- Framework: Next.js 15 (App Router)
- State: Redux Toolkit (RTK) + React-Redux
- Styling: Tailwind CSS + CSS Variables
- Icons: Lucide React
- Type Safety: TypeScript
├── app/ # Next.js App Router (Layouts, Pages, Globals)
├── components/ # Reusable UI components
│ └── dashboard/ # Dashboard-specific features & widgets
├── lib/ # Library & Utility functions
│ └── store/ # Redux Store, Hooks, and Slices
├── types/ # Centralized TypeScript interfaces
└── data/ # Demo data & static assets
npm installnpm run devOpen http://localhost:3000/dashboard to see the dashboard in action.
npm run buildBuilt with pride for high-performance CRM experiences.