Modern Web Standards Showcase

An interactive demonstration platform showcasing 32 cutting-edge web standards, APIs, and CSS features. Built with React 19, TypeScript, Vite 7, and modern web technologies.

Features

• 32 Interactive Demos covering the latest web standards
• React 19.2.0 with automatic optimizations
• Vite 7.1.12 for lightning-fast builds
• TypeScript Strict Mode for maximum type safety
• WCAG 2.2 AA accessibility compliance
• PWA-Ready with manifest and meta tags
• Web Vitals Monitoring for performance tracking
• Security Headers (CSP, X-Frame-Options, etc.)
• Testing Infrastructure (Vitest + Playwright)

Demos Included

Animations (3)

• CSS Scroll-Driven Animations
• View Transitions API
• CSS Carousel Standards

Components (1)

• Web Components (Custom Elements, Shadow DOM)

CSS (6)

• Container Queries
• Cascade Layers
• Grid & Subgrid
• Custom Properties (Variables)
• Shapes
• Anchor Positioning

Data (1)

• Web Streams API

Device (1)

• Screen Wake Lock API

Commerce (1)

• Payment Request API

Input (1)

• Pointer Events

Integration (1)

• Web Share API

Layout (2)

• CSS Grid & Subgrid
• CSS Shapes

Media (2)

• Media Session API
• Picture-in-Picture

Performance (4)

• Intersection Observer
• Resize Observer
• WebAssembly (WASM)
• WebGPU

Storage (3)

• IndexedDB
• File System Access API
• Service Workers

UI (5)

• Popover API
• Command Dialog
• Enhanced Select Fields
• Anchor Positioning
• Hover Cards

UX (1)

• CSS Scroll Snap

Workers (2)

• Service Workers
• Background Workers (Shared & Dedicated)

Getting Started

Prerequisites

• Node.js: 20.19+ or 22.12+ (currently tested with v22.11.0)
• npm: 10.0+ or equivalent package manager

Installation

# Clone the repository
git clone <YOUR_GIT_URL>

# Navigate to project directory
cd web-standards-playground-showcase

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173 (or another port if 5173 is busy).

Available Scripts

Development

npm run dev          # Start Vite dev server with HMR

Production

npm run build        # Build for production
npm run preview      # Preview production build

Testing

npm test             # Run Vitest unit tests
npm run test:ui      # Run Vitest with UI
npm run test:coverage # Generate coverage report

npm run test:e2e       # Run Playwright E2E tests
npm run test:e2e:ui    # Run Playwright with UI
npm run test:e2e:debug # Debug Playwright tests

Code Quality

npx tsc --noEmit     # TypeScript type checking

Tech Stack

Core

• React 19.2.0 - UI library with automatic optimizations
• TypeScript 5.6+ - Type-safe JavaScript (strict mode)
• Vite 7.1.12 - Next-generation build tool
• React Router v7.9.4 - Client-side routing

UI Components

• shadcn/ui - Accessible component library
• Radix UI - Unstyled, accessible primitives
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Icon library

State & Data

• TanStack Query - Async state management
• Zod 4.1.12 - TypeScript-first schema validation

Testing

• Vitest 4.0.5 - Fast unit testing
• Playwright 1.56.1 - E2E testing
• Testing Library - React component testing
• Happy DOM - Fast DOM implementation

Performance

• web-vitals 5.1.0 - Core Web Vitals monitoring
• @vitejs/plugin-react-swc - Fast refresh with SWC

Bundle Size

Production build (gzipped):

• CSS: 77.60 kB (13.05 kB gzipped)
• Main bundle: 543.72 kB (153.44 kB gzipped)
• Total: ~166 kB gzipped

Chunking strategy:

• react-vendor: React, React DOM, React Router
• ui-vendor: Radix UI components
• query-vendor: TanStack Query

Accessibility

All demos meet WCAG 2.2 Level AA standards:

• Keyboard navigation support
• Screen reader compatibility
• Minimum 4.5:1 color contrast
• Skip to main content link
• Touch target sizes (24x24px minimum)
• Focus indicators with high contrast mode
• Reduced motion preferences respected

Security

Security headers configured:

