A modern TypeScript playground and monorepo showcasing cutting-edge web and mobile development technologies. Built with React, React Native, and a comprehensive suite of tools for building production-ready applications.

• 🎨 Design System: Comprehensive theme management with design tokens, light/dark modes, and cross-platform support
• 🧩 Component Library: Modern, accessible React components built with Radix UI primitives and Tailwind CSS
• 📱 Mobile App: Expo/React Native application demonstrating cross-platform development
• 📚 Documentation: Interactive Storybook environment for component development and testing
• 🔧 Developer Experience: TypeScript-first development with comprehensive tooling and testing
• ⚡ Modern Tooling: Turborepo, pnpm workspaces, Vite, and automated workflows

• Node.js v22.13.1 or higher
• pnpm v9.15.4 or higher

# Clone the repository
git clone https://github.com/marcusrbrown/sparkle.git
cd sparkle

# Install dependencies
pnpm bootstrap

# Start the development environment
pnpm dev

This will start:

• Storybook at http://localhost:6006
• Mobile app with Expo (follow CLI instructions)
• Component library in watch mode

# Install dependencies
pnpm bootstrap

# Start development servers
pnpm dev

# Build all packages
pnpm build

# Run tests
pnpm test

# Type checking
pnpm check:types

# Linting and formatting
pnpm lint
pnpm check

# Clean build artifacts
pnpm clean

This monorepo uses pnpm workspaces and Turborepo for efficient package management and build orchestration:

# Add dependency to specific package
pnpm add --filter @sparkle/ui react

# Run command in specific package
pnpm --filter @sparkle/ui build

# Run command in all packages
pnpm -r build

// packages/ui/src/components/NewComponent/NewComponent.tsx
import {forwardRef} from 'react'

export interface NewComponentProps {
  children: React.ReactNode
  variant?: 'default' | 'accent'
}

export const NewComponent = forwardRef<HTMLDivElement, NewComponentProps>(
  ({children, variant = 'default', ...props}, ref) => {
    return (
      <div ref={ref} className={`new-component new-component--${variant}`} {...props}>
        {children}
      </div>
    )
  }
)

NewComponent.displayName = 'NewComponent'

• TypeScript - Type-safe JavaScript
• React - UI library for web applications
• React Native - Cross-platform mobile development
• Expo - Mobile app development platform

• Turborepo - High-performance build system
• pnpm - Fast, disk space efficient package manager
• Vite - Lightning-fast build tool
• tsdown - TypeScript bundler

• Tailwind CSS - Utility-first CSS framework
• Radix UI - Unstyled, accessible components
• Storybook - Component development environment

• Vitest - Fast testing framework
• Testing Library - Simple testing utilities
• ESLint - JavaScript linter
• Prettier - Code formatter

sparkle/
├── packages/
│   ├── ui/              # React component library
│   ├── theme/           # Cross-platform theme system
│   ├── types/           # Shared TypeScript definitions
│   ├── utils/           # Utility functions and hooks
│   ├── config/          # Build and lint configurations
│   ├── storybook/       # Component documentation
│   ├── fro-jive/        # Mobile application
│   └── error-testing/   # Error handling utilities
├── docs/                # Project documentation
├── scripts/             # Build and maintenance scripts
└── ...config files

• Project Guide - Comprehensive development guide
• Best Practices - Development standards and guidelines
• Storybook - Interactive component documentation (when running locally)