Modern-SvelteKit-Webshop

🛒 Modern SvelteKit E-Commerce Webshop

[![SvelteKit](https://img.shields.io/badge/SvelteKit-2.0+-ff3e00?style=for-the-badge&logo=svelte)](https://kit.svelte.dev/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-007acc?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/) [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3+-38bdf8?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/) [![Stripe](https://img.shields.io/badge/Stripe-Integration-635bff?style=for-the-badge&logo=stripe)](https://stripe.com/) [![Vitest](https://img.shields.io/badge/Vitest-1.0+-6e9f18?style=for-the-badge&logo=vitest)](https://vitest.dev/) **A production-ready, modern e-commerce platform built with cutting-edge web technologies** [🚀 Live Demo](https://michaelgermini.github.io/Modern-SvelteKit-Webshop/) • [📖 Documentation](#-documentation) • [🛠️ API Reference](#-api-reference)

📸 Screenshots

🏠 Homepage

Homepage - Modern product showcase with featured items

Modern homepage with hero section, featured products, and category navigation

🛍️ Product Catalog

Product catalog with advanced filtering and search

Advanced product catalog with filtering, search, sorting, and pagination capabilities

📦 Product Details

Product detail page with reviews and add to cart

Detailed product page with image gallery, customer reviews, ratings, and purchase options

🛒 Shopping Cart

Shopping cart with item management and checkout

Interactive shopping cart with quantity controls, price calculations, and secure checkout

🌙 Dark Mode Interface

Dark mode interface showcasing modern design

Beautiful dark mode interface with automatic theme switching and modern aesthetics

📱 Mobile Responsive Design

Mobile responsive design optimized for smartphones

Fully responsive design optimized for mobile devices with touch-friendly interface

👤 User Profile

User profile page with account management

User profile page with account settings, order history, and personal information

🔐 Authentication

Login and registration interface

Secure authentication interface with login and registration forms

⚙️ Admin Dashboard

Admin dashboard for product and order management

Comprehensive admin dashboard for managing products, orders, and customers

⌨️ Keyboard Shortcuts

Keyboard shortcuts guide and interface

Keyboard shortcuts guide for enhanced accessibility and productivity

⭐ Featured Products

Featured products showcase on homepage

Featured products section highlighting popular and trending items

📋 Table of Contents

✨ Features

🛍️ E-Commerce Core

💳 Payment & Commerce

🎨 User Experience

🔧 Developer Experience

📊 Analytics & Monitoring

🧰 Tech Stack

Core Framework

🎯 SvelteKit 2.0+    # Full-stack framework with SSR/SSG
🎯 TypeScript 5.0+   # Type-safe development
🎯 Vite 5.0+        # Lightning-fast build tool

Frontend & Styling

🎨 Tailwind CSS 3.3+  # Utility-first CSS framework
🎨 Svelte 4.2+       # Reactive UI framework
🎨 PostCSS 8.4+      # CSS processing

Backend & APIs

🔧 Node.js 20+       # Runtime environment
🔧 Stripe SDK       # Payment processing
🔧 Zod 3.22+        # Schema validation

Development & Quality

🧪 Vitest 1.0+       # Unit testing framework
🧪 Playwright       # E2E testing
🧪 ESLint 8.0+      # Code linting
🧪 Prettier 2.8+    # Code formatting

Deployment & Hosting

🚀 Vercel           # Recommended hosting platform
🚀 Netlify          # Alternative hosting
🚀 Node.js Adapter  # Self-hosted option

🚀 Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

Installation

  1. Clone the repository 
    git clone https://github.com/michaelgermini/Modern-SvelteKit-Webshop.git
cd modern-sveltekit-webshop
  2. Install dependencies 
    npm install
  3. Environment setup 
    cp env.example .env
# Edit .env with your Stripe keys and configuration
  4. Start development server 
    npm run dev
  5. Open your browser 
    http://localhost:5173

Environment Configuration

Create a .env file in the root directory:

# Stripe Configuration
STRIPE_SECRET_KEY=sk_test_your_secret_key_here
PUBLIC_STRIPE_PK=pk_test_your_publishable_key_here

# Application Configuration
BASE_URL=http://localhost:5173
NODE_ENV=development

# Optional: Analytics, Email, etc.
GOOGLE_ANALYTICS_ID=your_ga_id
RESEND_API_KEY=your_resend_key

📁 Project Architecture

modern-sveltekit-webshop/
├── 📁 src/
│   ├── 📁 lib/
│   │   ├── 📁 components/          # 25+ Reusable UI Components
│   │   │   ├── 🛒 ProductCard.svelte
│   │   │   ├── 🛍️ ShoppingCart.svelte
│   │   │   ├── 🎨 ThemeToggle.svelte
│   │   │   └── 🔍 SearchBar.svelte
│   │   ├── 📁 stores/              # Svelte State Management
│   │   │   ├── 🛒 cart.ts          # Shopping cart logic
│   │   │   ├── 🌙 theme.ts         # Dark/light mode
│   │   │   ├── 🔐 auth.ts          # User authentication
│   │   │   └── 💝 favorites.ts     # Wishlist management
│   │   ├── 📁 services/            # Business Logic Layer
│   │   │   ├── 🛍️ products.ts      # Product management
│   │   │   ├── 💳 stripe.ts        # Payment processing
│   │   │   └── 📧 email.ts         # Email notifications
│   │   ├── 📁 utils/               # Utility Functions
│   │   │   ├── 💰 formatPrice.ts   # Currency formatting
│   │   │   ├── 🔍 search.ts        # Search algorithms
│   │   │   └── 📊 analytics.ts     # Usage tracking
│   │   ├── 📁 types/               # TypeScript Definitions
│   │   │   ├── 🛍️ product.ts       # Product interfaces
│   │   │   ├── 🛒 cart.ts          # Cart types
│   │   │   └── 👤 user.ts          # User management
│   │   └── 📁 hooks/               # Custom Svelte Hooks
│   │       └── 🎣 useInfiniteScroll.ts
│   ├── 📁 routes/                  # SvelteKit Routes
│   │   ├── 🏠 +page.svelte         # Homepage
│   │   ├── 🛍️ products/+page.svelte # Product catalog
│   │   ├── 📦 product/[slug]/+page.svelte # Product details
│   │   ├── 🛒 cart/+page.svelte    # Shopping cart
│   │   ├── 👤 profile/+page.svelte # User profile
│   │   ├── 📊 admin/               # Admin dashboard
│   │   └── 🔧 api/                 # Server endpoints
│   │       ├── 💳 checkout/+server.ts
│   │       └── 🪝 webhook/+server.ts
│   ├── 📄 app.html                # HTML template
│   ├── 🎨 app.css                 # Global styles
│   └── 🔧 app.d.ts                # TypeScript declarations
├── 📁 static/                     # Static Assets
│   ├── 🖼️ img/products/           # Product images (25+ SVG)
│   ├── 🎯 favicon.ico             # Site favicon
│   ├── 📱 manifest.json           # PWA manifest
│   ├── 🤖 robots.txt              # SEO robots
│   └── 🔧 sw.js                   # Service worker
├── ⚙️ Configuration Files
│   ├── 📦 package.json            # Dependencies & scripts
│   ├── 🛠️ svelte.config.js        # SvelteKit config
│   ├── ⚡ vite.config.ts           # Build tool config
│   ├── 🎨 tailwind.config.js      # Styling config
│   ├── 🔍 tsconfig.json           # TypeScript config
│   └── 🧪 vitest.config.ts        # Testing config
├── 📚 Documentation
│   ├── 📖 README.md               # This file
│   ├── 🤝 CONTRIBUTING.md         # Contribution guidelines
│   ├── 🔒 SECURITY.md             # Security policy
│   ├── 📋 USAGE_GUIDE.md          # Usage instructions
│   └── 📄 LICENSE                 # MIT license
└── 🔧 Development Tools
    ├── 🚀 .github/workflows/      # GitHub Actions CI/CD
    ├── 🎯 .gitignore              # Git ignore rules
    ├── 🔧 .eslintrc.cjs           # ESLint config
    └── 🎨 .prettierrc             # Prettier config

Key Architecture Principles

🏗️ Separation of Concerns

🔄 Data Flow

User Interaction → Component → Store → Service → API → Database
                                      ↓
                                 UI Updates ← Store ← Component

📦 Component Architecture

🛍️ Product Catalog

Our curated collection includes 52 premium products across multiple categories:

💻 Technology & Gadgets

👕 Apparel & Accessories

🏠 Smart Home & IoT

🎮 Gaming & VR

Advanced Filtering System

💳 Stripe Payment Integration

Secure Checkout Flow

Our Stripe integration provides enterprise-grade payment processing:

// Server-side checkout session creation
export async function POST({ request }) {
  const { items, successUrl, cancelUrl } = await request.json();

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: items.map(item => ({
      price_data: {
        currency: 'eur',
        product_data: { name: item.name },
        unit_amount: item.price,
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
    success_url: successUrl,
    cancel_url: cancelUrl,
  });

  return json({ sessionId: session.id });
}

Webhook Handling

Secure webhook processing for payment confirmations:

export async function POST({ request }) {
  const signature = request.headers.get('stripe-signature');
  const body = await request.text();

  try {
    const event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET
    );

    switch (event.type) {
      case 'checkout.session.completed':
        // Handle successful payment
        await handlePaymentSuccess(event.data.object);
        break;
      case 'payment_intent.payment_failed':
        // Handle payment failure
        await handlePaymentFailure(event.data.object);
        break;
    }

    return json({ received: true });
  } catch (err) {
    throw error(400, 'Webhook signature verification failed');
  }
}

Payment Features

🎨 UI/UX Features

Dark/Light Mode Implementation

Automatic theme switching with system preference detection:

// Theme store with automatic detection
function getSystemTheme(): 'light' | 'dark' {
  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark'
    : 'light';
}

// Apply theme to document
function setThemeClass(theme: 'light' | 'dark') {
  document.documentElement.classList.remove('light', 'dark');
  document.documentElement.classList.add(theme);
}

Responsive Design System

Mobile-first approach with comprehensive breakpoints:

/* Responsive grid system */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

Accessibility Features

WCAG 2.1 AA compliant implementation:

Progressive Web App (PWA)

Service worker implementation for offline functionality:

// Service worker registration
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW registered:', registration.scope);
    })
    .catch(error => {
      console.log('SW registration failed:', error);
    });
}

