Case study · 03
Vent
The next-generation rebuild of Vendorstack — a refreshed socio-commerce web product and a new native mobile app, built around an expanded feature set for vendors and creators.
- Role
- Frontend engineering · web + mobile
- Vertical
- Socio-commerce
- Geography
- Nigeria
- Year
- 2025—
Vent picks up where Vendorstack left off and expands the surface area on both ends: the web product is re-platformed onto modern frontend infrastructure, and a first-class React Native client lands beside it — both stitched into the same socio-commerce backend. The work covers feature parity with the existing product plus net-new flows the original wasn't shaped for: a Paystack-funded wallet, end-to-end light/dark theming, and a verified-business path with CAC and bank-account proofs.
Workstreams
Re-platform (web)
Migrated the product off Next.js Pages Router + styled-components + Ant Design + Rematch onto Next.js App Router, Tailwind v4 semantic tokens, an in-house UI layer, and Zustand. Same backend, same URLs the customers know, ground-up frontend. A multi-area gap audit drives the order of work; the audit document is the running source of truth for what still needs to land before the new web client fully replaces the old one.
Native mobile app
A first React Native client sharing the same backend as the web product — auth, feed exploration, orders, chat, and profile, with Firebase messaging wired for push. Brings vendor and creator workflows onto a surface customers actually live in, instead of a mobile-web compromise.
Wallet & payments
A Paystack-funded wallet sits inside the socio-commerce shell — fund flow, withdraw modal with a password handshake, withdrawal history, and bank-account CRUD per user. The product runs on a coin abstraction (one VentCoin = one Naira at deposit) so prices store as coins on the backend; the frontend renders coin values across the wallet surfaces and switches to Naira only inside the deposit modal where Paystack actually charges.
Theming system
Global light/dark mode built on Tailwind v4's `@theme` block — semantic tokens for background, foreground, card, muted, border, primary, accent. A sweep across more than 100 files replaced hardcoded slate / white-alpha / hex literals with the semantic utilities so the dark variant inherits cleanly without per-component branching. A pre-paint script in the document head reads the persisted preference and applies the class before first paint to avoid the flash.
Stack
- Next.js
- React Native
- React 19
- TypeScript
- Tailwind v4
- Zustand
- Paystack
Closing
Actively shipping. The web rebuild closes specific gaps caught in the audit while the original product stays in production for paying users; the mobile client lands beside it as the parity surface flips.
Have something to ship?