httpjpg Monorepo

A modern, type-safe web development monorepo built with Turborepo, Next.js 16, Panda CSS, and Storyblok CMS.

What's Inside

This monorepo contains a complete portfolio suite with reusable packages, a headless CMS integration, and comprehensive design system.

Architecture

httpjpg/
├── apps/
│   ├── web/          # Next.js portfolio website
│   ├── storybook/    # Component library showcase
│   └── docs/         # This documentation site
├── packages/
│   ├── ui/           # React component library (Panda CSS)
│   ├── tokens/       # Design tokens (spacing, colors, typography)
│   ├── storyblok-ui/ # Storyblok component implementations
│   ├── storyblok-sync/ # Automated CMS synchronization
│   ├── storyblok-api/ # Storyblok API client
│   ├── now-playing/  # Spotify integration
│   └── env/          # Type-safe environment variables

Key Features

🎨 Design System

• Panda CSS - Zero-runtime CSS-in-JS with design tokens
• Design Tokens - Consistent spacing, colors, typography
• Component Library - 30+ reusable React components
• Storybook - Interactive component documentation

🚀 Modern Stack

• Next.js 16 - App Router with Turbopack
• TypeScript - Full type safety across the monorepo
• Turborepo - Fast, incremental builds
• pnpm - Efficient package management

📝 Headless CMS

• Storyblok - Visual editing with live preview
• Automated Sync - Design tokens → CMS datasources
• Type-safe Components - TypeScript → Storyblok schemas
• Real-time Preview - Live editing in Visual Editor

Tech Stack