🔧 Development

Available Scripts

# Development
npm run dev          # Start development server with HMR
npm run build        # Create production build
npm run preview      # Preview production build locally

# Quality & Testing
npm run check        # TypeScript type checking
npm run lint         # ESLint code linting
npm run format       # Prettier code formatting
npm run test         # Run unit tests with Vitest
npm run test:ui      # Run tests with UI interface

# Advanced Testing
npm run test:coverage    # Generate test coverage report
npm run test:e2e         # Run end-to-end tests
npm run test:performance # Performance testing suite

Development Workflow

  1. Clone the repository 
    git clone https://github.com/michaelgermini/Modern-SvelteKit-Webshop.git
cd modern-sveltekit-webshop
  2. Install dependencies 
    npm install
  3. Configure environment 
    cp env.example .env
# Edit .env with your Stripe keys and configuration
  4. Start development server 
    npm run dev
  5. Run quality checks 
    npm run lint
npm run check
npm run test

Code Quality Standards

📊 Testing

Testing Strategy

Our comprehensive testing suite ensures code quality and reliability:

Unit Tests

// Example: Product service testing
import { describe, it, expect } from 'vitest';
import { formatPrice } from '$lib/utils/formatPrice';

describe('formatPrice', () => {
  it('should format EUR currency correctly', () => {
    expect(formatPrice(2500, 'EUR')).toBe('€25.00');
  });

  it('should handle zero values', () => {
    expect(formatPrice(0, 'USD')).toBe('$0.00');
  });
});

