Next Shopify - Modern Commerce Platform

A modern, high-performance e-commerce platform built with the latest web technologies.

What's Inside?

This Turborepo includes the following packages and apps:

Apps

• web: The main Next.js storefront application
• docs: Documentation site built with Next.js

Packages

• @workspace/ui: Shared React component library with shadcn/ui and Tailwind CSS
• @workspace/shopify: Shopify Storefront API client and utilities
• @workspace/typescript-config: Shared TypeScript configuration files
• @workspace/tailwind-config: Shared Tailwind CSS and PostCSS configurations
• @workspace/nextjs-config: Shared Next.js configuration

Tech Stack

• Next.js 16 - React framework with App Router
• Tailwind CSS 4 - Utility-first CSS framework
• Biome - Fast formatter and linter (replaces ESLint + Prettier)
• TypeScript 5 - Type-safe JavaScript
• Turborepo - High-performance build system
• pnpm - Fast, disk space efficient package manager with workspace catalogs
• Recharts - Composable charting library
• SonarCloud - Continuous code quality and security analysis

Getting Started

Prerequisites

• Node.js 22 or later
• pnpm 9 or later

Installation

# Install dependencies
pnpm install

# Start development servers for all apps
pnpm dev

# Build all apps and packages
pnpm build

Development

To develop a specific app:

# Run web app only
pnpm --filter web dev

# Run docs app only
pnpm --filter docs dev

Scripts

• pnpm dev - Start development servers for all apps
• pnpm build - Build all apps and packages
• pnpm lint - Run Biome linter on all packages
• pnpm format - Format all files with Biome
• pnpm check - Run Biome checks (lint + format)
• pnpm type-check - Run TypeScript type checking
• pnpm kill-ports - Kill processes running on ports 3000 and 3001

Project Structure

├── apps
│   ├── docs          # Documentation site
│   └── web           # Main storefront
├── packages
│   ├── typescript-config  # Shared TypeScript configs
│   ├── tailwind-config    # Shared Tailwind CSS configs
│   ├── nextjs-config      # Shared Next.js configs
│   ├── shopify           # Shopify API client
│   └── ui            # Shared React components (shadcn/ui)
├── biome.json        # Biome configuration
├── turbo.json        # Turborepo configuration
└── pnpm-workspace.yaml   # pnpm workspace configuration

Why This Stack?

Biome over ESLint + Prettier

• Faster: 10-100x faster than ESLint + Prettier
• Simpler: Single tool instead of multiple configurations
• Modern: Built from the ground up for modern JavaScript/TypeScript

Next.js 16

• Latest App Router features
• React Server Components by default
• Improved performance and developer experience
• Built-in optimizations

Turborepo

• Intelligent task scheduling and caching
• Remote caching support
• Incremental builds
• Parallel execution

pnpm

• Faster than npm and yarn with workspace catalogs
• Strict dependency management
• Centralized version management via catalogs
• Better monorepo support

Learn More

• Next.js Documentation
• Tailwind CSS Documentation
• Biome Documentation
• Turborepo Documentation
• pnpm Documentation
• Shopify Storefront API

License

MIT