Nexus Admin UI

A production-grade, Web3-integrated admin dashboard built with React 18, Ant Design 5, Redux Toolkit & Vite

Live Demo · Documentation · Report Bug · Request Feature

---

Preview

A fully-featured admin interface designed for SaaS platforms and Web3 applications.

Dashboard	Analytics	Billing	Profile
Real-time KPI cards	Line/Bar charts	Transaction history	User management
Activity feeds	Revenue trends	Invoice tables	Role-based views

---

What This Project Solves

Modern SaaS and Web3 products need admin dashboards that are:

• Fast to load — Vite's HMR and tree-shaking ensure sub-second page transitions
• Enterprise-ready — Ant Design 5 brings a production-tested, accessible component system
• Web3-aware — Native Cardano wallet integration via MeshSDK lets users authenticate without a password
• State-consistent — Redux Toolkit prevents prop-drilling hell and keeps UI state predictable across pages
• Scalable — File-based routing via React Router v6 makes adding new pages a single-file operation

This project bridges the gap between a polished admin UI and the decentralised web — enabling dApp teams to ship admin tooling as fast as their smart contracts.

---

Architecture Overview

nexus-admin-ui/
├── src/
│   ├── pages/              # Route-level page components
│   │   ├── Home.jsx        # Main dashboard — KPIs, charts, activity feed
│   │   ├── Tables.jsx      # Data tables with sorting, filtering, pagination
│   │   ├── Billing.jsx     # Transaction history & invoice management
│   │   ├── Profile.jsx     # User profile & settings
│   │   ├── SignIn.jsx      # Authenticated login with form validation
│   │   └── SignUp.jsx      # Registration flow
│   ├── components/
│   │   ├── layout/         # Sidebar, Header, Main layout shell
│   │   └── chart/          # Reusable chart wrappers (Line, Bar, Area)
│   ├── redux/              # Redux Toolkit slices & store configuration
│   ├── router.jsx          # Centralised React Router v6 route definitions
│   ├── App.jsx             # Root component — theme & provider setup
│   └── main.jsx            # Vite entry point
├── public/                 # Static assets
├── index.html              # Vite HTML template
├── vite.config.js          # Vite + path alias configuration
├── .prettierrc             # Code formatting rules
└── package.json

---

Feature Highlights

Dashboard & Analytics

• KPI Summary Cards — Revenue, Users, New Signups, Sales with trend indicators
• Interactive Charts — Line charts for revenue trends, bar charts for weekly traffic
• Activity Timeline — Real-time event feed with avatar, action, and timestamp
• Responsive Grid — Ant Design's 24-column grid adapts from mobile to 4K displays

Billing & Transactions

• Transaction Table — Sortable, filterable table with pagination and CSV export
• Invoice Cards — Per-transaction detail view with status badges
• Payment Methods — Saved card management UI

User & Profile Management

• Profile Page — Avatar upload, bio editing, social links
• Role Display — Visual role/permission indicators
• Conversation History — Recent activity log per user

Authentication

• Sign In / Sign Up — Ant Design Form with built-in validation rules
• Protected Routes — Layout-level route guards
• Web3 Login — Connect a Cardano wallet via MeshSDK as an alternative auth method

Web3 Integration (Cardano / MeshSDK)

• Wallet Connect Button — One-click connect for Nami, Eternl, Flint and other CIP-30 wallets
• Wallet State in Redux — Connected address and balance stored globally, accessible from any page
• Graceful Fallback — UI degrades cleanly when no Web3 wallet is present

---

Tech Stack

Layer	Technology	Purpose
Framework	React 18	Component-based UI with concurrent rendering
UI Library	Ant Design 5	60+ accessible, production-tested components
State Management	Redux Toolkit	Predictable global state with minimal boilerplate
Routing	React Router v6	Declarative, nested route definitions
Build Tool	Vite 4	Lightning-fast HMR and optimised production builds
Web3 SDK	MeshSDK / @meshsdk/react	Cardano wallet connection & blockchain interaction
Icons	@ant-design/icons	1000+ SVG icons, tree-shakeable
Code Quality	ESLint + Prettier	Consistent formatting enforced at commit

---

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0
• A Cardano wallet browser extension (optional, for Web3 features)

Installation

# 1. Clone the repository
git clone https://github.com/asimsandhu/nexus-admin-ui.git

# 2. Navigate into the project
cd nexus-admin-ui

# 3. Install dependencies
npm install

# 4. Configure environment variables
cp .env.example .env
# Edit .env with your API base URL and other config

# 5. Start the development server
npm run dev

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

Available Scripts

Command	Description
npm run dev	Start Vite dev server with HMR
npm run build	Build optimised production bundle
npm run preview	Serve the production build locally
npm run lint	Run ESLint across all .jsx files
npm run format	Auto-format all files with Prettier

---

Configuration

Environment Variables

Create a .env file in the project root:

VITE_APP_NAME=Nexus Admin UI
VITE_API_BASE_URL=https://api.yourdomain.com
VITE_CHAIN_ID=mainnet

All variables must be prefixed with VITE_ to be exposed to the client bundle.

Vite Path Aliases

The vite.config.js configures @ as an alias for ./src, enabling clean imports:

// Instead of: import Sidebar from '../../../components/layout/Sidebar'
import Sidebar from '@/components/layout/Sidebar'

---

Adding a New Page

1. Create src/pages/YourPage.jsx
2. Add the route in src/router.jsx:

import YourPage from './pages/YourPage';
// Inside the router config:
{ path: '/your-page', element: <YourPage /> }

3. Add a menu item in src/components/layout/Sidebar.jsx

---

Deployment

Vercel (Recommended)

npm i -g vercel
vercel --prod

Netlify

npm run build
# Drag and drop the `dist/` folder to Netlify Drop

Docker

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

---

Contributing

Contributions are what make open source great. Any contribution is genuinely appreciated.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'feat: add AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

Please follow Conventional Commits for commit messages.

---

License

Distributed under the MIT License. See LICENSE for details.

---

Author

Asim Masood (asimsandhu)

Built with and a lot of — feedback, stars, and PRs are always welcome.

---

If this project helped you, please consider giving it a star — it keeps the motivation alive!