Where Did People Visit Most This Month, Footlab

A service that shows monthly visitor trends for over 200 domestic trade areas and 500+ consumer brand stores. Started as a small promotional project for Loplat and Loplat i. After learning SSR and D3.js, I completed the release within the deadline.

Averaging 1,000 monthly visitors, the service is primarily used by press outlets.

Period

Jul 2021, 2 weeks

Internal Review

• Received positive feedback: "What started as a prototype turned into a bigger project than expected. Despite delayed planning, the release was completed on schedule."
• Pair programming was adopted right before deployment: "By quickly exchanging knowledge in a short time, we were able to deploy reliably."

Tech Stack

NextJS, D3.js, Recoil, Typescript, ESLint, Prettier, Tailwind, styled-components, Firestore, Google Analytics, storybook, Vercel

Work

Project Setup

• Used NextJS + SSG for SEO and fast rendering.
  • At build time, statically generated 600+ brand and trade area pages, while chart data is fetched on the client side.
• Used Presentational and Container Component Pattern instead of Atomic Design.
  • Specifically, structured code into container (business logic) and foundation (UI based on props).
  • Decided against Atomic Design due to unclear boundaries between atom and molecule, which can cause confusion. The cost of reaching consensus on boundaries is itself a cost, and even with consensus, it's not meaningfully productive. Reference (opens in a new tab)
• Introduced Recoil to persist the user's previously selected brand/trade area tab.
  • A known issue: Recoil generated console warnings in SSR environments regardless of whether it was functioning — a point for future refactoring.

PC / Mobile Responsive

• Considering SSR characteristics, used CSS media queries instead of client-side window.width detection for UI branching.
• Used Tailwind to improve CSS and media query readability.

Trending Brands/Trade Areas Ranking

• Developed a list of brands/trade areas with significant changes in visitor trends over the past 7 days.

Search Autocomplete

• Calculated similarity scores for each brand/trade area's official name, Korean name, and English name, then populated the autocomplete list with the highest-scoring items.

Custom Hook

• Extracted the search-results-by-input logic into useList to prevent code duplication.
• Users can receive text alerts about visitor changes for a specific brand/trade area. Extracted the logic for updating or adding non-duplicate alerts (given brand/trade area name and phone number) into useAlarm.