• Content Security Policy (CSP)
• X-Frame-Options: SAMEORIGIN
• X-Content-Type-Options: nosniff
• Referrer-Policy: strict-origin-when-cross-origin
• Permissions-Policy for sensitive APIs

PWA Support

Progressive Web App capabilities:

• Web app manifest (public/manifest.json)
• Installable on desktop and mobile
• Theme color and app icons
• Offline-ready (with service worker implementation)
• App shortcuts for quick access

Performance Budgets

• Total Bundle: < 1MB (compressed)
• Individual Route: < 200KB
• LCP: < 2.5s
• INP: < 200ms
• CLS: < 0.1
• Lighthouse Score: > 90

Browser Support

Most demos support:

• Chrome 113+
• Firefox 126+
• Safari 16.4+
• Edge 113+

Some experimental features (marked in UI):

• CSS Anchor Positioning (Chrome 125+)
• Scroll-Driven Animations (Chrome 115+, Safari 26+)
• File System Access (Chrome 86+, Edge 86+)

Project Structure

.
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # shadcn/ui components
│   │   └── DemoLayout.tsx # Standard demo page wrapper
│   ├── pages/             # Demo pages (32 total)
│   ├── lib/               # Utilities and helpers
│   ├── test/              # Unit tests
│   ├── App.tsx            # Main app with routing
│   └── main.tsx           # App entry point
├── e2e/                   # E2E tests (Playwright)
├── public/                # Static assets
├── .claude/               # Claude Code configuration
│   ├── agents/            # Specialized AI agents
│   ├── skills/            # Reusable patterns
│   └── commands/          # Workflow commands
├── IMPROVEMENTS.md        # Phase 1 completion summary
├── PHASE2_COMPLETE.md     # Phase 2 completion summary
└── README.md              # This file

Creating New Demos

Each demo follows a standard structure:

<DemoLayout
  title="Feature Name"
  description="Brief description"
  status="Stable|New|Experimental"
  specs={[{ name: "Spec", url: "spec-url" }]}
  browserSupport="Browser support info"
>
  <Card>{/* Interactive Demo */}</Card>
  <Card>{/* Code Examples */}</Card>
  <Card>{/* Use Cases */}</Card>
  <Card>{/* Browser Support */}</Card>
</DemoLayout>

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-demo)
3. Add your demo following the standard structure
4. Update App.tsx with the new route
5. Update Index.tsx with demo metadata
6. Ensure tests pass (npm test)
7. Ensure TypeScript compiles (npx tsc --noEmit)
8. Submit a pull request

Recent Updates

Phase 2 (Complete)

• Added Screen Wake Lock API demo
• Added Scroll-Driven Animations demo
• Added File System Access API demo
• Added WebGPU demo
• Upgraded React Router to v7.9.4
• Updated all major dependencies

Phase 1 (Complete)

• Upgraded to React 19.2.0
• Upgraded to Vite 7.1.12
• Enabled TypeScript strict mode
• Added security headers
• Implemented testing infrastructure
• WCAG 2.2 accessibility compliance
• Web Vitals monitoring
• PWA capabilities

See IMPROVEMENTS.md and PHASE2_COMPLETE.md for detailed changelogs.

Known Issues

• Node.js version warning (v22.11.0 vs required v22.12+) - build still works
• React Router v7 installed but using v6 API patterns (works, can be optimized)

Resources

Web Standards Documentation

• Web Standards Reference Guide - Comprehensive guide to all 32 web standards with specifications, browser support, and learning resources

Development Tools

• React Documentation
• Vite Documentation
• shadcn/ui Components
• TypeScript Handbook

Web Platform

• MDN Web Docs
• Web.dev
• Can I Use
• W3C Standards
• WHATWG Living Standards

Accessibility

• WCAG 2.2 Guidelines
• ARIA Authoring Practices Guide
• WebAIM Resources

Browser Status

• Chrome Platform Status
• Firefox Platform Status
• WebKit Feature Status
• Microsoft Edge Platform Status

Support

For issues or questions:

1. Check the demo documentation
2. Review IMPROVEMENTS.md for technical details
3. Open an issue on GitHub