(03)
adsVase Platform
A social advertising platform — feed, reels, realtime chat and AI-assisted creation.
- Year
- 2025 — Now
- Role
- Senior Frontend
- Stack
- Next.js 16 · React 19 · TanStack Query · Socket.IO
- Status
- Building
(01) Overview
adsVase is a social advertising platform — creators publish ads, reels and vases, discover each other, chat in realtime and get AI help writing copy. As senior frontend I own the architecture end to end: a 52-route Next.js App Router application, plus the internal admin console the team operates it with.
It reads like a social network but earns like an ad platform: feeds, an explore/scout discovery surface, a TikTok-style reel composer with music and text overlays, direct messages over WebSockets, creator analytics, and Adora AI — the platform's own in-house assistant.
(02) The Challenge
Ship a media-heavy, social-grade product with a small distributed team: creation flows that can't lose work on flaky connections, video that behaves identically for uploads and YouTube embeds, realtime chat and notifications, and authentication solid enough to bill advertisers on.
(03) Architecture — and why
A design system of 37 custom primitives
Built on Radix with variant-driven styling instead of an off-the-shelf kit — every surface, from modals to image croppers, assembles from the same audited parts. That's what makes 2x rollout speed real rather than a slogan.
Composer steps as isolated modules
The ad composer is a 3-step wizard — media selection, format choice, form + live preview — where each step owns its state and validation. New ad formats slot in without touching the wizard shell.
Parallel + intercepted routes for overlays
Comments open as a modal over whatever you're browsing via Next.js route interception — but the same URL renders as a full page when shared. Deep links stay honest.
A BFF proxy layer in route handlers
Media uploads and authenticated calls stream through Next.js route handlers that forward bearer tokens to the NestJS backend — the browser never holds a direct line to the API with raw credentials.
Hardened Auth.js session layer
Proactive token refresh 60 seconds before expiry, user-ID pinning that kills the session if a refreshed token's subject doesn't match, and environment-scoped cookie names so staging can never poison production.
(04) Engineering Highlights
Drafts that survive anything
A two-layer autosave engine debounces composer state into localStorage and round-trips actual image files through base64 — with an explicit quota budget and graceful fallback. A crash, reload or dead battery never eats an ad draft.
One video player, two engines
A single hook drives both native <video> and the YouTube IFrame API — drag-to-seek, playback rate, volume and fullscreen behave identically, down to polling YouTube for the time updates its API doesn't emit.
Realtime, frugally
Chat and notifications ride two singleton Socket.IO connections that survive token rotation without reconnecting. Reel view-tracking batches into a set and flushes once per session — not one API call per swipe.
Adora AI, everywhere it helps
The in-house assistant writes ad copy inside the composer, enhances bios, suggests replies and holds a full chat — wired through dedicated server actions rather than bolted on as a widget.
An ops console to match
A second Next.js app for the internal team — moderation, audit log, user management and Recharts dashboards — so operating the platform never means poking the database.
A CI gate that boots the real app
Every merge passes lint, build and a smoke test that starts a production server and probes live routes — cheap insurance a small team actually maintains.
(05) The Flow
- 01
Creator opens the composer — ads, reels or vases in one modal
- 02
Drafts autosave locally, media included
- 03
Adora AI tightens the copy while a live preview mirrors every keystroke
- 04
Publish to the feed — discovery, chat and analytics take it from there
(06) Impact
2x
faster feature rollout on the shared design system
52
routes across the consumer app
37
design-system primitives powering every surface