Component Testing

// Example: Component testing with Testing Library
import { render, screen, fireEvent } from '@testing-library/svelte';
import ProductCard from '$lib/components/ProductCard.svelte';

describe('ProductCard', () => {
  it('should display product information', () => {
    const product = { name: 'Test Product', price: 1000 };
    render(ProductCard, { props: { product } });

    expect(screen.getByText('Test Product')).toBeInTheDocument();
    expect(screen.getByText('€10.00')).toBeInTheDocument();
  });
});

E2E Testing

// Example: Playwright E2E test
import { test, expect } from '@playwright/test';

test('complete checkout flow', async ({ page }) => {
  await page.goto('/');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout-button"]');

  // Verify Stripe checkout loads
  await expect(page).toHaveURL(/checkout.stripe.com/);
});

Test Coverage

Running Tests

# Run all tests
npm run test

# Run with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

# Run performance tests
npm run test:performance

# Watch mode for development
npm run test:watch

🚀 Deployment

  1. Connect your repository 
    npm install -g vercel
vercel login
vercel link
  2. Configure environment variables 
    vercel env add STRIPE_SECRET_KEY
vercel env add PUBLIC_STRIPE_PK
  3. Deploy 
    vercel --prod

Netlify

  1. Connect via Git
    • Go to Netlify
    • Connect your GitHub repository
    • Set build command: npm run build
    • Set publish directory: build
  2. Environment variables
    • Add STRIPE_SECRET_KEY and PUBLIC_STRIPE_PK
    • Configure build settings

Manual Node.js Deployment

# Build for production
npm run build

# Start production server
npm run preview

# Or use PM2 for process management
npm install -g pm2
pm2 start "npm run preview" --name "webshop"

