Hydrogen Storefront

This is the headless storefront powering www.birdygrey.com. Built with Shopify's Hydrogen framework and deployed to Shopify Oxygen (Cloudflare).

Tech Stack

• Remix (React Router v7) - Full-stack web framework
• Hydrogen - Shopify's React framework for commerce
• Oxygen - Shopify's edge hosting platform (Cloudflare)
• Vite - Build tool and dev server
• TypeScript - Type-safe JavaScript
• Biome - Fast linting and formatting
• GraphQL - Shopify Storefront API + Admin API
• Sentry - Error tracking and monitoring
• Statsig - Feature flags and experimentation

Quick Start

Requirements:

• Node.js v22 (see .nvmrc)
• npm
• Shopify account with access to BG stores
• VSCode (recommended)

First Time Setup:

1. Run npm install
2. Set up h2 alias: npx shopify hydrogen shortcut
3. Pull environment variables: npm run env:staging
4. Start dev server: npm run dev

Environments

Environment	Shopify Store	Hydrogen Environment	Trigger
Preview	Staging	Preview	Open PR or tag with ci label
Staging	Staging	Production	Merge to main
QA	Production	QA	Push tag to main
Production	Production	Production	Manual dispatch workflow

• Production Store: BIRDY GREY
• Staging Store: Birdy Grey Test Store

For more details, see the Shopify Oxygen Deployment Pipeline document.

Key Features

• Product Grouping - COLOR/FABRIC/BUNDLE grouping on PDPs
• Feature Gates - Statsig integration for controlled rollouts
• Reviews - Yotpo integration with rich filtering
• Cart System - Custom cart with business rules (preorder, MTO, rush, etc.)
• Authentication - Customer accounts with auth wall
• Search - SearchSpring integration
• CMS - Builder.io for content management
• Analytics - Google Tag Manager, Sentry monitoring

Development Tools

• Plop - Component scaffolding (npm run plop)
• Storybook - Component development and testing
• Playwright - E2E testing
• Vitest - Unit testing
• GraphQL Codegen - Type-safe GraphQL queries

Documentation Structure

• Features - Core storefront features and integrations
• Architecture - System design and data flow
• API - Admin and Storefront API endpoints
• Components - UI component library
• Testing - Testing strategies and guides

Contributing

See CONTRIBUTING.md for development guidelines and code conventions.