Case study 05 / Shopalong / Purchased
A new study needs data, not a new build
Shopalong is Purchased's shopper-research platform. People join a study from a research panel, answer surveys, upload receipts and earn a reward. Some studies also show them realistic Google and retailer result pages, to see what they notice and click. I built the participant web app from its first commit, and rebuilt how those result pages are made.
Result
Front-end developer
2022 – 2026
Next.js, React, TypeScript, Redux Toolkit, Node.js, cheerio
Participant app, survey engine, result-page mockups
The problem
Participants arrive from outside panels, move through screeners, polls, receipts and surveys, and have to land back at their panel with the right status whatever path they took. Studies of search ads also need result pages that look like the real thing, and each one was a separate build from a saved copy of the real page.
Architecture
- I built
- Managed service
- 01Matches a build point
What I built
The participant web app from its first commit, in Next.js and TypeScript. The study journey is driven by milestones across nearly twenty study states, and small composable route guards decide who can open each page. A Redux Toolkit store runs across six domains, and participants without a study now make half the API calls at start-up.
A survey engine where the server picks each next question. It covers more than ten question types, from receipt and photo uploads to embedded video that records how much was actually watched, each with its own validation (Formik and Yup).
Panel-safe entry and exit. Screened-out, quality-failed and over-quota respondents go back to their panel with the right status, and anonymous studies let panel traffic skip sign-up entirely.
A dynamic Google results page, built alone. One deployed page reads a study from a single API call and draws AI Overview, sponsored products, sponsored results, places and organic results in the browser. Dozens of saved script files became one bundle.
Extended the existing result-page builder with Shopee, a US retailer and a regional Amazon storefront, doubling the page types. They run on hand-built templates of kilobytes instead of saved pages weighing well over a hundred megabytes, wired into the existing deploy that ships only changed mockups.
Interaction capture. Every view, scroll depth and click, AI Overview engagement included, goes back to the survey over a postMessage channel that accepts only the mockup's own domain. It arrives sorted into exposure, engagement and clicked URLs.