hasnat.dev
← cd ../#projects
#Next.js#TypeScript#Tailwind CSS#Nextly CMS#Drizzle ORM#Stripe#TanStack Query#Framer Motion#JSON-LD

4 Rivers Equipment

Enterprise John Deere dealer platform with rentals, inventory, and career management

Full Stack Developer·Feb 2024 – ongoing·↗ live

Overview

4re-v4 is a Nextly-powered dealership template and production platform built for 4Rivers Equipment, an enterprise John Deere dealer network with 100 years of history serving Colorado and New Mexico. Beyond operating as a high-traffic e-commerce and inventory platform, this repository serves as the core template for the create-nextly-app CLI and child brand websites. A central engineering focus is AI-discoverable inventory: every page emits comprehensive JSON-LD structured data (FAQPage, Product, LocalBusiness, Service, HowTo, BlogPosting) so conversational AI assistants like ChatGPT and Perplexity can surface real-time equipment and dealer details directly in user queries.

The Problem & Challenges

Operating across multiple retail and service locations, the dealership required real-time, location-specific inventory rather than static content listings. The business faced several technical hurdles:

  • Dynamic Location Merchandising: Inventory needed to reflect branch-specific equipment availability dynamically.
  • AI & Search Schema Standards: Schema markup needed strict standardization to satisfy Google Merchant Listing criteria while surviving the evolving requirements of AI-driven discovery engines.
  • Lead Capture & Form Validation: Inquiry forms required reliable validation and accessible US phone number masking to prevent lead drop-off and data formatting errors.
  • Template UX Consistency: Several UI rough edges—including broken location popups, misaligned service icons, and inconsistent blog categorization—required remediation as the CMS content model expanded across child brands.

Solution & Architecture

I architected a scalable, CMS-driven solution that modernizes inventory discovery, schema generation, and admin workflows:

  • Dynamic Location & Inventory Engine: Built dynamic location pages coupled with a live inventory system backed by client-side state, allowing users to browse real-time machinery by branch.
  • CMS Blog Schema Builder: Created a CMS-driven schema builder that dynamically generates JSON-LD structured data for articles, promotional offers, and technical guides.
  • Google Merchant Standardization: Conducted a comprehensive schema markup standardization pass, bringing product data into full compliance with Google Merchant Listing requirements.
  • Accessible Inquiry Funnels: Implemented US phone number masking and robust validation within lead inquiry forms, delivering a cleaner, more accessible user experience.
  • Dynamic Campaign Branding: Built a configurable, sticky partnership badge for an American Cancer Society campaign with dynamic viewport positioning.
  • One-Click Admin Deployment: Engineered a publish and deployment trigger directly in the Nextly CMS header, enabling non-technical content teams to ship site updates instantly.
  • UI & Layout Polish: Resolved recurring location popup rendering bugs, corrected blog category displays, and aligned service card iconography sitewide.

Key Features & Contributions

  • Dynamic Location Inventory: Real-time, branch-specific equipment listings replacing static content.
  • CMS Blog Schema Builder: Automated JSON-LD structured data generation for articles and guides.
  • Google Merchant Compliance: Standardized product schema markup to satisfy Google Merchant Listing criteria.
  • Validated Inquiry Forms: Accessible US phone number masking and robust lead capture validation.
  • Configurable Campaign Badge: Dynamically positioned sticky component for corporate partnership campaigns.
  • One-Click Admin Deployment: Integrated release trigger built directly into the CMS header toolbar.

Tech Stack

  • Framework: Next.js (App Router, Turbopack), Nextly CMS
  • Language: TypeScript
  • Data & Commerce: Drizzle ORM (PostgreSQL), Stripe, TanStack React Query
  • UI & Styling: Tailwind CSS, Framer Motion, Embla Carousel, React Hook Form
  • Search & SEO: Pagefind, JSON-LD Structured Data (XSS-safe schema builders)

Outcome & Impact

The structured data engineering made equipment specifications and dealer details directly answerable by conversational AI assistants, providing a meaningful competitive edge in discoverability. Achieving Google Merchant compliance improved organic product listing visibility. Replacing static content with dynamic branch inventory and adding one-click CMS deployments drastically reduced day-to-day friction for content teams managing a multi-location dealer network.

share: