hasnat.dev
← cd ../#projects
#Next.js#TypeScript#Tailwind CSS#Zustand#Drizzle ORM#PostgreSQL#Stripe#TanStack Query#Radix UI#JSON-LD

21st Century Equipment

Full-service John Deere dealership platform with e-commerce and multi-location support

Full Stack Developer·Jan 2024 – ongoing·↗ live

Overview

21c-v3 is a high-performance e-commerce and content platform built for 21st Century Equipment, one of the largest John Deere and Wirtgen dealer networks across Colorado, Wyoming, and Nebraska. The site manages heavy equipment inventory, online parts purchasing, service request scheduling, interactive store locators, career management, and technical blog content. Built on Next.js and integrated with Nextly CMS for content merchandising and Stripe for secure payments, the platform is engineered with a strong emphasis on performance and sitewide structured data for search engines and AI answer engines.

The Problem & Challenges

As an enterprise dealership network, the platform faced several technical and architectural challenges:

  • AI & Search Discoverability: The dealership needed comprehensive structured data across all pages so search engines and conversational AI assistants could reliably surface equipment specifications, service offerings, and branch locations.
  • Scattered Client-Side State: Critical user interactions—including shopping cart management, location preference selection, industry filtering, equipment comparison, and shareable states—were fragmented across isolated components and needed a centralized state architecture.
  • Static Content Bottlenecks: Core user journeys (the homepage, blog, order history, customer account portal, and product comparison tools) relied on static layouts that required developer intervention for routine content updates.
  • Complex Request Workflows: The parts and service scheduling funnels lacked dependable, validated forms capable of handling heavy attachment and file upload requirements.

Solution & Architecture

To overcome these challenges, I engineered a scalable full-stack solution centered on structured data, state centralization, and dynamic CMS integration:

  • Sitewide Structured Data Engineering: Implemented comprehensive JSON-LD schemas across the entire application, including WebPage, BreadcrumbList, LocalBusiness, Service, Product, and BlogPosting schemas for inventory and marketing content.
  • AI Discovery Feed (llms.txt): Engineered and refined an automated llms.txt endpoint featuring curated content summarization and location enrichment, giving LLMs and AI answer engines a clean, standardized view of the dealership's offerings.
  • Centralized Zustand State Architecture: Replaced fragmented component state with a unified suite of Zustand stores managing cart items, user session preferences, geolocation selections, industry filters, equipment comparison lists, and shareable link states, wired seamlessly into the app initialization lifecycle.
  • Dynamic CMS Collections: Converted static homepage layouts, blog archives, customer order histories, and account portals into dynamic, server-rendered pages driven by Nextly CMS collections.
  • Interactive Equipment Tools: Built dynamic equipment comparison and browsing tools that allow customers to evaluate machinery side-by-side with real-time specification filtering.
  • Robust Request Funnels: Implemented validated parts and service scheduling forms integrated with Vercel Blob storage for reliable multi-file uploads.

Key Features & Contributions

  • Sitewide JSON-LD Schema: Comprehensive structured data across products, services, store locations, and articles.
  • AI Discovery Feed (llms.txt): Dedicated endpoint providing summarized, structured inventory feeds for LLM crawlers.
  • Centralized Zustand State: Unified cart, location, industry filter, and comparison management.
  • Interactive Equipment Comparison: Dynamic side-by-side machinery evaluation replacing static product listings.
  • File-Enabled Service Forms: Robust parts and service scheduling funnels with Vercel Blob file upload support.
  • Dynamic CMS Portal: Server-rendered, SEO-optimized account and content pages powered by Nextly CMS.

Tech Stack

  • Framework: Next.js (App Router), React 19
  • Language: TypeScript
  • State Management: Zustand
  • Data & Commerce: Drizzle ORM (PostgreSQL), Stripe, TanStack React Query
  • UI & Styling: Tailwind CSS, shadcn/Radix UI, Embla Carousel
  • SEO & AI: JSON-LD Structured Data, llms.txt

Outcome & Impact

The structured data engineering and dedicated llms.txt discovery feed positioned 21st Century Equipment's inventory and service offerings to be directly surfaced by modern AI answer engines alongside traditional search results. Centralizing application state in Zustand eliminated prop-drilling and ensured predictable, synchronized behavior across cart, comparison, and store location workflows. Converting static marketing and account layouts to dynamic Nextly CMS collections removed major maintenance bottlenecks, enabling the dealership to scale its digital catalog without engineering overhead.

share: