Full-stack Frontend Engineer on website-v2 and admin-v2 — building and iterating commerce and ops UIs against NestJS APIs.

Contributions

Built and iterated website-v2 and admin-v2 commerce and ops UIs against NestJS APIs
Merchant document verification UX: modal preview, rejection display, S3 re-upload, resubmit flows for sellers and dropshippers; admin document review panels
Checkout / repayment flows: unpaid order repayment after cart clear, Stripe 3DS confirm/sync patterns
Live chat on website and admin: Socket.io subscribe/send, multi-session listen, in-app + browser push-style alerts
Homepage middle banners wired to dynamic slider API (sliderPosition=middle), aligned top/middle/bottom with admin CMS
Hardened admin login so API/cookie failures surface as form errors instead of crashing the app
Shipping address UX (profile prefill, consistent form controls)
Consistent patterns: S3-first uploads, structured forms (no raw JSON editors), role-aware dashboards

1. Multi-role marketplace UX on one frontend

Challenge: Customers, sellers, and dropshippers share website-v2 but need different dashboards, permissions, and document flows without confusing navigation.

Solution: Role-scoped dashboard routes (/dashboard/[role]/…), shared auth store with current role, and feature gates per persona while reusing design system components.

2. Real-time support chat across two apps

Challenge: Customers chat on the website while agents work in admin; messages must sync live, support must see new tickets, and notifications should not spam when the user is already viewing the thread.

Solution: Socket.io /chat namespace with room subscribe, support room for new_chat_created, multi-session subscription on the inbox, and push helpers that skip self/system messages and active-thread focus.

3. Stripe checkout reliability

Challenge: Failed or incomplete payments leave unpaid orders; refreshing after place-order clears the cart and breaks naive “retry from cart” flows.

Solution: Dedicated repayment API path on the order, session storage for pending order id, 3DS confirm/sync helpers, and a repayment panel on order detail within the unpaid window.

4. Merchant document verification

Challenge: Sellers and dropshippers upload sensitive docs; admins must preview, approve/reject with reasons, and allow clean resubmission without raw URL pasting.

Solution: S3 presigned upload fields, document preview dialogs, rejection messaging, and admin review panels that map to backend document-review endpoints.

5. Auth cookies & server actions (admin)

Challenge: Login server actions could succeed at the API but fail to persist session cookies (Set-Cookie not exposed via headers.entries()), then redirect into a broken dashboard render (500).

Solution: Capture cookies via getSetCookie(), shared apply-auth-cookies helper, validate cookies were applied before redirect, and unstable_rethrow so Next redirects still work inside try/catch.

6. Dynamic marketing content vs static placeholders

Challenge: Homepage middle banners were hardcoded while top/bottom already used the dynamic slider API — and bottom incorrectly queried middle.

Solution: Middle grid loads sliderPlacement=homepage&sliderPosition=middle; bottom uses bottom; fallbacks keep the page usable if CMS is empty.

7. Ops density without chaos (admin)

Challenge: Admin needs dense tables and forms (products, fulfillments, payouts, verification) without becoming an unusable spreadsheet clone.

Solution: Shared table/filter patterns, server actions with toast feedback, structured forms, and Shopify-admin-like clarity (per product design principles).

8. File uploads everywhere

Challenge: Many entities need images/docs (products, stores, chat, KYC). Pasting URLs is error-prone and inconsistent.

Solution: Platform rule: upload via S3 presign → PUT → store publicUrl; show type/size limits, progress, preview, and remove-before-submit.

1. Commerce platforms are workflow products

Optimize for completing jobs (checkout, approve seller, fulfill, refund), not decorative dashboards
Equal craft for buyer and merchant surfaces builds trust

2. Real-time needs product rules, not just sockets

Subscribe to the right rooms; dedupe notifications; respect visibility and active thread
Separate chat namespace from notifications namespace keeps concerns clear

3. Payments fail in the real world

Design repayment and 3DS recovery as first-class UX
Never assume cart state survives a successful place-order

4. Verification is a product surface

Rejection reasons and re-upload paths matter as much as “approved”
Admins need preview + structured review, not JSON blobs

5. Next.js server actions are still servers

Cookie/header edge cases can turn into production 500s
Always return actionable { error } to the form; never let ops failures crash the login page

6. CMS alignment across apps

Admin slider positions must match website fetch params (top / middle / bottom)
Fallbacks prevent empty homepage sections during content gaps

7. Monorepo discipline

Frontend-only changes against a documented API contract reduce thrash
Shared UX rules (S3 uploads, no raw JSON fields) keep both apps coherent

Impact Highlights

Reduced merchant onboarding friction via document review UX
Recoverable unpaid checkouts via repayment flow
Real-time support for marketplace and ops staff

Buzfi is a three-app monorepo: website-v2 is the multivendor storefront plus customer / seller / dropshipper dashboards (Next.js); admin-v2 is the platform administration and support ops panel (Next.js); backend-v2 is the NestJS API with WebSockets, jobs, and integrations.

Both frontends talk to backend-v2 (NestJS), which sits on PostgreSQL (Drizzle), MongoDB (Mongoose for chat / support-style data), Redis + BullMQ, plus Elasticsearch, S3, Stripe, FCM, and SMTP.

The backend is modular (40+ Nest modules), including: auth, email, admin, users, customer, seller, dropshipper, partners, suppliers, stores, products, product-bulk-upload, bulk-image-upload, brands, categories, collections, attributes, tags, reviews, dynamic-slider, countries/states/cities, cart, user-addresses, user-shipping-addresses, wishlist, coupon, commission-config, supplier-shipping-rule, store-shipping-rule, shipping, order, fulfillment, stripe, accounts, invoice, return-refund, notifications, chat, support-tickets, contact-us, search, files, and audit-logs.

Frontends use cookie-based JWT sessions (admin also supports bearer for chat sockets), Zustand for client state, Zod for validation, and Socket.io clients for live chat and notifications. Marketing homepage sections consume the dynamic slider API by placement and position. Media and KYC files go through S3 presigned uploads end-to-end. Admin product bulk flows also cover bulk image upload; marketplace users get help-support inbox alongside live chat.

Feature inventory

Auth: Login/signup, password reset/set/change, Google OAuth, role switch, add-role registration, admin invite set-password
Discovery: Home CMS sliders, categories, brands, collections, stores, product filters, global search
Commerce: Cart, coupons, Stripe checkout/3DS, repayment, orders, cancel, wishlist
Addresses: Shipping address CRUD; profile/contact defaults
Returns: Customer/merchant return requests; admin return-refund + Stripe refund
Seller ops: Stores, shipping rules, products/variants, bulk CSV, fulfillments, stats, payouts, documents
Dropshipper: Buyer hub + identity/tax documents
Support: Live chat (web + admin), support tickets/inbox, contact-us API
Admin catalog: Categories, collections, brands, attributes/values, tags, Buzfi vs seller products, bulk product + image upload
Admin money: Orders, fulfillments, invoices create/status, payouts, commissions, KAM-oriented support payouts
Admin users: Admins, customers, sellers, dropshippers; ban/approve; identity/account/document review
Marketing: Coupons, dynamic sliders
Geo: Countries, states, cities
Platform: S3, ES search, FCM, email, BullMQ, audit logs, shipping engine

Notable API / realtime contracts

REST under NestJS + Swagger
WebSocket /chat: subscribe_to_chat, send_message, receive_message, new_chat_created, assignment/escalation events
WebSocket /notifications: role-scoped rooms for live alerts
Stripe payment intents / repayment / refunds
POST /files/s3/pre-signed-url for uploads
Product bulk import + bulk image upload endpoints
Support tickets / contact-us / commission-config / audit-logs modules