Environment Variables for Production

# Required
STRIPE_SECRET_KEY=sk_live_your_live_secret_key
PUBLIC_STRIPE_PK=pk_live_your_live_publishable_key

# Optional
NODE_ENV=production
BASE_URL=https://yourdomain.com
GOOGLE_ANALYTICS_ID=GA_MEASUREMENT_ID

🔒 Security

Security Best Practices

Our application implements enterprise-grade security measures:

Environment Security

# Never commit these files
.env
.env.local
.env.production

Data Validation

// Zod schema validation
import { z } from 'zod';

const checkoutSchema = z.object({
  items: z.array(z.object({
    productId: z.string(),
    quantity: z.number().min(1).max(99),
    price: z.number().positive()
  })),
  customerEmail: z.string().email()
});

export async function POST({ request }) {
  const body = await request.json();
  const validatedData = checkoutSchema.parse(body);
  // Proceed with validated data
}

Content Security Policy

// SvelteKit CSP configuration
export async function handle({ event, resolve }) {
  const response = await resolve(event);

  response.headers.set(
    'Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' 'unsafe-inline'; " +
    "style-src 'self' 'unsafe-inline'; " +
    "img-src 'self' data: https:; " +
    "connect-src 'self' https://api.stripe.com"
  );

  return response;
}

Authentication & Authorization

Security Checklist

📈 Performance

Core Web Vitals Optimization

Lighthouse Scores Target

Optimization Techniques

Image Optimization
// Lazy loading with intersection observer
import { onMount } from 'svelte';

let imgElement: HTMLImageElement;
let isIntersecting = false;

onMount(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          isIntersecting = true;
          observer.disconnect();
        }
      });
    }
  );

  if (imgElement) observer.observe(imgElement);
});
Code Splitting
// Dynamic imports for route-based splitting
import { onMount } from 'svelte';

let Component: any;

onMount(async () => {
  const module = await import('./HeavyComponent.svelte');
  Component = module.default;
});
Bundle Analysis
# Analyze bundle size
npm run build
npx vite-bundle-analyzer dist/

Performance Monitoring

Real User Monitoring (RUM)

// Core Web Vitals tracking
import { onMount } from 'svelte';

onMount(() => {
  // CLS (Cumulative Layout Shift)
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log('CLS:', entry.value);
    }
  }).observe({ entryTypes: ['layout-shift'] });

  // FID (First Input Delay)
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log('FID:', entry.processingStart - entry.startTime);
    }
  }).observe({ entryTypes: ['first-input'] });
});

🤝 Contributing

Development Workflow

  1. Fork the repository on GitHub
  2. Clone your fork locally 
    git clone https://github.com/yourusername/Modern-SvelteKit-Webshop.git
cd modern-sveltekit-webshop
  3. Create a feature branch 
    git checkout -b feature/amazing-feature
  4. Make your changes following our guidelines
  5. Run tests and quality checks 
    npm run lint
npm run check
npm run test
  6. Commit your changes 
    git commit -m "feat: add amazing feature

- Detailed description of changes
- Reference to issues if applicable
- Breaking changes noted"
  7. Push and create Pull Request 
    git push origin feature/amazing-feature

Code Standards

TypeScript Guidelines

Component Structure

<script lang="ts">
  // Imports first
  import { createEventDispatcher } from 'svelte';

  // Types and interfaces
  type Product = {
    id: string;
    name: string;
    price: number;
  };

  // Props with proper typing
  export let product: Product;
  export let disabled = false;

  // Reactive statements
  $: isAvailable = product.stock > 0;

  // Event dispatchers
  const dispatch = createEventDispatcher<{
    addToCart: { product: Product; quantity: number }
  }>();

  function handleAddToCart() {
    dispatch('addToCart', { product, quantity: 1 });
  }
</script>

<!-- Template with semantic HTML -->
<button
  {disabled}
  on:click={handleAddToCart}
  class="btn-primary"
  aria-label="Add {product.name} to cart"
>
  Add to Cart
</button>

Commit Message Convention

type(scope): description

[optional body]

[optional footer]

Types:

📄 License

MIT License

Copyright (c) 2024 Modern SvelteKit Webshop

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

📞 Support & Community

Getting Help

Reporting Security Issues

Please report security vulnerabilities by emailing security@germini.info instead of using public issues.

🙏 Acknowledgments

**🎉 Thank you for choosing Modern SvelteKit Webshop!** *Built with ❤️ using modern web technologies* [⬆️ Back to Top](#-modern-sveltekit-e-commerce-webshop)
This site is open source. Improve this page.