McMillan Farms Suite
Local Farm Business Website & E-commerce Store
McMillan Farms is a local agricultural business that needed a modern digital presence to showcase their farm, handle event bookings, and sell products online.
The Challenge
The farm required two interconnected web properties: a main website for general information, event listings, school tour bookings, and blog content; plus a separate e-commerce store for selling farm products with secure payment processing.
Local Business Needs
Small agricultural businesses often struggle with complex e-commerce platforms. McMillan Farms needed a solution that was easy to manage while providing a professional shopping experience for customers.
The Solution
We built two Next.js applications that share design language and provide a seamless experience for visitors, whether they're booking a school tour or purchasing farm products.
Main Website (mcmillanfarms.ca)
The main website serves as the farm's digital home, featuring:
- Events Calendar: Upcoming farm events and seasonal activities
- School Bookings: Online booking system for educational farm tours
- Blog: Farm updates and news using markdown/MDX with remark
- Contact Forms: React Hook Form with Zod validation and dual email providers
Dual Email Providers
By integrating both SendGrid and Resend, the site has automatic failover for email delivery, ensuring booking confirmations and contact form submissions are never lost.
Farm Shop (shop.mcmillanfarms.ca)
The e-commerce store is a sophisticated Next.js 16 application that provides a complete shopping experience for farm products, powered by Square's unified commerce platform.
Square Payment Links
Rather than embedding Square's Web Payments SDK directly, the store uses Square Payment Links for checkout. This approach redirects customers to a Square-hosted checkout page, providing PCI compliance without the complexity of handling card data directly.
Product Catalog
- Dynamic Categories: Products organized by category using Square Catalog API
- Real-time Inventory: Stock levels synced directly from Square
- Product Variations: Support for different sizes, quantities, and options
- Server-side Data Fetching: TanStack Query v5 for efficient data management with caching
Shopping Cart
The cart implementation uses Zustand v5 with localStorage persistence, ensuring customers don't lose their selections between sessions:
- Persistent State: Cart survives browser refresh and returns
- Quantity Management: Easy item quantity updates with toast notifications
- Real-time Totals: Automatic price calculations
Zustand Persistence
The cart store uses Zustand's persist middleware with localStorage, automatically serializing cart state. This ensures isolation from other applications and a seamless shopping experience.
Canadian Shipping & Tax
The store is purpose-built for Canadian commerce:
- Shipping Zones: Zone-based shipping rates for all 13 provinces/territories
- Free Shipping Threshold: Orders over $100 CAD qualify for free shipping
- Provincial Tax Calculation: Accurate GST/HST/PST/QST rates by province
- Square Tax Integration: Final tax calculation handled by Square at checkout
Free Shipping Incentive
The $100 CAD free shipping threshold encourages larger orders. The cart displays progress toward free shipping, motivating customers to add more items.
Security & Reliability
- Rate Limiting: In-memory sliding window rate limiter protects sensitive endpoints
- Honeypot Spam Protection: Contact forms include hidden fields to catch bots
- Sentry Monitoring: Full error tracking and performance monitoring
- Zod Validation: All API inputs validated with Zod schemas
Architecture
The Farm Shop follows a clean architecture pattern with clear separation of concerns:
Repository Pattern
Square API interactions are abstracted through repository classes, making the codebase testable and maintainable:
- ProductRepository: Catalog and inventory operations with pagination support
- OrderRepository: Checkout session creation and order management
API Routes
/api/checkout- Creates Square Payment Links with shipping calculations/api/contact- Rate-limited contact form with honeypot protection/api/webhooks/square- Handles Square webhook events for order updates/api/products- Product catalog with cursor-based pagination/api/categories- Category listing from Square Catalog
Rate Limiting Strategy
Different endpoints have different rate limits: checkout is restricted to 10 requests/minute to prevent abuse, while the contact form allows 5/hour to reduce spam.
State Management
- Zustand: Client-side cart state with localStorage persistence
- TanStack Query: Server state management with automatic caching, retry logic, and revalidation
Testing Infrastructure
The e-commerce store has comprehensive test coverage across multiple levels, ensuring reliability for payment processing and order management:
Unit Testing
- Framework: Vitest v4 with @testing-library/react
- Coverage: @vitest/coverage-v8 for visibility into test coverage
- Environment: happy-dom for browser simulation
End-to-End Testing
- Framework: Playwright for full browser automation
- Flows: Complete checkout flow testing including product browsing, cart management, and checkout redirect verification
API Mocking
- MSW v2: Mock Service Worker for reliable API isolation
- Square API Mocks: Simulated Square responses for deterministic testing
Testing Payment Flows
Payment flows are tested using MSW to mock Square API responses. This allows testing error scenarios (payment declined, network failures) without hitting production APIs.
Technical Stack
Both sites share a common foundation:
- Framework: Next.js 16 with App Router and React 19
- Styling: Tailwind CSS 4 with CVA for component variants
- Forms: React Hook Form with Zod schema validation
- State: Zustand for cart management, TanStack Query for server state
- Payments: Square SDK for secure payment processing
- Build: Turbopack for fast development builds
Results
The McMillan Farms digital suite delivers measurable value across multiple dimensions:
Business Impact
- Unified brand experience across informational site and e-commerce store
- Self-service product ordering reducing phone inquiries
- Automated email confirmations and notifications
- Mobile-responsive design for on-the-go shopping
Technical Achievements
- Secure payment processing with Square Payment Links
- Canadian-optimized shipping and tax calculations
- Comprehensive test coverage for payment flows
- Production monitoring with Sentry and Vercel Analytics
- Fast page loads with Turbopack development builds
Operational Benefits
- Easy product management through Square Dashboard
- Order fulfillment synced with Square
- Contact form submissions routed to business email
- Zero-downtime deployments on Vercel
Applications
Informational website with events, school bookings, and blog