Rank Tracker

Conversio Hub

Role

Frontend Developer (Intern)

Stack

Next.js 15, TypeScript, MongoDB, Mongoose, TanStack Table, Zustand, Recharts, Tailwind CSS

Year

2024–2025

Rank Tracker branded thumbnail with logo and blue background

01/The Constraint

The first version was built during my internship at Conversio, laying the groundwork for the operator UI. After the internship I rebuilt the project as a standalone portfolio piece with its own data layer. The challenge: create a dense, operator-grade interface that handles thousands of keywords across multiple domains, with inline charts, composable filters, and a modular report builder — all backed by a multi-tenant sandbox so every visitor gets an isolated demo session with seeded data.

02/The Architecture

MongoDB stores domains, keywords, tags, notes, and reports. The multi-tenant isolation uses an overlay model: a shared immutable seed tenant provides baseline data, and each visitor gets a per-session overlay with copy-on-write semantics and tombstone-based deletions. All mutations go through server actions into a service layer backed by Mongoose models. A daily Vercel cron job prunes expired tenant overlays. The keyword table uses TanStack Table with virtualized rendering, column pinning, and composable filter predicates — position range, country, tags, keyword search — that can combine into a single pipeline. Three Zustand stores handle optimistic UI mutations for keywords, reports, and the main tracker state.

03/The Interface

The domain view shows keyword counts, average position, clicks, impressions, and top-ranking keywords with date-range comparison. Per-keyword rows include sparkline position charts via Recharts, daily stats with current versus previous period deltas, and expandable detail with landing pages, search volume, and notes. The dashboard aggregates eight scorecards with trend indicators and position, click, and impression graphs over selectable time ranges. The report builder lets operators compose modular content blocks — text, scorecards, graphs, metrics, highlights, top keywords, conclusions — with drag-and-drop reordering via dnd-kit and resizable block widths from full to quarter. Content gap intelligence surfaces optimization opportunities, new content gaps, and CTR improvements from Google Search Console data.

Dense keyword ranking table with inline sparklines and composable filters
Report builder with drag-and-drop content blocks and resizable widths