React Admin Dashboard

Note: This project is intended for students who have completed the React fundamentals or the Learn React section of the official React documentation.

Contact:(mailto:oabumotlaq@gmail.com)

A modern and responsive Admin Dashboard built with React 19 and Vite, using Material UI for the interface and Recharts for data visualization.

This project was built as a practical React project to apply core React concepts such as state management, component communication, Context API, useReducer, custom hooks, CRUD operations, routing, and localStorage persistence.

Features

• Responsive Admin Dashboard
• Dashboard statistics and charts
• Users management
• Products management
• Orders management
• CRUD operations
• Search and filtering
• Pagination
• View, add, edit, and delete dialogs
• Order status management
• Light / Dark mode
• Theme persistence using localStorage
• React Router navigation
• Responsive sidebar and navbar
• Empty states and basic form validation
• 404 Not Found page

Technologies

• React 19
• Vite
• Material UI (MUI)
• Material Icons
• React Router
• Recharts
• JavaScript (ES6+)
• Context API
• useReducer
• Custom Hooks
• localStorage

React Concepts Practiced

This project focuses on practical React fundamentals, including:

• JSX
• Functional Components
• Props
• State
• Event Handling
• Conditional Rendering
• Lists and Keys
• useState
• useEffect
• Controlled Components
• Form Validation
• Parent-Child Communication
• Callback Functions
• Derived Data
• Immutable State Updates
• Context API
• useContext
• useReducer
• Custom Hooks
• React Router
• CRUD Operations
• Theme Management
• localStorage Persistence

Project Structure

src/
├── components/
│   ├── dashboard/
│   │   ├── OrdersChart.jsx
│   │   ├── RecentOrders.jsx
│   │   ├── RecentUsers.jsx
│   │   ├── RevenueChart.jsx
│   │   └── StatCard.jsx
│   │
│   ├── layout/
│   │   ├── Layout.jsx
│   │   ├── Navbar.jsx
│   │   ├── Sidebar.jsx
│   │   └── layoutConstants.js
│   │
│   ├── orders/
│   │   ├── DeleteOrderDialog.jsx
│   │   ├── OrderDetailsDialog.jsx
│   │   ├── OrderFilters.jsx
│   │   ├── OrdersTable.jsx
│   │   ├── OrderStatusDialog.jsx
│   │   └── orderStatus.js
│   │
│   ├── products/
│   │   ├── DeleteProductDialog.jsx
│   │   ├── ProductDetailsDialog.jsx
│   │   ├── ProductDialog.jsx
│   │   ├── ProductFilters.jsx
│   │   ├── ProductForm.jsx
│   │   └── ProductsTable.jsx
│   │
│   └── users/
│       ├── DeleteUserDialog.jsx
│       ├── UserDetailsDialog.jsx
│       ├── UserDialog.jsx
│       ├── UserFilters.jsx
│       ├── UserForm.jsx
│       └── UsersTable.jsx
│
├── context/
│   ├── themeContext.js
│   ├── ThemeContext.jsx
│   └── useTheme.js
│
├── data/
│   ├── dashboard.js
│   ├── orders.js
│   ├── products.js
│   └── users.js
│
├── hooks/
│   └── useLocalStorage.js
│
├── pages/
│   ├── Dashboard.jsx
│   ├── NotFound.jsx
│   ├── Orders.jsx
│   ├── Products.jsx
│   ├── Profile.jsx
│   ├── Settings.jsx
│   └── Users.jsx
│
├── reducers/
│   └── ordersReducer.js
│
├── theme/
│   └── theme.js
│
├── App.jsx
├── App.css
├── index.css
└── main.jsx

Pages

Dashboard

Provides an overview of the application with:

• Statistics cards
• Revenue chart
• Orders chart
• Recent orders
• Recent users

Users

Users management page with:

• User list
• Search
• Status and role filters
• Pagination
• Add user
• Edit user
• View user details
• Delete user

Products

Products management page with:

• Product list
• Search
• Category and status filters
• Pagination
• Add product
• Edit product
• View product details
• Delete product

Orders

Orders management page with:

• Order list
• Search
• Status and payment filters
• Pagination
• View order details
• Update order status
• Delete order
• Empty state

Profile

Displays the current user's basic profile information.

Settings

Contains application settings, including the light/dark theme preference.

State Management

Different React state management techniques are used according to the responsibility of each state.

Context API

The theme state is managed globally using React Context:

ThemeContext
     │
     ├── Navbar
     │
     ├── Settings
     │
     └── Charts

This allows different components to access and update the current theme without passing props through multiple levels.

useReducer

Orders use useReducer because the page contains multiple related state transitions such as:

• Searching
• Filtering
• Pagination
• Viewing an order
• Editing an order
• Updating order status
• Deleting an order
• Resetting filters

The reducer keeps these state transitions centralized and predictable.

Custom Hook

The project includes a custom useLocalStorage hook.

It is currently used to persist the user's theme preference between page refreshes.

Data

The project currently uses local mock data instead of a backend API.

Data files:

src/data/
├── dashboard.js
├── orders.js
├── products.js
└── users.js

Users, products, and orders are currently managed in React state and are not persisted to localStorage.

Installation

Clone the repository:

git clone <https://github.com/abumotlaq/admin-dashboard>

Navigate to the project:

cd Admin-Dashboard

Install dependencies:

npm install

Start the development server:

npm run dev

Open the local development URL shown by Vite.

Build

To create a production build:

npm run build

To preview the production build:

npm run preview

Available Routes

/                 → Redirects to Dashboard
/dashboard        → Dashboard
/users            → Users
/products         → Products
/orders           → Orders
/profile          → Profile
/settings         → Settings
/*                → Not Found

Current Scope

This project currently focuses on the React frontend and uses mock data.

The following features are intentionally outside the current scope:

• Backend API
• Database
• Authentication
• Redux
• React Query / TanStack Query
• TypeScript

These can be added later as the project evolves.

Learning Goal

The main goal of this project is not only to build an Admin Dashboard, but to understand how React applications are structured and how different React concepts work together in a real application.

The project is being developed incrementally, with each phase introducing and applying new React concepts.

License

This project is for learning and personal development purposes.