Mallnline Developer Docs
Build integrations, embed widgets, and extend the Mallnline platform.
⚡ Quick Links
- 🧩 Component Library: Browse the UI kit — Buttons, Inputs, Cards, and more.
- ✦ Icon System: 89 SVG icons, gallery, and customization workflow.
- 🏗️ Management Features: Widgets, Designer, Domains, and Settings.
- 🏬 Mall Sections & Taxonomy: How Malets are organized into categories.
- ⭐ Community Features: Reviews, Votes, SLA tracking, Blogs, and Moderation.
- 🔔 Alerts & Notifications: Toasts, session warnings, rate-limit feedback.
- 📄 Informational Pages: All 17 footer destination routes.
- 🍔 Food Court: Restaurant Malet configuration and KDS attributes.
- 🔍 Debugging & Testing: curl workflows, auth pipeline, and order consistency checks.
- 📱 Mobile SDK Architecture: KMP shared module and OIDC native auth flows.
- 🤝 Social Wishlist Collaboration: Architecture for custom lists sharing.
- 🔐 Malet Vaults: Encrypted settings and verification workflows.
🚀 Getting Started
1. Clone & Install
git clone git@github.com:mallnline/ngwenya-front.git
cd ngwenya-front
pnpm install
2. Start Dev Server
pnpm dev
Runs on localhost:5173 with HMR. Proxies forward /graphql and /api/auth to backend.
3. Build Widget Bundle
pnpm build:widget
Produces dist/widget/ucart.js for external embedding.
🏗 Architecture
| Layer | Technologies |
|---|---|
| Frontend | SvelteKit 2, Svelte 5 Runes, Vite 8, TypeScript |
| Design System | $mall Tokens, CSS Variables, Custom Icons |
| Backend | NestJS 11 Gateway, Hive Gateway, GraphQL Federation |
| Widget SDK | Standalone IIFE, Svelte 5 mount(), Shadow DOM (See Mobile SDK Architecture) |
📋 Quick Reference
| Command | Description |
|---|---|
pnpm dev |
Start dev server |
pnpm build |
Production build |
pnpm check |
Type checking |
pnpm lint |
ESLint + Prettier |
pnpm test:unit |
Vitest unit tests |
npx playwright test |
E2E Playwright tests |
pnpm build:widget |
uCart widget bundle |