NexaDash — Admin Dashboard & Operations Console

NexaDash is a portfolio-ready admin dashboard frontend built with React, Vite, Tailwind CSS, React Router, Recharts, and Lucide React.

The project demonstrates how a modern SaaS-style operations console can organize dashboard KPIs, analytics, tables, CSV workflows, product management, notifications, and user preferences in one responsive interface.

---

Live Demo

View Live Demo

Key Features

Dashboard Overview

• KPI cards for revenue, orders, customers, and conversion rate.
• Revenue performance chart.
• Weekly orders chart.
• Recent orders preview.
• Recent activity feed.
• CSV report export from the dashboard data.

Analytics

• Time-range filter for 7 days, 30 days, and 12 months.
• Revenue and visitors trend chart.
• Acquisition channels bar chart.
• Product revenue mix donut chart.
• Insight cards for product-performance explanation.

Orders Management

• Searchable orders table.
• Status filtering.
• Sortable columns.
• Responsive mobile card layout.
• Empty state handling.
• CSV template download.
• CSV import workflow.
• Reset to default mock data.
• Imported data persistence through localStorage.

Customers Management

• Customer statistics cards.
• Searchable customer table.
• Status and segment filtering.
• Sortable columns.
• Responsive mobile card layout.
• CSV template download.
• CSV import workflow.
• Reset to default mock data.
• Imported data persistence through localStorage.

Products Management

• Product inventory list.
• Product summary cards.
• Search, category filtering, and status filtering.
• Sortable product data.
• Add product modal.
• Edit product modal.
• Delete product action.
• Product data persistence through localStorage.

Settings & Shell

• Editable local profile state.
• Light, dark, and system appearance controls.
• Notification preference controls.
• Dashboard behavior preferences.
• Responsive sidebar and topbar.
• Working notifications dropdown.
• Theme persistence through localStorage.

---

Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• React Router DOM
• Recharts
• Lucide React

State & Persistence

• React state
• Browser localStorage
• Mock data modules

---

Key Routes

Route	Purpose
/	Dashboard overview
/orders	Orders table, filters, sorting, and CSV import
/customers	Customers table, filters, sorting, and CSV import
/products	Product management mock workflow
/analytics	Analytics and reporting charts
/settings	Profile, preferences, and appearance controls

---

CSV Import Templates

Customers

id,name,email,status,orders,totalSpent,joined,segment
CUS-900,Ahmed Mostafa,ahmed@example.com,Active,5,1200,2026-04-25,VIP

Orders

id,customer,email,status,amount,date,payment,items
NX-2001,Ahmed Mostafa,ahmed@example.com,Processing,250,2026-04-25,Credit Card,3

The Customers and Orders pages include built-in template download buttons.

---

Local Setup

npm install
npm run dev

Production build:

npm run build
npm run preview

---

Available Scripts

npm run dev
npm run build
npm run preview
npm run lint

---

Project Structure

NexaDash/
├── src/
│   ├── components/
│   │   ├── analytics/
│   │   ├── dashboard/
│   │   ├── layout/
│   │   ├── products/
│   │   ├── settings/
│   │   ├── tables/
│   │   └── ui/
│   ├── data/
│   ├── hooks/
│   ├── pages/
│   ├── routes/
│   ├── utils/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
├── vite.config.js
└── README.md

---

Portfolio Positioning

NexaDash is best presented as a modern SaaS admin dashboard and operations console.

It is suitable for showcasing:

• Dashboard UI/UX design.
• Data visualization.
• Table-heavy admin workflows.
• CSV import and export behavior.
• Product management interactions.
• Local persistence.
• Responsive frontend architecture.

---

Current Scope Boundaries

This project is frontend-centered.

It does not include:

• A real backend database.
• Real authentication.
• Server-side permissions.
• Production file upload handling.
• Real notification infrastructure.
• Real analytics tracking.

Operational behavior is simulated locally to demonstrate UI workflows, data handling, and admin-dashboard product thinking.

---

Recommended Portfolio Screens

• Dashboard overview.
• Analytics page with charts.
• Orders page with filters and CSV import.
• Customers page with filters and CSV import.
• Products page with add/edit modal.
• Settings page with appearance controls.
• Notifications dropdown.
• Export Report action.

---

Portfolio Summary

NexaDash demonstrates the ability to design and implement a polished frontend admin dashboard with reusable React architecture, chart-based reporting, sortable and filterable tables, CSV import/export workflows, local persistence, and responsive SaaS-style UI polish.