Restaurant Landing Page v2, Data-Enriched & Visually QA'd
A fast-food / restaurant brand
Overview
A second, more polished iteration of the restaurant landing page that pulls real business data (ratings, reviews, hours, attributes) from a Google Maps/Apify scrape and adds an automated visual-QA harness with headless-browser screenshots.
The Challenge
The first version proved the concept; v2 needed richer, accurate business data and a way to verify visually that the page renders correctly across viewports before shipping.
What We Built
A static site (index.html, styles.css, script.js) hydrated from business.json, structured data sourced via an Apify run (Google Maps place data: 4-star rating, 371 reviews, popularity attributes, maps URL). On top of the page sit Node.js QA scripts (capture-screenshots.js, final-check.js, test.js, browser-test.html) that capture a screenshots/ set and produce written reports (TEST_REPORT.md, VISUAL_ANALYSIS.md, FINAL_VISUAL_REPORT.md).
Technologies & Approach
Vanilla HTML/CSS/JS for the page itself, plus a Node.js scripting layer for headless-browser screenshot capture and visual verification. Real place data from Google Maps (via Apify) grounds the content in accurate, trustworthy business information.
Outcome / Impact
Produced an upgraded, data-accurate restaurant landing page backed by repeatable visual QA, demonstrating an end-to-end build-plus-verify loop for small-business sites.
Capabilities Demonstrated
- Enriching sites with third-party business data (Google Maps / Apify)
- Automated visual QA and screenshot regression checks
- Zero-dependency static frontend with a Node tooling layer
- Iterative, report-driven delivery