Day One — Build the Stack
A WordPress Plugin That Outgrew WordPress
This project is a virtual blue sign highway sign application, the kind of blue signs you see on the highway advertising Food, Gas, Lodging, Attractions, and Camping. The app helps drivers find nearby advertisers using GPS and Google Maps, connecting highway travelers to the businesses on those signs.
The existing app lived inside a WordPress/Divi child theme as a custom plugin. React components bootstrapped via a [map] shortcode, API calls authenticated with WordPress nonces, config injected through wp_localize_script, and location data split across per-state database tables. Every change required navigating both WordPress internals and the custom React codebase.
The client needed the app to stand on its own: a clean architecture that could scale to new states without code changes, serve mobile users with native apps, and integrate Google Maps with rich place details. WordPress was the scaffolding; it was time to build the real structure.
Vibe-Coding: From Plugin to Robust Platform with Mobile Apps in a Day
MDPSync’s vibe-coding approach combined deep WordPress knowledge with AI-accelerated development to execute a full architectural migration, not just planning, but building.
87 commits across 3 new repositories in a day. A standalone Slim 4 PHP API with rate limiting and admin authentication. A redesigned Vite React web app with tenant branding, full-bleed map, and a road-trip-themed landing page. A React Native mobile app with GPS-first navigation, dark mode, map clustering, and pull-to-refresh. A Turborepo monorepo sharing types and business logic across web and mobile.
This wasn’t a port. It was a re-architecture. Every layer was analyzed, redesigned, and rebuilt from the ground up while the original WordPress app continued serving users.
A Complete Digital Ecosystem
Interactive Google Maps
Full Google Maps integration with colored category pins, info windows, zoom controls, and browser geolocation auto-detection
Radius-Based Search
Find locations within 5–150 miles using Haversine distance calculation with customizable range and category filtering
Multi-State Support
Virginia, Texas, and North Carolina with state-specific map centers. New states added via CSV import, no code changes
Google Places Integration
Automatic enrichment with ratings, photos, and business details, cached for 30 days to minimize API costs
Infinite Scroll Cards
Location cards with expand-to-reveal details, synchronized with map pins. Click a pin to highlight a card, click a card to center the map
Standalone PHP API
Slim 4 framework with public and admin routes, rate limiting, session-based admin auth, and Haversine-powered location queries
Native Mobile App
React Native + Expo with GPS-first navigation, dark mode, map pin clustering, bottom sheet UI, pull-to-refresh, and recently viewed tracking
Automated Data Pipeline
XLSX/CSV import with per-state column mapping, field validation, coordinate parsing, participation type normalization, and wipe-and-replace transactions
Intelligent Caching
JSON file cache with 30-day TTL for Google Place details, reducing API calls and costs while keeping data fresh
Admin Dashboard
HTML/CSS/JS admin panel with authentication, cache management, CSV import controls, and location data management
Redesigned Web App
Full-bleed map with sidebar overlay, pill-style category filters, directions-first card design, and a road-trip-themed landing page
Multi-Tenant Branding
Per-state accent colors, logos, and document titles, configurable via TenantConfig without code changes
See It in Action
The Map Experience
Full-bleed interactive Google Maps with six color-coded category pins: Food, Gas, Lodging, Attractions, Camping, Other. Info windows with business name, address, and “Get Directions” deep links. Browser geolocation auto-centers the map on the driver’s location. Sidebar overlay on desktop, bottom sheet on mobile.
Smart Location Cards
Directions-first card design with quick action buttons for calling and navigation. Expand any card to reveal Google Place photo, star rating, phone, address, and website. Cards sync bidirectionally with map pins; click either to highlight the other. Infinite scroll with React Query managing server state and pagination.
Multi-State & Category Filtering
Six highway sign categories with color-coded pill toggles matching the physical signs. State detection via GPS on mobile, route-based on web. Range slider from 5 to 150 miles using Haversine distance. All filters trigger real-time API queries. The mobile app adds search-by-name and recently viewed sections.
From CSV to Map Pin
The full data pipeline: XLSX and CSV files imported through CLI tooling with per-state column mapping and field normalization. Wipe-and-replace transactions keep data consistent. Haversine-powered API queries serve locations by radius. Google Places enrichment adds ratings and photos. File-based caching with 30-day TTL keeps API costs low.
From WordPress Plugin to Standalone Platform
In a day, every layer of the stack was analyzed, redesigned, and rebuilt. The WordPress plugin didn’t just get ported; it got re-architected into three purpose-built repositories.
Repository Overview
| Repository | Commits | Purpose |
|---|---|---|
| highwaysigns-api | 29 | Standalone Slim 4 PHP API with admin panel |
| highwaysigns-apps | 36 | Turborepo monorepo: Vite React web app + shared package |
| highwaysigns-mobile | 22 | React Native/Expo mobile app |
Before & After
| Component | WordPress (Before) | Standalone (After) |
|---|---|---|
| Frontend | React in Divi child theme shortcode | Vite React SPA with redesigned UI |
| API | WordPress REST API + WP nonces | Slim 4 PHP with rate limiting and admin auth |
| Database | Per-state tables (wp_locations_va, _tx, _nc) | Unified locations table with state column |
| Config | wp_localize_script injection | /api/v1/config endpoint |
| Cache | WordPress uploads directory | Dedicated cache directory outside web root |
| Auth | WordPress nonces (X-WP-Nonce) | PHP sessions (admin), public endpoints open |
| Build | Webpack 5 + Babel | Vite with HMR, Turborepo for monorepo |
| Import | WP-CLI with CSV only | CLI with XLSX + CSV, per-state column mapping |
| Mobile | None | React Native + Expo with GPS-first UX |
| Branding | None | Multi-tenant with per-state accent colors and logos |
Highway Sign Categories
Technology Stack
Before: WordPress plugin architecture
After: standalone platform architecture
✕ WordPress Limitations
- ✕WordPress core, themes, and plugins require constant security patching
- ✕Full CMS overhead for an app that never uses posts or pages
- ✕Nonce-based REST authentication tied to WordPress sessions
- ✕No path to native mobile apps without a separate API
- ✕Per-state database tables require code changes to expand
- ✕Config injected via wp_localize_script, tightly coupled to theme
- ✕Divi theme dependency limits frontend flexibility
- ✕No multi-tenant branding; single site, single look
- ✕Webpack build process buried inside plugin directory
- ✕No shared type safety between frontend and backend
✓ Standalone Improvements
- ✓Zero WordPress attack surface, no CMS to exploit
- ✓Slim 4 API handles only what the app needs, nothing more
- ✓Session + CSRF auth with rate limiting at 60 req/min
- ✓React Native mobile app with GPS, dark mode, and map clustering
- ✓Add new states by importing a spreadsheet, zero code changes
- ✓Config served via API, decoupled from any theme or CMS
- ✓Vite + React with full-bleed map, road-trip landing page
- ✓Route-based multi-tenant branding per state with accent colors
- ✓Turborepo monorepo with shared TypeScript library across apps
- ✓End-to-end type safety from API responses to UI components
New Architecture
Web Frontend
API & Backend
Mobile & Infrastructure
Infrastructure & Performance
Apache2 web server with MariaDB database hosting. File-based JSON caching reduces Google Places API costs by storing place details, ratings, and photos for 30 days. Haversine distance calculation with bounding-box optimization keeps radius queries fast across thousands of locations. Rate limiting at 60 requests per minute protects the API. The architecture is designed for horizontal scaling: add new states by importing a spreadsheet, no code changes required.
The Vibe-Coding Advantage
A complete platform migration (standalone API server, redesigned web app, native mobile app, admin panel, shared type package, multi-tenant branding, and automated data import), all delivered in a day by a single architect with AI.
24 Hours, Not Months
Full migration from WordPress plugin to standalone platform in a single day. API, web, mobile, admin: all built, not just planned.
Enterprise Architecture
Slim 4 API with rate limiting and session auth. Turborepo monorepo with shared TypeScript types. File-based caching. Bounding-box query optimization. Every pattern chosen by an experienced engineer.
Web, Mobile & API
One architect produced a PHP API server, a redesigned React web app, a React Native mobile app, and an admin panel, all sharing types and business logic through a monorepo package.
What This Would Cost the Traditional Way
Building this platform through a traditional agency would require assembling a cross-functional team: a backend engineer, a frontend developer, a React Native mobile developer, a DevOps engineer, a UI/UX designer, and a project manager to coordinate it all.
At market rates, that’s 6 specialists over 2–4 months. The total cost would range from $150,000 to $400,000, before accounting for coordination overhead, handoff delays, and the rework that comes with multi-team projects.
Vibe-coding delivered the same result: one architect, one day, a fraction of the cost. This is the future of software development.
Day Two — Harden & Release
A Stack Isn’t a Product
Day One ended with a working platform: a backend server, a redesigned web app, and a native mobile app. The foundation was solid. But a foundation isn’t a finished product.
Day Two was about closing the gap between “it works” and “it’s ready for real users.” A full security review across every layer. Making sure the web and mobile apps had the same capabilities. And the signature feature that changes the entire experience: the app now knows which direction you’re driving and only shows you what’s ahead.
By the end of the day, both the iPhone and Android apps were submitted for testing. Two days, one architect, a complete product ready for users.
Forward-Looking Navigation
A map that shows everything is useful. A map that shows what’s ahead of you is a driving companion.
Most map apps show every location in every direction. That’s fine when you’re standing still, but when you’re driving down the highway, half those results are already behind you. The forward-looking feature changes that. The app uses your phone’s GPS to figure out which way you’re headed, then filters out anything you’ve already passed. You see the next gas station, the restaurant at the next exit, the campground 20 miles ahead, not the one you drove by five minutes ago.
This isn’t a setting you toggle. The app knows when you’re driving and automatically switches to forward-looking mode. Pull over or stop, and the full 360° view comes back. It’s the kind of feature that makes you wonder why every map app doesn’t work this way. Designed, built, and tested in a single day.
Hardened Across Every Layer
Day One built fast. Day Two made it safe. A complete security review across the server, web app, and mobile app, locking down sensitive data, blocking abuse, and making sure the app handles the unexpected gracefully.
Sensitive Keys Hidden
Private API keys that power Google Maps and business photos were moved behind the server, invisible to anyone inspecting the app
Login Protection
Admin login locked down with industry-standard cookie security and brute-force protection. Too many wrong passwords and the door shuts automatically
Abuse Prevention
Every request to the server is checked for sanity: search radius capped, page sizes limited, and only valid states accepted. Bad requests get rejected before they cost anything
Browser-Level Protection
Modern security policies added so browsers enforce encrypted connections, prevent the app from being embedded on malicious sites, and block common web attacks
Mobile Safety
External links verified before opening, sensitive credentials removed from app config, and GPS automatically re-detects your state when you cross a border
Faster & Smoother
Map scrolling optimized so pins don’t lag, GPS updates throttled to save battery, drag interactions fixed for smoother swiping, and network requests now time out gracefully instead of hanging
Closing the Gaps
Day One built the web app fast. Day Two made it bulletproof.
The web app gained graceful error recovery instead of blank screens, smart URL handling that catches typos and redirects to the right page, and the same security protections applied to the mobile app. Swipe and drag interactions were smoothed out so the bottom sheet feels native.
On the server side, a database precision issue was fixed that would have misplaced locations in West Texas, the admin panel got a smoother login experience with session memory, and several behind-the-scenes optimizations made the whole system faster and more reliable.
| Fix | Before | After |
|---|---|---|
| Business photos | API key visible to users | Key hidden behind the server |
| Bad URLs | Broken “page not found” errors | Auto-corrected and redirected |
| App errors | Blank white screen | Friendly error with recovery option |
| West Texas locations | Pins placed in wrong spot | Full coordinate precision |
| Admin login | Unlimited password guesses | Locked after too many attempts |
99 Commits. 3 Repos. Ready for Testing.
| Repository | Day One | Day Two | Total |
|---|---|---|---|
| highwaysigns-api | 29 | +1 | 30 |
| highwaysigns-apps | 36 | +3 | 39 |
| highwaysigns-mobile | 22 | +8 | 30 |
| Total | 87 | +12 | 99 |
What Day Two Would Cost the Traditional Way
Day Two’s work (a full security review, a new GPS-powered driving feature, performance tuning, and submitting apps to both the App Store and Google Play) would traditionally require its own team: a security specialist to review every layer, a mobile developer to ship to both stores, an engineer to design the directional navigation, and a QA lead to test everything across three platforms.
At market rates, that’s 4 specialists over 2–4 weeks. The total cost would range from $40,000 to $80,000, and that assumes a clean handoff from the team that built it on Day One. In reality, onboarding new people to a fresh codebase adds weeks of ramp-up before the real work starts.
The same architect who built it on Day One secured it and released it to testers on Day Two. No handoffs, no onboarding, no lost context. That’s the compounding advantage of vibe-coding.
Day 3–6 — Test. Test. Test.
A Product Isn’t Finished Until It’s Been Used
Day One built the stack. Day Two hardened it and released it to testers. But a testing build sitting in someone’s pocket isn’t the same as a product that’s been driven with.
Days Three through Six put the app in real hands, on real roads, under real conditions. Three rounds of field testing. Each round uncovered things that only show up when you’re actually using the app the way it was designed to be used: behind the wheel, scanning for signs at highway speed.
This is the phase where a prototype becomes a product.
Field-Tested, Three Times Over
Every round got tighter.
The first round caught a crash that only happened under specific driving conditions. The second round found layout issues on different screen sizes and interactions that didn’t feel right at speed. The third round polished the details: smoother transitions, better touch targets, and the kind of refinements you only notice when they’re missing.
Between rounds, a comprehensive code review across all three repos caught type errors, missing validations, and performance bottlenecks. Components were optimized so the app stays responsive even with hundreds of locations loaded. Startup time was cut down so the app is ready before the driver is.
Crash Fixes
Edge cases caught in the field, not in a simulator.
Faster Startup
Optimized so the app is ready before the driver is.
Touch & Feel
Haptic feedback, smoother filters, and better touch targets.
Code Review
Line-by-line audit across all three repos.
Every Feature, Everywhere
What works on mobile should work on the web.
Six features that started as mobile-only were ported to the web app, delivering the same experience whether you’re on a phone or at a desktop. Directional filtering was refined for edge cases like U-turns and slow-speed driving. Areas with sparse sign coverage now show richer results thanks to server-side data enrichment that fills in gaps automatically.
On the API side, caching was tuned so repeated searches in the same area are instant, and the server sends the right headers so the web app loads faster on return visits.
Features Ported to Web
- ✓ Directional filtering for driving
- ✓ Server-side location backfill
- ✓ Two-tier location display
- ✓ Recently viewed locations
- ✓ Distance-sorted results
- ✓ Empty state for directional filter
Dark Mode & Custom Branding
The mobile app got full dark mode support, not just a cosmetic preference, but a safety feature. When you’re driving at night, a bright white screen is a distraction. Dark mode keeps the interface visible without competing with the road.
The default Expo app icons were replaced with custom Highway Signs branding: a proper app icon, splash screen, and in-app identity. The kind of detail that separates a prototype from something you’d hand to a client.
Day 3–6 — Polished & Tested
Three rounds of field testing, dark mode, custom branding, and dozens of refinements that turned a test build into a product.
List
Browse
Filter
Home
Pick
Browse
Search
The Redesigned Web App
Click to enlarge.
What This Testing Phase Would Cost the Traditional Way
Three rounds of field testing, a full code review, porting features across platforms, performance optimization, dark mode, and custom branding. That’s traditionally a QA lead running test cycles, a mobile developer iterating on builds, and a frontend developer porting features to the web. Coordinated over 1–2 weeks minimum.
At market rates, that’s 3 specialists over 1–2 weeks. The total cost would range from $20,000 to $40,000, and that’s assuming the same team from Day One is still available. In practice, QA and polish phases often get deprioritized or handed to a different team entirely.
The same architect who built it, hardened it, and released it also field-tested it and polished it. No handoffs, no context loss, no corners cut. That’s the compounding advantage.
Day 7 — Security & Optimization
Security Isn’t a Feature — It’s the Foundation
The app worked. It had been field-tested, polished, and released to testers. But “it works” isn’t the same as “it’s ready.”
Day Seven was a full security audit and performance pass across every layer of the platform: the API, the web application, and the mobile app. Every endpoint reviewed. Every input validated. Every unnecessary re-render eliminated. The kind of invisible work that users never see but always feel.
This is the difference between a demo and something you’d hand to a client.
Hardened Across Every Layer
Every repo got a full code review. The API, the web app, and the mobile app were each audited for vulnerabilities, hardened against attacks, and brought up to production-grade security standards, all in a single day.
Request Protection
API locked down against server-side request forgery, preventing attackers from tricking the server into making unauthorized calls
Input Sanitization
Every user input validated and cleaned before it touches the database, blocking injection attacks at the front door
Content Security Policy
Browser-level rules that prevent unauthorized scripts from running, configured to work seamlessly with Cloudflare’s proxy layer
Geolocation Reliability
Location services hardened with proper error handling and fallbacks. The app works even when GPS signals are weak or unavailable
Concurrency Protection
Race conditions eliminated so simultaneous requests don’t corrupt data or crash the server under load
Accessibility
Screen reader support, keyboard navigation, and semantic markup brought up to standards across the web application
Faster Where It Matters
Eight performance fixes across the mobile app. Expensive calculations that were running on every frame now run once and are remembered. Components that were redrawing themselves unnecessarily now hold still. The data layer was tuned to pull less and cache smarter.
Startup is faster. Map panning is smoother. The callout cards that appear when you tap a location no longer fight with your fingers. Distance calculations stay consistent between the drawer and the map.
None of this changes what the app does. All of it changes how it feels. That’s the kind of invisible work that separates something that runs from something that flies.
What This Security Sprint Would Cost the Traditional Way
A full security audit across three platforms, performance profiling and optimization, and an accessibility review. That’s traditionally a security auditor running penetration tests and reviewing code, a performance engineer profiling and optimizing, and an accessibility specialist auditing compliance. Coordinated across 1–2 weeks.
At market rates, that’s 3 specialists over 1–2 weeks. The total cost would range from $15,000 to $30,000, and that’s assuming the security auditor has enough context on the codebase to know what to look for. In practice, external auditors spend the first week just understanding the architecture.
The same architect who built every layer of this platform reviewed every layer of this platform. No ramp-up. No knowledge gaps. No corners cut.
127 Commits. 3 Repos.
| Repository | Day One | Day Two | Day 3–6 | Day 7 | Total |
|---|---|---|---|---|---|
| highwaysigns-api | 29 | +1 | +2 | +1 | 33 |
| highwaysigns-apps | 36 | +3 | +6 | +2 | 47 |
| highwaysigns-mobile | 22 | +8 | +11 | +6 | 47 |
| Total | 87 | +12 | +19 | +9 | 127 |
What This Project Would Have Cost the Traditional Way
Add it all up. A full-stack platform: REST API, web application, native mobile apps for iOS and Android, Google Maps integration, GPS-powered navigation, security hardening across every layer, a dedicated security audit and performance optimization pass, three rounds of field testing, dark mode, custom branding, and app store submissions. That’s not a weekend project. That’s a full product build.
The traditional approach would require a team of 6–9 specialists: backend, frontend, mobile, DevOps, security, geospatial, QA, design, and a project manager to keep everyone on track. At market rates over 3–6 months, the total cost would range from $225,000 to $550,000. And that’s before the inevitable rework from handoff gaps, context loss between teams, and the coordination tax of managing nine people across six months.
One architect built it, hardened it, tested it, audited it, and optimized it. No handoffs. No ramp-up. No lost context. Seven days. That’s the math.
Ready to Build Something Extraordinary?
Let MDPSync bring your vision to life with vibe-coding. From concept to production in record time.