Skip to content

Hytura case study

Headless Shopify storefront built with Next.js App Router, featuring full customer account management across two Shopify APIs, server-side rendering, and typed GraphQL integration.

Frontend Developer — Personal. Stack: Next.js, Shopify, TypeScript, Tailwind CSS, Vercel. Tasks: Design, Branding, Frontend development. ## Overview A headless Shopify storefront built from scratch as a deliberate experiment into whether decoupling from Shopify's Liquid theming system was genuinely better, or just complexity for its own sake. At the time I was working at Surf&Turf where storefronts were tightly coupled to Shopify's default theming, and I wanted to understand the tradeoffs firsthand. This was also my first serious Next.js project and the first personal project I actually finished. ## Architecture Built on the Next.js App Router with a strict server/client split. Every page that fetches data does so in a Server Component. Interactive pieces (cart drawer, variant switcher, mobile nav) are client components that receive server-resolved data as props. Mutations (adding to cart, logging in, updating addresses) are handled through Server Actions, eliminating the need for a custom API route layer. All Shopify communication lives in a single typed API layer with a generic fetch function handling auth headers, error surfacing, and cache configuration. Shopify's Relay-style paginated responses (`edges`/`nodes`) are flattened with a utility before reaching any component. Tag-based cache invalidation (`revalidateTag`) keeps the UI consistent after mutations without full page reloads. Four React context providers wrap the app: cart drawer state, account drawer state, mobile navigation, and the resolved customer object (populated on the server, passed into the client tree). ## Customer Accounts The most technically involved area. The Shopify Storefront API does not expose a mutation for creating a customer, forcing a split between two APIs with different credentials and base URLs: the Storefront API (GraphQL) for authentication, session tokens, and profile management, and the Admin REST API for customer creation, activation emails, and email lookups. Shopify's internal customer state machine (`disabled`, `invited`, `enabled`) required conditional logic in registration: if an email already exists, the correct response depends on whether the customer is awaiting activation, has never been sent a link, or is already active. Each state requires a different API response path. Activation and password reset token flows required constructing Shopify global IDs from URL parameters and coordinating cookie writes with cart buyer identity updates in a single step so the user is logged in and their cart is linked immediately. Account pages are protected at the layout level: the server checks for the access token cookie and fetches the customer before any HTML is sent, routing unauthenticated users to 404 rather than a login redirect. ## Cart Management The cart persists via a `cartId` cookie. On first item add, a new cart is created (with buyer identity if logged in). When a user logs in with an existing guest cart, the cart's buyer identity is updated retroactively via `cartBuyerIdentityUpdate`. Checkout redirects to Shopify's hosted checkout via `cart.checkoutUrl`. ## Takeaway The headless approach provides full control over the UI layer with real, measurable performance benefits. But the complexity cost is also real, especially around customer accounts where two separate APIs with different auth models must coordinate. None of this is documented end-to-end for headless setups; most of it required reading API reference docs carefully and testing edge cases manually. The biggest personal takeaway was learning to reason about the server/client boundary in the App Router, a mental model I now carry into every Next.js project.
Works

Works

Explore selected projects with timelines, stack choices, and delivery outcomes. This view includes company and freelance examples in a horizontal timeline display.

Project List

Timeline (From 2024)

Projects
202420252026

  1. Triqai

    Today

  2. Rediant

  3. Through the Frames

  4. Hytura

  5. Knitted

  6. Bysidde

Loading workspace

Taxi the dog desktop wallpaper icon