A high-performance, modern React dashboard built with React 19, TypeScript, and Redux Toolkit. This project focuses on clean architecture, scalable state management, and beautiful data visualization using Tailwind CSS and modern chart libraries.
| Technology | Purpose |
|---|---|
| React 19 (Vite) | Frontend Framework |
| TypeScript | Type-safe Development |
| Redux Toolkit & RTK Query | State Management |
| Tailwind CSS | Responsive & Modern UI |
| Recharts & Nivo | Data Visualization |
| Lucide React | UI Icons |
- Fast Performance — Optimized build and development using Vite.
- Clean Architecture — Well-organized folder structure for scalability.
- Type Safety — Full TypeScript integration to minimize runtime errors.
- Data Visualization — Interactive and responsive charts (Pie, Bar, Line).
- Fully Responsive — Works perfectly on Desktop, Tablet, and Mobile.
- State Management — Efficient data fetching and caching with RTK Query.
| Package | Purpose |
|---|---|
@reduxjs/toolkit |
Logic and state management |
react-redux |
React bindings for Redux |
@nivo/core & @nivo/pie |
Advanced data storytelling |
recharts |
Simple and flexible charts |
tailwindcss |
Utility-first styling |
lucide-react |
Beautiful UI icons |
This project was built as a deep dive into:
- Redux Toolkit — Mastering complex state management.
- TypeScript — Implementing interfaces and types in a real-world app.
- Chart Integration — Handling dynamic data in visualization libraries.
- RTK Query — Streamlining API calls and server-state synchronization.
1. Clone the repository:
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name2. Install dependencies:
npm install3. Start the development server:
npm run dev4. Build for production:
npm run buildSinikdho — Passionate Developer | MERN Stack Learner