Unchained Storefront

A blazing-fast, modern e-commerce storefront built with Next.js and powered by Unchained Engine

Documentation

---

✨ Features

🛍️ Complete E-commerce Experience

• Product Catalog - Browse products in different modes
• Shopping Cart - Real-time cart management with persistent state
• Multi-step Checkout - Streamlined checkout flow with guest checkout support
• Order Management - Track orders and view order history
• User Accounts - Registration, login, and profile management

💳 Payment Integrations

• Stripe - Credit/debit card payments
• Datatrans - Swiss payment method
• Cryptopay - Cryptocurrency payments
• Invoice - Traditional invoice payment

🎨 Modern UI/UX

• Responsive Design - Mobile-first approach that works on all devices
• Dark Mode - Built-in dark theme support
• Glass Morphism - Modern frosted glass effects
• Smooth Animations - Delightful micro-interactions and transitions

🔧 Developer Experience

• TypeScript - Full type safety with generated GraphQL types
• Modular Architecture - Clean, maintainable code structure
• Hot Reload - Fast development with Next.js Fast Refresh
• Internationalization - Multi-language support out of the box

🚀 Quick Start

Prerequisites

• Node.js 22.x (check .nvmrc)
• npm or yarn
• An Unchained Engine instance (or use our staging server)

Installation

1. Clone the repository

   git clone https://github.com/unchainedshop/unchained-storefront.git
   cd unchained-storefront

2. Install dependencies

   npm install

3. Configure environment

   Create a .env file:

   UNCHAINED_ENDPOINT=https://your-unchained-instance.com/graphql
   SKIP_INVALID_REMOTES=true

4. Start development server

   npm run dev

   Your storefront is now running at http://localhost:3000 🎉

📦 Available Scripts

# Development
npm run dev              # Start development server (staging backend)
npm run dev:local        # Start with local Unchained instance

# Production
npm run build           # Build for production
npm run start           # Start production server

# Code Quality
npm run lint            # Run ESLint and Prettier
npm run typecheck       # Run TypeScript compiler check

# GraphQL
npm run update-schema   # Update GraphQL schema from backend

# Internationalization
npm run extract-translation    # Extract translatable strings
npm run compile-translation    # Compile translation files

🏗️ Project Structure

unchained-storefront/
├── 📁 modules/                 # Feature modules
│   ├── apollo/                # GraphQL client configuration
│   ├── assortment/            # Product categories
│   ├── auth/                  # Authentication (password, WebAuthn)
│   ├── cart/                  # Shopping cart logic
│   ├── checkout/              # Checkout flow
│   ├── common/                # Shared components
│   ├── products/              # Product pages
│   ├── orders/                # Order management
│   └── layout/                # Layout components
├── 📁 pages/                   # Next.js pages (routes)
├── 📁 public/                  # Static assets
├── 📁 i18n/                    # Translation files
├── 📁 styles/                  # Global styles

🎨 Theming & Customization

Example Storefront Customization

In storefront/styles/globals.css:

:root {
  --primary-color: #0070f3;
  --secondary-color: #ff6b6b;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
}

🌍 Internationalization

The storefront comes with built-in i18n support:

1. Add translations in i18n/[locale].json
2. Extract new strings: npm run extract-translation
3. Use in components:

   const { formatMessage } = useIntl();
   formatMessage({ id: 'welcome', defaultMessage: 'Welcome!' })

🔌 Payment Configuration

Stripe

STRIPE_PUBLIC_KEY=pk_test_...

Datatrans

DATATRANS_MERCHANT_ID=your_merchant_id
DATATRANS_TEST_MODE=true

🤝 Contributing

We love contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• Built with Unchained Engine
• Powered by Next.js
• Styled with Tailwind CSS
• Icons from Heroicons

💬 Support

• 📧 Email: hello@unchained.shop
• 📖 Docs: docs.unchained.shop

---

Built with ❤️ by the Unchained Team

⭐ Star us on GitHub — it motivates us!