Demo Analytics Dashboard

A modern , responsive dashboard application built with Next.js 14 (App Router), Material UI, and Redux Toolkit. Features user authentication, data visualization, and comprehensive user management.

🚀 Features

✅ Authentication System

• Login Page
• Session Management
• Protected Routes
• Logout Functionality

✅ Navigation & Layout

• Responsive Sidebar
• App Bar
• Mobile Support
• Route Protection

✅ Dashboard Pages

• Home/Overview
• Analytics Dashboard
• Users Management

✅ Data Management

• Redux Toolkit
• API Integration
• Error Handling
• Loading States

✅ Technical Implementation

• Next.js App Router: Modern routing system
• Material UI: Professional component library
• TypeScript: Full type safety
• Responsive Design: Mobile-first approach

🛠 Tech Stack

Category	Technology	Purpose
Framework	Next.js 14 (App Router)	React framework with SSR/SSG
UI Library	Material UI (MUI) v5	Component library and design system
State Management	Redux Toolkit	Predictable state container
Language	TypeScript	Type safety and developer experience
Data Source	DummyJSON API	RESTful API with 100+ user records
Testing	Jest	Unit and integration testing

📋 Prerequisites

• Node.js: 18.0.0 or higher
• npm: 8.0.0 or higher

🚀 Getting Started

1. Installation

```bash

Clone the repository

git clone cd mui-task

Install dependencies

npm install

```

2. Development Server

```bash

Start the development server

npm run dev

```

3. Access the Application

Open http://localhost:3000 in your browser.

4. Run Tests

```bash

Run all tests

npm test

Run tests in watch mode

npm run test:watch

Generate coverage report

npm run test:coverage ```

🔑 Demo Credentials

Use these credentials to access the dashboard:

• Email: `[email protected]`
• Password: `demo2024`

Star this repository if you found it helpful!