Client: Chronos Athletics
Role: Full-Stack Development, UI/UX Design, Headless Shopify Integration
Duration: 3 months
Stack: Next.js, React, Headless Shopify, Custom Order Workflows

HEADLESS SHOPIFY · FULL-STACK ECOMMERCE

A headless Shopify storefront and custom team-ordering application.

Chronos Athletics needed a custom digital experience capable of supporting both standard ecommerce and detailed custom-team apparel inquiries. I designed and developed a headless Shopify application using a custom Next.js frontend connected to Shopify's commerce system. The completed platform combines product discovery, cart and shopping journeys, an interactive apparel configurator, saved custom items, and a structured team-order process.

View live site

Chronos Athletics headless Shopify storefront showing product discovery and team ordering — The custom Next.js storefront handles product discovery, custom apparel configuration, and team ordering.

SITUATION

The context behind the work

The Chronos business serves both individual shoppers and teams requesting customized apparel.

Standard products require familiar collection, product, cart, and checkout journeys. Custom team orders require substantially more information, including garment choices, customization options, quantities, player details, artwork, roster information, and required delivery dates.

The website needed to support both journeys without forcing every customer through the same process.

CLIENT PROBLEM

What the system needed to solve

Design and build one responsive ecommerce experience that supports normal product purchasing and detailed custom-team order inquiries while keeping each journey understandable.

Constraints

Shopify needed to remain the commerce backend.
The frontend required greater flexibility than a standard theme.
Standard purchases and custom orders required different user journeys.
Custom orders could include multiple garments and detailed specifications.
The interface needed to work across mobile, tablet, and desktop.
Important customer information needed to reach the business in a consistent format.
The implementation needed clear loading, validation, empty, success, and error states.

MY RESPONSIBILITIES

Requirements and information architecture
Ecommerce and customer-journey planning
UI/UX design
Next.js frontend development
Headless Shopify integration
Product and collection experiences
Search functionality
Cart and checkout handoff
Custom apparel configurator
Saved custom-order items
Team-order form workflow
Form validation and submission handling
Responsive implementation
Testing and deployment

APPROACH

Turning the requirement into a maintainable system

Separating the customer experience from the commerce backend

The customer-facing storefront was built as a custom Next.js application, while Shopify remained responsible for the underlying commerce data and purchasing infrastructure.

This separation provided greater control over navigation, product presentation, custom-order workflows, and interface behaviour than a conventional theme-based implementation.

Client & Server responsibilities

Client Components manage interactive state for the garment configurator and cart drawer. Server Components handle data fetching for product catalogs and search. Route Handlers and Server Actions process form validation, file uploads, and inquiry submissions.

TECHNICAL SOLUTION

How the core parts were built

Product and collection discovery

Products, collections, pricing, variants, and availability reach the Next.js frontend from Shopify's commerce system, rendering clean collection grids, product cards, filtering, and detail pages.

Chronos Athletics product and collection selection catalog — Product catalog grid categorizing garments for discovery.

Search functionality

Catalogue search provides real-time debounced queries as the customer types, presenting matching products, pricing, and images with full empty-state and error handling.

Cart and checkout handoff

Cart state is created and maintained on the client with synchronized cart drawers and item counts. Proceeding to checkout seamlessly hands off the session to Shopify's secure checkout.

Custom apparel configurator

The configurator guides customers through garment selection, print choices, collars, and quantity parameters with visual feedback, allowing users to save multiple custom items.

Chronos interactive apparel options configurator — Customization interface for garment options and print specs.

Team-order workflow & submission

A structured multi-step form captures team details, player names, roster sizes, delivery dates, and artwork attachments. Submissions are processed on the server, validated, and forwarded reliably.

Chronos team order form interface — Team order form capturing player details, artwork files, and delivery dates.

Responsive design & error handling

Tailwind CSS utilities ensure responsive adaptation across mobile, tablet, and desktop. Form inputs feature strict validation, inline error feedback, and loading skeletons.

VISUAL WALKTHROUGH

Selected interface details

Interactive item customization panel — Customization panel with real-time option selections.

Team order form with file upload and date picker — Streamlined team order form capturing design files and roster metrics.

Team order step-by-step process section — Process breakdown for bulk sports team purchasing.

FINAL OUTCOMES

What the completed system provides

A custom Next.js storefront connected to Shopify.
Product and collection discovery for standard ecommerce purchases.
Cart and checkout journeys for ready-made products.
A guided configurator for custom sportswear requirements.
Support for saving and reviewing multiple configured items.
A structured team-order inquiry containing relevant customer and project information.
A responsive interface across mobile, tablet, and desktop.
A maintainable separation between the custom frontend and Shopify commerce management.

IMPORTANT DECISIONS & REFLECTION

What mattered most in the final decision-making

The central technical decision was separating standard ecommerce from the custom-team ordering journey while allowing both to operate within one platform.

Headless architecture gave the frontend enough flexibility to support custom interfaces and workflows while retaining Shopify for commerce management. The project strengthened my experience across interface design, application architecture, ecommerce integration, server-side workflows, state management, validation, and production delivery.

Have a storefront or website requirement that needs careful implementation?

Tell me about the project