| Common/Website |
-
Multilingual support for 6 languages (English, Chinese,
French, Portuguese, Arabic, Spanish) with dynamic translation.
-
Full landing page with 7 tabs (Metals, Finance, Solutions,
About, Language Translate, Sign In, Contact), including
dropdowns for 8 metal industries (Aluminium, Copper, Lithium,
Iron Ore, Other Base Metals, Other Battery Metals, Industrial
Minerals, Other), each with dedicated sub-pages.
-
Contact form that submits inquiries for admin follow-up and
onboarding.
-
WhatsApp API integration for live chat support (bottom-right
icon).
-
Static pages for Terms and Conditions, Privacy Policy,
Cancellation Policy, managed via CMS.
|
-
Multilingual support for 3 languages (English, Chinese,
Japanese) with basic dynamic translation (via next-intl).
-
Full landing page with 7 tabs (using provided text copies) and
Metals dropdown for all 8 industries (static placeholders for
sub-pages; implement core navigation).
-
Contact form that emails admin (implement basic submission).
- Omit WhatsApp API entirely.
- Static hardcoded Terms/Privacy pages.
|
-
Plan: Use Next.js for static routes (/en,
/zh, /ja) with next-intl for locale detection and JSON-based
translations. Create layout with 7 tabs as links; Metals tab
as dropdown linking to static pages (e.g., /metals/aluminium
with markdown-rendered text). Contact form: POST to backend
endpoint, send email via Nodemailer. Static Terms/Privacy as
hardcoded HTML.
-
Tools/Tech: Next.js, next-intl,
Node.js/Express (API), Nodemailer, Google Fonts (Noto Sans
CJK), Vercel (hosting).
-
Flow: User visits → Middleware detects locale
→ Renders landing in selected language → Click tab/dropdown →
Navigates to static page → Submit contact form → Backend
emails admin.
|
| Buyer Portal - Registration & Profile |
-
Registration with subscription payment (via card, cash,
wallet, third-party gateways like Stripe/Worldpay), OTP
verification, and detailed profile creation (primary/secondary
contacts, MD/CEO details, bank info).
-
Profile edits, invite secondary users, settings (language,
password, notification toggles).
|
-
Basic registration with test subscription (Stripe test mode),
email verification only (simplify profile to company name and
contacts only, omitting MD/CEO/bank details).
- Basic profile edits and password settings only.
|
-
Plan: Build forms in Next.js. Registration:
POST to backend, store user in PostgreSQL, send verification
email with token link via Nodemailer, integrate Stripe
Checkout (test mode). Profile: GET/PUT APIs for fetch/update.
Verify email via callback URL with token validation.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Nodemailer, Stripe (test mode), bcrypt (hashing),
JWT (auth).
-
Flow: User submits registration → Backend
creates user, sends email → User clicks link → Verifies → Logs
in → Views/edits profile → Updates DB.
|
| Buyer Portal - Dashboard & Browsing |
-
Dashboard with full grid of metal icons, advanced filters (by
African country, verified suppliers with green/amber lights).
-
Detailed viewing of supplier prices, documents, photos/videos.
|
-
Dashboard with grid for 2-3 metal categories, basic country
filter, view prices with green/amber lights.
-
View basic supplier details/photos (use static mocks for
docs).
|
-
Plan: Fetch metals via GET
/metals?country=filter API. Render grid as React components
(cards). Apply green/amber lights via CSS based on DB
verification flag. Fetch photos from storage.
-
Tools/Tech: Next.js/React, Node.js/Express,
PostgreSQL, Supabase Storage or MinIO (photos).
-
Flow: Authenticated user loads dashboard →
API fetches metals → Apply filter client-side → Click metal →
Show details/prices/lights/photos.
|
| Buyer Portal - Buy/Bid Flows |
-
Complete Buy/Bid flows: Accept price or suggest bid
(+$10/tonne brokerage auto-added in backend), submit
incoterms/delivery requirements, digitally sign brokerage
agreements.
-
Selection of third-party inspection agencies (list or custom
input; full API booking in Version Two).
-
Selection of logistics companies/vessels (full API integration
in Version Two).
|
-
Basic Buy/Bid: Submit form with incoterms/price (+$10/tonne in
backend), acknowledge static agreement (checkbox).
- Static dropdown for inspections.
|
-
Plan: Create form in Next.js; POST to
backend, apply $10/tonne algorithm for bids, store order in
PostgreSQL, send email notifications. Agreement: Static PDF
link with checkbox confirmation. Dropdown: Hardcoded list.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Nodemailer.
-
Flow: View price → Select Buy/Bid → Fill form
(incoterms/price/dropdown) → Backend adds brokerage if bid →
Submit → Acknowledge agreement → Save order → Notify
supplier/admin via email.
|
| Buyer Portal - Orders & Documents |
-
Order management: View/update quantities, subtotals, checkout
with contract signing, payment tracking, expected delivery
dates, past records.
-
Document exchange: View/sign/exchange Purchase Contracts,
Commercial Invoices, Bills of Lading (Version Two).
- Ratings and reviews post-delivery.
|
- Orders: View simple status (e.g., pending/accepted).
- Mock documents with static PDF links.
- Omit ratings/reviews entirely.
|
-
Plan: Build order list page in Next.js; GET
/orders API to fetch status from PostgreSQL. Documents: Serve
hardcoded PDF URLs or from storage.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Supabase Storage or MinIO (PDFs).
-
Flow: Load orders → Fetch list from API →
Display status/links → Click link → View mock PDF.
|
| Buyer Portal - Notifications & Support |
-
Notifications for all actions (account, contracts, orders,
payments, updates, deliveries) via email/SMS/push/in-app.
- Contact support form for queries.
|
- Email notifications for submissions/orders only.
- Implement basic contact form (as in website).
|
-
Plan: Trigger emails via Nodemailer on events
(e.g., order submit). Contact form: POST to backend, send
email (same as website).
-
Tools/Tech: Next.js, Node.js/Express,
Nodemailer.
-
Flow: Event (e.g., bid submit) → Backend
sends email to recipients → Contact form submits → Emails
admin.
|
| Supplier Portal - Registration & Profile |
-
Free registration with admin KYC verification (manual in
Version One; national database API check in Version Two),
detailed profile.
- Profile edits, settings.
|
-
Free registration with manual admin verification, simple
profile.
- Basic profile edits (password change only).
|
-
Plan: Build forms in Next.js; POST to
backend, store pending user in PostgreSQL, email admin for
verification via Nodemailer. Admin sets status flag. Profile:
GET/PUT APIs for fetch/update, password change with bcrypt.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Nodemailer, bcrypt, JWT.
-
Flow: Submit registration → Backend creates
pending user, emails admin → Admin verifies → User logs in →
Edits profile → Updates DB.
|
| Supplier Portal - Product Management |
-
Dashboard for managing product categories, inventory, pricing,
payments.
-
Full product management: Add/update/list metals with prices,
photos/videos, documents, quantities, discounts, descriptions.
|
-
Dashboard for basic listings (2-3 metals), add/update (price,
photo, description).
- Limit to basic management.
|
-
Plan: Create dashboard in Next.js with CRUD
APIs (POST/GET/PUT) for products. Upload photos to storage via
multipart form. Store data in PostgreSQL.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Supabase Storage or MinIO.
-
Flow: Load dashboard → Fetch listings →
Add/update form → Submit to API → Save to DB/storage.
|
| Supplier Portal - Orders & Documents |
-
Order handling: View/accept Buy/Bid notifications, sign
brokerage agreements, upload/download documents (contracts,
invoices).
-
Verification ticks (blue for verified, amber for pending).
|
- View/accept Buy/Bid, acknowledge agreement (checkbox).
- Basic file upload for docs.
- Implement verification ticks.
|
-
Plan: Build order list in Next.js; GET
/orders API for details; PUT to accept (update status). Upload
docs via multipart form to storage. Ticks: Render DB flag as
CSS icons.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Supabase Storage or MinIO.
-
Flow: Load orders → View
details/notifications → Accept → Update DB → Upload doc →
Notify buyer/admin.
|
| Supplier Portal - Payments & Notifications |
-
Payment management: View/confirm receipts, transaction
details.
-
Notifications for orders, payments, inventory shortages,
document uploads (email/SMS).
|
- View test transactions only.
- Email notifications for new actions only.
|
-
Plan: Build payment list in Next.js; GET
/payments API for mock transactions. Trigger emails via
Nodemailer on order/bid events.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, Nodemailer.
-
Flow: Load payments → Fetch/display mock
data; Events trigger emails to supplier.
|
| Admin Portal - Dashboard & Stats |
- Secure login with forgot password.
-
Comprehensive dashboard stats (total users, revenue, orders,
ratings, recent joins, pending KYC) with filters/sorts.
|
- Basic login.
- Simple dashboard stats (user/order counts).
|
-
Plan: Build login form in Next.js with JWT
auth. Dashboard: GET APIs for user/order counts from
PostgreSQL, render as simple metrics.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL, JWT, bcrypt.
-
Flow: Admin logs in → Load dashboard → API
fetches counts → Display metrics.
|
|
Admin Portal - User & Verification Management
|
-
User/supplier/buyer management: Lists, searches,
verification/delisting, block/delete, add sub-admins, XLS
exports.
-
KYC and ratings management: Update verifications and supplier
ratings based on deliveries.
|
- Basic lists, searches, verify (set lights), block.
- Manual KYC verification only.
|
-
Plan: Build table in Next.js; GET /users API
with search param; PUT APIs for verify/block. Store flags in
PostgreSQL.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL.
-
Flow: Load user list → Search → Select user →
Verify/block → Update DB flags.
|
| Admin Portal - Product & Order Management |
- Category/sub-category management: Full CRUD.
- Product listing management: View/edit/delete.
-
Order management: View details, assign third-party
logistics/delivery (with SMS notifications), status updates.
|
- View basic products/orders.
- Basic order views/status.
|
-
Plan: Build list views in Next.js; GET APIs
for products/orders from PostgreSQL, display status.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL.
-
Flow: Load section → Fetch data → Display
lists/status.
|
| Admin Portal - Payments, CMS & Reports |
-
Payment management: View all transactions (subscriptions,
brokerage, purchases), sorts, details.
-
CMS management: Edit static pages (Privacy, Terms, Contact
Us).
-
Reports: Detailed exports for users, contracts, payments,
deliveries.
|
- View test transactions.
- Omit CMS entirely.
- Omit reports entirely.
|
-
Plan: Build payment list in Next.js; GET
/payments API for mock transactions from PostgreSQL.
-
Tools/Tech: Next.js, Node.js/Express,
PostgreSQL.
-
Flow: Load payments → Fetch/display mock data.
|
| Admin Portal - Notifications & Settings |
-
Notifications: Compose/send broadcasts, view read status.
-
Settings: Change password/language, notification toggles,
manage sub-admins.
|
- Receive emails for registrations/bids.
-
Basic settings (password change only; no admin UI language
switching, notification toggles, sub-admins).
|
-
Plan: Trigger emails via Nodemailer on
registration/bid events. Build settings form in Next.js; PUT
API for password change with bcrypt.
-
Tools/Tech: Next.js, Node.js/Express,
Nodemailer, bcrypt.
-
Flow: Event triggers email; Load settings →
Change password → Update DB.
|
| Integrations & System-Wide |
-
Payments: Full integration for subscriptions, brokerage,
purchases (Stripe, etc.), with confirmations.
-
Notifications: Real-time (WebSockets), email/SMS/push for all
events.
-
Documents: Upload/download/sign/exchange (full in Version
Two).
-
Version Two enhancements: API integrations for KYC, inspection
bookings, logistics/vessels, company registration
verification.
- Security: Full RBAC, encryption, logging.
-
Other: Invite users, logout, forgot password across portals;
scalability features like load testing.
|
- Test payments (Stripe test mode).
- Email notifications only.
- Basic file storage for photos/docs.
- Omit all Version Two APIs.
- Basic security (authentication).
-
Core logout; no invites, forgot password in non-admin portals,
advanced scalability.
-
Basic i18n library (next-intl) for language switching in
website and portals.
|
-
Plan: Integrate Stripe test mode for
subscriptions. Use Nodemailer for emails. Store files in
Supabase Storage or MinIO. Implement next-intl for
multilingual (JSON files, middleware for locale detection).
Use JWT for auth/logout. Basic authentication with bcrypt.
-
Tools/Tech: Stripe (test mode), Nodemailer,
Supabase Storage or MinIO, next-intl, JWT, bcrypt,
Node.js/Express, PostgreSQL.
-
Flow: User action (e.g., registration) → Auth
check → Process (e.g., payment test) → Notify via email →
Store files → Logout clears token. Language switch via
middleware.
|