NexusPulse — SaaS Analytics Admin Dashboard (React + TS)

NexusPulse is a production-ready SaaS analytics admin dashboard template built with React 18, TypeScript, and Tailwind CSS 3. It ships with a full mock API layer, so you can npm install, npm run dev, and immediately see a polished, clickable product — no backend setup required.

## What you get

**Full dashboard experience**
- Executive overview: 4 KPI cards, revenue area chart (7d/30d/90d toggle), traffic acquisition bar chart, top products list, recent orders table
- Orders management: sortable columns, status + search filters, pagination, inline edit/delete with confirm modals, one-click CSV export
- Customer directory: card/table view toggle, search, slide-out detail drawer with lifetime value + notes
- Product catalog: grid view with SVG illustrations, stock status badges, inventory valuation strip, category filter
- Settings: tabbed Profile / Notifications / Billing, form validation, toggle switches, invoice download

**Auth flows**
- Login, Register, Forgot Password
- "Fill Demo" button on login for instant reviewer access

**Search with keyboard navigation**
- Live suggestions as you type
- Arrow keys to navigate, Enter to select, Escape to dismiss
- Glowing Enter badge when input has text

**Design system**
- Light + dark mode (persisted to localStorage, respects system preference)
- Fully responsive: 320px to 1920px, no horizontal scroll
- Semantic HTML, aria-labels, keyboard-navigable modals, visible focus rings
- System font stack only (no Google Fonts — no licensing/network issues)

## Tech stack

- React 18.3 + TypeScript 5.6 (strict mode)
- Vite 5.4
- Tailwind CSS 3.4 (design tokens in tailwind.config.js)
- Recharts 2.13 for all charts
- React Router 6.28
- Lucide React for icons

## Architecture highlights

- Single mock data layer: every query goes through src/services/mockApi.ts. Swap in your real backend by editing ONE file — no component changes required.
- Typed interfaces: every entity (Order, Customer, Product, BillingPlan, etc.) has a strict TS interface in src/types/index.ts
- Zero any, zero @ts-ignore
- Reusable component library: Button, Card, Badge, Modal, Table, Sidebar, Topbar, CustomerDrawer, EmptyState, LoadingSkeleton, ErrorBoundary, SearchSuggestions
- Custom hooks: useTheme, usePagination, useLocalStorage
- Functional components + hooks only

## Deployment

Ships with vercel.json and public/_redirects configured for zero-config SPA routing on Vercel, Netlify, and Cloudflare Pages. Refresh any sub-route — no 404s.

For plain static hosts (S3, nginx), the README documents the required rewrite rule.

## What's NOT included

- No real backend (intentional — bring your own)
- No real authentication (mocked; wire to your own auth provider)
- No payment processing (billing tab is UI + mock data only)

## Who this is for

- SaaS founders who need a dashboard up in a day, not a week
- Developers who want a clean, typed, extendable React + TS starting point
- Agencies delivering admin interfaces to clients

## Support

Documentation is comprehensive: README.md covers install, folder structure, mock-to-real API swap, theme customization, and deployment. All dependencies are MIT/Apache-2.0 licensed. No paid libraries, no external services, no API keys.

Demo: https://nexuspulse-demo.netlify.app
Demo login: fill any email + password, or click "Fill Demo."