Sticker Shop 🎨

A modern, full-featured sticker shop built with React, Vite, and Shopify Storefront API.

✨ Features

• 🛍️ Shopify Integration - Headless e-commerce with Shopify Storefront API
• 🌍 Multi-Language - German and English with react-i18next
• 🍪 GDPR Compliant - Cookie consent banner with granular controls
• 🎨 Centralized Branding - All styles via CSS custom properties
• 📝 Local Fonts - Self-hosted Google Fonts (Inter + Roboto)
• ✨ Animations - Framer Motion for smooth interactions
• 📤 File Upload - Custom design upload with rights confirmation
• 📱 Responsive - Mobile-first design
• 🚀 Vercel Ready - Optimized for deployment on Vercel

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Shopify Store with Storefront API access

Installation

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

Environment Variables

Edit .env.local with your Shopify credentials:

VITE_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX  # Optional

Local Fonts Setup

Download the required fonts and place them in public/fonts/:

• Inter (Regular, Medium, SemiBold, Bold)
• Roboto (Regular, Medium, Bold)

See public/fonts/README.md for detailed instructions.

Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

📁 Project Structure

src/
├── components/
│   ├── cart/          # Cart drawer component
│   ├── common/        # Shared UI components
│   ├── forms/         # Form components
│   ├── layout/        # Header, Footer, Layout
│   └── product/       # Product-related components
├── context/           # React Context providers
├── hooks/             # Custom React hooks
├── lib/               # Utilities and API clients
├── pages/             # Route pages
├── styles/            # Additional styles
└── types/             # TypeScript type definitions

🎨 Customization

Branding

All brand colors, fonts, and spacing are defined in src/index.css as CSS custom properties:

:root {
  --color-primary: #FF6B35;
  --color-secondary: #4ECDC4;
  --font-family-primary: 'Inter', sans-serif;
  /* ... */
}

Translations

Translation files are embedded in src/lib/i18n.ts. Add new languages by extending the resources object.

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

The project includes vercel.json for optimal configuration.

Other Platforms

Build the project and deploy the dist folder:

npm run build
# Deploy contents of ./dist

📖 Documentation

See agents.md for development guidelines, coding standards, and best practices.

📄 License

MIT License