Ecommerce Dashboard

A modern admin dashboard for managing an e-commerce store - products, inventory, orders, customers, shipping, reviews, revenue, analytics, reports, and user profile.

It's a frontend-only SPA that talks to any REST backend. Set one environment variable (VITE_API_URL) and the entire app is repointed. No real backend yet? The repo ships with a json-server seed so you can run the full UI locally with one command.

---

Table of Contents

• Features
• Tech Stack
• Quick Start
• Configuration
• Using the API Client
• Mock Backend (json-server)
• Project Structure
• Scripts
• Backend Expectations
• Deployment
• Contributing
• License

---

Features

• Dashboard overview with key metrics, recent orders, top products, and notifications
• Product catalog management (create / edit / list)
• Inventory tracking with low-stock alerts and reorder flow
• Order management with status filtering and detail view
• Customer directory with search and segmentation
• Shipping method configuration
• Product reviews moderation
• Revenue dashboard (Chart.js)
• Analytics dashboard (Recharts) with traffic, demographics, and performance widgets
• Reports with date-range filtering and PDF export (jsPDF)
• User profile and settings pages
• Bearer-token auth wiring, with 401 auto-logout
• Toast notifications, modals, and responsive Tailwind UI

Tech Stack

Layer	Choice
Build / dev	Vite 5
UI framework	React 18
Routing	React Router 6
State	Redux Toolkit
UI components	Ant Design + Headless UI + Tailwind CSS
Icons	lucide-react, react-icons, Heroicons
Charts	Recharts, Chart.js (react-chartjs-2)
HTTP	Axios (env-driven baseURL)
Forms	Formik
Notifications	react-toastify
PDF export	jsPDF + jspdf-autotable
Mock backend	json-server

---

Quick Start

git clone <repo-url> ecommerce-dash
cd ecommerce-dash/frontend

npm install
cp .env.example .env

# Terminal 1 - mock backend
npm run server

# Terminal 2 - Vite dev server
npm run dev

Open http://localhost:5173.

Prefer to skip the mock backend and point at a real API? Edit .env, set VITE_API_URL, and run just npm run dev.

---

Configuration

The only thing you need to configure is the backend URL.

Create frontend/.env:

VITE_API_URL=https://api.your-backend.com

That value becomes the baseURL of the shared axios client at frontend/services/api.js. Every HTTP call in the app routes through that client, so this one variable repoints the entire dashboard.

⚠️ Restart npm run dev after editing .env - Vite reads env files at startup only. For production builds, env values are inlined at build time, so set them in your host's environment before npm run build.

---

Using the API Client

import api from "../../services/api";

// GET
const { data: products } = await api.get("/products");

// POST
await api.post("/orders", payload);

// PUT / PATCH / DELETE - same surface
await api.delete(`/products/${id}`);

The client automatically:

• Prefixes every request with VITE_API_URL
• Attaches Authorization: Bearer <token> when a token is stored (via services/token.js)
• Clears the stored token on 401 responses (effective auto-logout)

Token helpers:

import { setToken, getToken, clearToken } from "../../services/token";

setToken(loginResponse.data.token); // after successful login
clearToken(); // on logout

---

Mock Backend (json-server)

For local development without a real backend, the repo ships with json-server and a seed file at frontend/db.json.

cd frontend
npm run server       # serves db.json on http://localhost:5000

With VITE_API_URL=http://localhost:5000 in your .env, every page works end-to-end against this mock.

Available Endpoints

Each collection is a full REST resource - GET / POST / PUT / PATCH / DELETE on /<name> and /<name>/:id.

Endpoint	Used by
/products	Products Management
/inventory	Inventory page
/orders	Orders page
/customers	Customers page
/shippingMethods	Shipping page
/reviews	Reviews page
/notifications	Dashboard header notifications
/dashboardMetrics	Dashboard metric cards
/dashboardTopProducts	Dashboard top-products widget
/recentOrders	Dashboard recent-orders widget
/salesData	Reports - sales over time
/ordersData	Reports - order status breakdown
/reportsTopProducts	Reports - top products
/revenueByCategory	Reports - revenue by category
/customerGrowthData	Reports - customer growth
/transactions	Reports - transactions table
/revenueTopProducts	Revenue Dashboard top sellers
/analyticsTopProducts	Analytics Dashboard top sellers

db.json is both the seed file and the source of truth - json-server auto-persists every write, so edits survive restarts. Reset by checking out the file from git.

---

Project Structure

ecommerce-dash/
├── README.md
├── LICENSE
├── assets/                     # README screenshots
└── frontend/
    ├── public/
    ├── db.json                 # json-server seed
    ├── .env.example            # template - copy to .env
    ├── services/
    │   ├── api.js              # axios client (baseURL = VITE_API_URL)
    │   └── token.js            # localStorage auth-token helpers
    ├── src/
    │   ├── admin/
    │   │   ├── components/     # tables, modals, widgets
    │   │   │   ├── reports/    # reports view
    │   │   │   └── user/       # profile, edit profile
    │   │   ├── layout/         # dashboard shell + sidebar
    │   │   └── pages/          # Revenue, Analytics dashboards
    │   ├── App.jsx             # router
    │   ├── main.jsx            # entry
    │   └── NotFound.jsx
    ├── vite.config.js
    ├── tailwind.config.js
    ├── postcss.config.js
    ├── eslint.config.js
    └── package.json

---

Scripts

Run inside frontend/.

Command	Description
npm run dev	Start the Vite dev server on :5173
npm run server	Start json-server (mock backend) on :5000, watching db.json
npm run build	Production build → dist/
npm run preview	Preview the production build locally
npm run lint	Run ESLint

---

Backend Expectations

If you're plugging this into a real backend, it should expose the REST collections listed in the Mock Backend table - or you can adjust the path strings inside each page component to match your API.

Auth contract:

• Bearer tokens in Authorization headers
• Tokens are stored in localStorage under the key auth_token
• A 401 response clears the stored token (treat as session expired)

---

Deployment

Vite produces a fully static bundle - host it anywhere (Vercel, Netlify, Cloudflare Pages, S3 + CloudFront, Nginx, etc.).

cd frontend
VITE_API_URL=https://api.your-backend.com npm run build
# upload dist/ to your host

Important: VITE_* variables are inlined at build time, not read at runtime. If the API URL needs to differ per environment, build once per environment (or use your host's build-time env-var feature).

---

Contributing

1. Fork & branch from main
2. Run npm install in frontend/
3. Make your changes, keep npm run lint clean
4. Open a PR with a short description and screenshots for UI changes

---

License

Released under the MIT License. See the LICENSE file for the full text.