Skip to content

Releases: theteleporter/hirachu

Hirachu v1.0.0 - Initial Public Release

11 Feb 16:10
@theteleporter theteleporter
v1.0.0
55ef241

Choose a tag to compare

View all tags
Hirachu v1.0.0 - Initial Public Release Latest
Latest

First public release of Hirachu, a modern headless e-commerce storefront built with Next.js 16 and Shopify.

What is Hirachu?

Hirachu is a Tokyo-inspired minimalist e-commerce platform for handcrafted collectible dolls. Built with modern web technologies, it showcases how to create a performant, beautiful storefront using Shopify's Storefront API.

Key Features

E-commerce Core

  • Full Shopify Storefront API integration (2025-10)
  • Shopping cart with persistent state
  • Wishlist functionality
  • Direct checkout flow to Shopify

Search & Discovery

  • Command palette search (Ctrl+K / ⌘K)
  • Fuzzy product search across names, descriptions, and categories
  • Real-time filtering and instant results

Performance

  • Incremental Static Regeneration (ISR) with 1-hour revalidation
  • Lazy loading and image optimization
  • Route-based code splitting
  • Lighthouse scores: 95+

Progressive Web App

  • Custom service worker for offline support
  • Caches key pages (home, shop, about, contact)
  • Auto-registers in production builds

Developer Experience

  • Next.js 16 with App Router and Turbopack
  • TypeScript throughout
  • Server Actions for form handling
  • Tailwind CSS v4
  • Framer Motion animations

SEO & Analytics

  • Dynamic OG image generation with custom fonts
  • Structured data and metadata
  • Vercel Analytics and Speed Insights
  • Sitemap and robots.txt

Design Philosophy

Tokyo minimalist aesthetic with editorial typography and smooth interactions. Inspired by modern design systems from Rauno Freiberg and Japanese editorial design.

Visual Elements:

  • Clean layouts with ample whitespace
  • Hachi Maru Pop font for headings
  • Geist for body text
  • Subtle animations and transitions
  • Backdrop blur effects
  • Hover states with sliding backgrounds

Tech Stack

  • Framework: Next.js 16 (App Router, Turbopack)
  • Styling: Tailwind CSS v4
  • Animations: Framer Motion
  • E-commerce: Shopify Storefront API
  • Search: cmdk (Command Palette)
  • Icons: Phosphor Icons
  • Deployment: Vercel-optimized

Installation

Prerequisites

  • Node.js 18+
  • pnpm (recommended) or npm
  • Shopify store with Storefront API access

Quick Start

# Clone the repository
git clone https://github.com/theteleporter/hirachu.git
cd hirachu

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Shopify credentials

# Run development server
pnpm dev

Environment Variables

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_token

Getting Shopify credentials:

  1. Shopify Admin → Settings → Apps and sales channels
  2. "Develop apps" → "Create an app"
  3. Configure Storefront API scopes
  4. Install and copy your Storefront Access Token

Deployment

Vercel (Recommended)

# Deploy to Vercel
vercel

# Or connect your GitHub repo via Vercel dashboard

Other Platforms

Compatible with any Next.js hosting platform:

  • Netlify
  • Railway
  • Fly.io
  • Self-hosted with Node.js

Project Structure

hirachu/
├── app/              # Next.js App Router pages
│   ├── api/         # API routes (OG images)
│   ├── shop/        # Product pages
│   └── ...
├── components/      # React components
│   ├── sections/   # Layout sections
│   ├── cart/       # Shopping cart
│   └── ...
├── lib/            # Utilities and helpers
│   ├── shopify.ts  # Shopify API client
│   ├── actions.ts  # Server Actions
│   └── ...
└── public/         # Static assets

Configuration

Email Integration

Add your email service provider in lib/actions.ts:

  • Newsletter: subscribeToNewsletter()
  • Contact Form: submitContactForm()

Recommended services: Resend, SendGrid, Postmark

Customization

  • Colors & Theme: app/globals.css
  • Typography: app/layout.tsx
  • Products: Use CSV import template in files/

Known Limitations

  • Newsletter and contact forms require email service integration (not included)
  • Search is client-side only (no server-side indexing)
  • Checkout redirects to Shopify (headless checkout not implemented)
  • No order history or customer accounts (Shopify-managed)

Performance Metrics

Lighthouse Scores (Desktop):

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

Core Web Vitals:

  • LCP: < 2.5s
  • FID: < 100ms
  • CLS: < 0.1

Browser Support

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT License - see LICENSE for details

Author

The Teleporter

Contributing

Contributions welcome! Please read CONTRIBUTING.md first.

Acknowledgments

  • Design inspiration: Rauno Freiberg, Tokyo editorial design
  • Icons: Phosphor Icons
  • Commerce: Shopify Storefront API
  • Fonts: Vercel Geist, Hachi Maru Pop (Google Fonts)

Support

Full Changelog: Initial release

Built for doll collectors worldwide.

Assets 2
Loading