Bazaar Admin is the internal backoffice panel of the Bazaar marketplace platform, built with Next.js and TypeScript. It gives platform administrators full visibility and control over the platform: managing users (block/unblock), browsing the product catalog, tracking orders, and monitoring real-time business metrics through interactive charts and KPI cards. The panel connects directly to the Bazaar microservices backend via a shared HTTP service layer.
- App Architecture
- Repository Map
- Technology Stack
- Getting Started
- Pages & Features
- Building & Deployment
- Code Quality & CI
- Contributing
Bazaar Admin is structured around Next.js App Router for file-based routing, using a layered architecture that separates concerns across pages, modules, components, services, and shared utilities.
┌─────────────────────────────────────────────────────────┐
│ Pages │
│ (app/ — Next.js App Router file-based routes) │
├─────────────────────────────────────────────────────────┤
│ Modules │
│ (modules/ — feature-scoped logic and UI) │
├─────────────────────────────────────────────────────────┤
│ Components │
│ (components/ — AdminHeader, AdminSidebar, charts, UI) │
├───────────────────────┬─────────────────────────────────┤
│ Layouts │ Hooks │
│ (AdminLayout — │ (useAuthGuard, useTheme, │
│ sidebar + header) │ useCurrentAdmin, etc.) │
├───────────────────────┴─────────────────────────────────┤
│ Services │
│ (HTTP layer — auth, users, catalog, orders) │
├─────────────────────────────────────────────────────────┤
│ Bazaar Backend │
│ (REST API gateway — microservices) │
└─────────────────────────────────────────────────────────┘
- File-based routing via Next.js App Router — pages live in
app/, grouped with(admin)/without affecting the URL - Protected routes via
useAuthGuard— enforces authentication before rendering any admin page - AdminLayout wraps all authenticated pages with
AdminSidebarandAdminHeader - Service layer — all HTTP calls go through
base.ts, which injects auth tokens and handles errors - Static export — the app is built as a fully static site (
output: 'export') and served via Render - Theming via
next-themes— supports light and dark mode
bazaar-admin/
├── src/
│ ├── app/ # App Router pages
│ │ ├── layout.tsx # Root layout: theme provider
│ │ ├── page.tsx # Root redirect to login
│ │ └── (admin)/ # Route group: authenticated pages
│ │ ├── layout.tsx # Admin layout (sidebar + header)
│ │ ├── metrics/page.tsx # Metrics dashboard
│ │ ├── users/page.tsx # User management
│ │ ├── products/page.tsx # Product catalog
│ │ └── orders/page.tsx # Order management
│ │
│ ├── modules/ # Feature-scoped UI and logic
│ │ ├── login/ # Login screen, form, background, header
│ │ ├── metrics/ # Metrics page orchestrator
│ │ ├── users/ # Users page orchestrator
│ │ ├── products/ # Products page orchestrator
│ │ └── orders/ # Orders page orchestrator
│ │
│ ├── components/ # Reusable UI components
│ │ ├── AdminHeader.tsx # Top navigation bar
│ │ ├── AdminSidebar.tsx # Side navigation menu
│ │ ├── LoginButton.tsx # Login submit button
│ │ ├── LoginFieldItem.tsx # Form field wrapper
│ │ ├── UserAvatar.tsx # Avatar with fallback
│ │ ├── metrics/ # Chart components (KPI, time series, etc.)
│ │ │ ├── CategoryMetricsCharts.tsx
│ │ │ ├── ChartCard.tsx
│ │ │ ├── CustomTooltip.tsx
│ │ │ ├── KpiCards.tsx
│ │ │ ├── MetricsHeader.tsx
│ │ │ ├── StatusDistributionChart.tsx
│ │ │ ├── TimeSeriesCharts.tsx
│ │ │ └── TopProductsRanking.tsx
│ │ └── ui/ # Shadcn/ui primitives + custom atoms
│ │ ├── DataTable.tsx # Generic sortable/filterable table
│ │ ├── StatusBadges.tsx # Order/user status badges
│ │ ├── StatCard.tsx # KPI stat card
│ │ ├── SkeletonTable.tsx # Loading skeleton for tables
│ │ ├── EmptyState.tsx # Empty state placeholder
│ │ ├── ConfirmModal.tsx # Confirmation dialog
│ │ ├── UserFilters.tsx # Filter controls for user table
│ │ ├── ImageWithFallback.tsx
│ │ ├── ThemeToggleButton.tsx
│ │ └── … # Shadcn/ui base components
│ │
│ ├── layouts/
│ │ └── AdminLayout.tsx # Sidebar + header wrapper for all admin pages
│ │
│ ├── services/ # HTTP service layer
│ │ ├── base.ts # Generic fetch wrapper with auth & error handling
│ │ ├── auth.ts # Login, token management
│ │ ├── users.ts # User listing and block/unblock
│ │ ├── catalog.ts # Product catalog
│ │ └── orders.ts # Order operations
│ │
│ ├── common/
│ │ ├── hooks/ # useAuthGuard, useCurrentAdmin, useMetricsData, useTheme
│ │ ├── helpers/ # dateFormat, formatCurrency, metrics, metricsExport, login
│ │ ├── interfaces/ # TypeScript types (auth, users, products, orders, metrics)
│ │ ├── constants/ # Column definitions, status badge config, layout constants
│ │ └── utils/ # Error handlers, form validation
│ │
│ ├── lib/
│ │ ├── utils.ts # Tailwind class merging utility
│ │ ├── mockOrders.ts # Mock data for orders (dev)
│ │ ├── mockProducts.ts # Mock data for products (dev)
│ │ └── mockUserInfo.ts # Mock data for users (dev)
│ │
│ └── styles/
│ ├── globals.css # Base styles and CSS reset
│ ├── tailwind.css # Tailwind directives and design tokens
│ ├── theme.css # CSS variables for light/dark themes
│ └── themes/login.tsx # Login page theme overrides
│
├── public/ # Static assets
├── .github/workflows/ci.yml # CI: lint, format, type-check + Render deploy
├── next.config.ts # Next.js config (static export)
├── tailwind.config.mjs # Tailwind config
└── tsconfig.json # TypeScript strict config with @/* alias
The route group
(admin)is a Next.js App Router group — it does not appear in the URL.
| Category | Technology | Version |
|---|---|---|
| Framework | Next.js (App Router) | 16.2.3 |
| Language | TypeScript | ~5.x |
| Styling | Tailwind CSS | 4.x |
| UI Components | Shadcn/ui + Radix UI | latest |
| Icons | Lucide React | 1.8.0 |
| Charts | Recharts | 3.8.1 |
| Notifications | Sonner | 2.0.7 |
| Themes | next-themes | 0.4.6 |
| Forms | react-hook-form | 7.72.1 |
| Animations | Motion | 12.38.0 |
| Auth Storage | react-secure-storage | 1.3.2 |
| Linting | ESLint + Prettier | 9.x / 3.x |
| Git Hooks | Husky | 9.1.7 |
| Deploy | Render (static export) | — |
- Node.js (v20+ recommended)
git clone https://github.com/Baza-ar/bazaar-admin
cd bazaar-admin
npm installCreate a .env.local file at the project root:
NEXT_PUBLIC_API_URL=<backend gateway URL>npm run devOpen http://localhost:3000 in your browser.
| Page | Route | Description |
|---|---|---|
| Login | / |
Admin login with access/refresh token management |
| Feature | Route | Description |
|---|---|---|
| Metrics dashboard | /(admin)/metrics |
KPI cards, time-series charts, category breakdown, top products ranking, order status distribution |
| User management | /(admin)/users |
Paginated user table with search, filtering, and block/unblock actions |
| Product catalog | /(admin)/products |
Browse and inspect all platform products |
| Order management | /(admin)/orders |
View and track all platform orders |
The app is configured to produce a fully static export:
npm run build # generates the static export in out/
npm run start # serves it locally with npx serve outPushes to main automatically trigger a Render deploy via a webhook configured in GitHub Actions. No manual steps are required — the CI pipeline runs checks first, and the deploy job only fires if they pass.
npm run lint # ESLint
npm run format # Prettier format
npm run format:check # Prettier check (CI mode)
npm run type-check # TypeScript type check (tsc --noEmit)Git hooks via Husky run lint and format checks automatically before each commit.
Every push and pull request triggers a single job that runs three checks in parallel:
| Check | Tool | Command |
|---|---|---|
| Lint | ESLint | npm run lint |
| Format | Prettier | npm run format:check |
| Type Check | TypeScript | npm run type-check |
On a successful run against main, a second job fires the Render deploy webhook.
See .github/workflows/ci.yml for the full configuration.
The UI was designed in Figma — refer to the wireframe before implementing new pages or components.
Before contributing, read AGENTS.md — it documents the conventions used across the codebase.
| Branch | Purpose |
|---|---|
main |
Production-ready code |
feature/* |
New features |
fix/* |
Bug fixes |
revert/* |
Reverts |
All changes go through pull requests. The CI pipeline must pass before merging.