🛋️ Shop

Modern e-commerce portfolio project built with Nuxt 4 and TypeScript

🌐 Demo

Live Demo: shop.jenningschaefer.com

⚠️ Disclaimer: This is a portfolio project. All products, prices, and transactions are fictional. No actual purchases can be made.

✨ Features

• 🛒 Product catalog with categories (Chairs, Tables, Lighting, Accessories)
• ❤️ Favorites / Wishlist functionality
• 🛍️ Shopping cart with quantity management
• 📱 Responsive design for all devices
• 🎨 Custom SCSS styling with 7-1 architecture
• 🖼️ Optimized images with @nuxt/image

🛠️ Tech Stack

Category	Technology
Framework	Nuxt 4
Language	TypeScript
Styling	SCSS with 7-1 Architecture
State	VueUse + LocalStorage
Images	@nuxt/image
Linting	ESLint + Prettier

🚀 Quick Start

Prerequisites

• Node.js 20+ (recommended; see .nvmrc)
• npm or pnpm

Installation

# Clone the repository
git clone https://github.com/jenningschaefer/shop.git
cd shop

# Install dependencies
npm ci --legacy-peer-deps

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

# Build the application
npm run build

# Preview production build
npm run preview

# Generate static site
npm run generate

📁 Project Structure

shop/
├── assets/
│   ├── SCSS/              # Styles (7-1 pattern)
│   ├── fonts/             # Custom fonts (Open Sans)
│   └── svg/               # SVG sprites (icons, logos)
├── components/
│   ├── UI/                # Generic UI components
│   ├── Product/           # Product-related components
│   ├── Order/             # Cart, favorites
│   └── Checkout/          # Checkout flow
├── composables/           # Vue composables
├── data/                  # Mock JSON data
├── docs/                  # Documentation
├── layouts/               # Page layouts
├── pages/                 # Route pages
├── public/                # Static assets
└── types/                 # TypeScript definitions

📖 Documentation

Detailed documentation is available in the docs/ folder:

• Modernization Plan - Roadmap for improvements
• Code Standards - Coding conventions and style guide
• Architecture - System design and patterns
• Testing Guide - Testing strategy and how to write tests

🧪 Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run generate	Generate static site
npm run lint	Run ESLint
npm run lint:fix	Fix ESLint errors
npm run typecheck	Run TypeScript type checking
npm run test	Run unit tests (watch mode)
npm run test:run	Run unit tests once
npm run test:coverage	Run tests with coverage
npm run test:e2e	Run E2E tests with Playwright
npm run size:check	Check bundle sizes
npm run format	Format code with Prettier
npm run format:check	Check code formatting
npm run validate	Run all checks (lint, format, typecheck, test)
npm run ci	Full CI pipeline (validate + build)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Jenning Schaefer

• Website: jenningschaefer.com
• GitHub: @jenningschaefer