hasnat.dev
← cd ../#projects
#Next.js#TypeScript#Tailwind CSS#Nextly CMS#Drizzle ORM#Stripe#Dynamics 365#Zustand#React Hook Form#Zod#Radix UI

The Backyard

Consumer-facing John Deere retail experience for home and property equipment

Full Stack Developer·Mar 2024 – ongoing·↗ live

Overview

tby-dev ("The Backyard") is a consumer-focused retail brand website for The Backyard at 21st Century Equipment, targeting homeowners and property managers rather than commercial agricultural enterprises. Offering mowers, compact tractors, and utility vehicles, the platform features an e-commerce marketplace experience built on Next.js and Nextly CMS, with specialized plugins for form building, publishing workflows, and file storage. The site bridges legacy dealership reliability with modern consumer retail.

The Problem & Challenges

Bridging legacy dealership infrastructure with a self-serve consumer marketplace presented key technical requirements:

  • Self-Serve Account Portal: The platform needed external user authentication, persistent order history tracking, and a full self-serve account experience with automated invoice downloads.
  • Live Payment Processing: Storefront checkout required real-time payment processing via Stripe with complex pricing breakdown logic.
  • Legacy CRM Integration: Lead capture and service booking submissions needed to synchronize seamlessly with a legacy Microsoft Dynamics 365 (D365) CRM without disrupting existing sales team workflows.
  • Consumer Product Discovery: Shoppers required location-based inventory filtering, interactive product carousels, and an automated price-watching tool to track price drops on saved machinery.

Solution & Architecture

I engineered an end-to-end e-commerce architecture integrating modern payment systems, legacy CRMs, and interactive discovery tools:

  • Stripe Checkout & Pricing Engine: Implemented Stripe payment intent creation with full pricing breakdown logic, handling taxes, delivery fees, and equipment add-ons cleanly.
  • Persistent Account & Order Flow: Built a persistent order creation workflow, an intuitive account management sidebar, and PDF invoice download functionality backed by edge middleware authentication.
  • Dynamics 365 Form Proxy: Built a secure backend proxy for Dynamics 365 lead capture, mapping submitted form data into transactional email templates so inquiries populate downstream sales funnels automatically.
  • Location-Based Discovery: Added inventory filtering by store location and built responsive product carousels for streamlined equipment browsing.
  • Interactive Price-Watching: Engineered a price-watching feature that allows authenticated users to save items and track price modifications over time.
  • CMS Content Streaming: Integrated Nextly CMS configuration into the application's content streaming layer, ensuring real-time synchronization of merchandising data and promotional banners.

Key Features & Contributions

  • Stripe Payment Processing: Seamless checkout integration with payment intent creation and transparent pricing breakdowns.
  • Self-Serve Customer Portal: Persistent order history, account management sidebar, and automated PDF invoice downloads.
  • Dynamics 365 CRM Proxy: Legacy CRM integration mapping web inquiries into transactional sales pipelines.
  • Location-Based Merchandising: Advanced inventory filtering and interactive carousels tailored to branch stock.
  • Interactive Price-Watching: Customer utility for tracking price drops and promotional discounts on saved equipment.
  • CMS Streaming Architecture: Deep integration with Nextly CMS for dynamic product merchandising and content delivery.

Tech Stack

  • Framework: Next.js 15.5 (App Router)
  • Language: TypeScript
  • CMS & Data: Nextly CMS, Drizzle ORM (PostgreSQL)
  • Payments & CRM: Stripe, Microsoft Dynamics 365 (D365)
  • State & Forms: Zustand, React Hook Form, Zod
  • UI & Styling: Tailwind CSS, Radix UI, Swiper Carousel

Outcome & Impact

The Stripe checkout integration and persistent order management flow transformed the platform into a self-serve retail experience, empowering property owners to complete transactions and manage accounts independently. Price watching and location-based filtering provided shoppers with powerful tools to discover and monitor equipment. The D365 form proxy successfully bridged modern web lead capture with legacy sales pipelines without requiring costly backend CRM modifications.

share: