A mobile-first Progressive Web App for tracking basketball games and player statistics.

• Mobile-First Design: Optimized for mobile devices with touch-friendly controls
• Progressive Web App: Install on your device and use offline
• Player Management: Add and manage team rosters
• Game Tracking: Record detailed per-player statistics for each game
• Season Overview: View aggregated stats and per-player averages
• Data Export: Export season data to CSV format
• Offline Support: Full functionality without internet connection

npm install
npm run dev

The app will be available at http://localhost:8100

npm run build

Built files will be in the dist/ directory.

# Run tests
npm test

# Run tests with coverage
npm test:coverage

# Run tests in watch mode
npm test:watch

Performance audit results (as of December 2024):

• First Contentful Paint: < 1s
• Time to Interactive: < 1s
• Speed Index: < 1s
• Total Blocking Time: 0ms
• Cumulative Layout Shift: 0

• ✅ Semantic HTML structure
• ✅ ARIA labels where appropriate
• ✅ Keyboard navigation support
• ✅ Minimum 44x44px touch targets
• ✅ High contrast ratios (WCAG AA compliant)
• ✅ Screen reader friendly
• ✅ Focus indicators

• Static Site Generator: Eleventy (11ty)
• Styling: Modern CSS with custom properties
• JavaScript: Vanilla ES6+ modules
• Testing: Jest + Testing Library
• PWA: Service Worker with cache-first strategy
• Code Quality: Prettier + ESLint

basketball-scorekeeper/
├── src/
│   ├── _includes/
│   │   └── base.njk           # HTML template
│   ├── assets/                # Static assets (icons)
│   │   ├── favicon.svg
│   │   ├── icon-192.svg
│   │   └── icon-512.svg
│   ├── styles/                # Modular CSS
│   │   ├── variables.css      # Design tokens
│   │   ├── base.css           # Reset & base styles
│   │   ├── layout.css         # Layout components
│   │   ├── components.css     # UI components
│   │   ├── utilities.css      # Utility classes
│   │   └── style.css          # Main entry (imports all)
│   ├── utils/                 # JavaScript utilities
│   │   ├── storage.js         # localStorage operations
│   │   ├── calculations.js    # Stats calculations
│   │   └── validation.js      # Input validation
│   ├── pages/                 # Page-specific scripts
│   │   └── index.js           # Main application logic
│   ├── manifest.json          # PWA manifest
│   ├── sw.js                  # Service worker
│   └── index.md               # Entry point
├── tests/
│   └── core.test.js           # Jest test suite
├── .eleventy.js               # Eleventy configuration
├── .prettierrc                # Prettier configuration
├── .eslintrc.json             # ESLint configuration
├── jest.config.js             # Jest configuration
└── package.json

This project uses Eleventy (11ty) as its static site generator instead of Vite for the following reasons:

1. Simplicity: Eleventy is lightweight and perfect for simple PWAs that don't require a heavy framework
2. Vanilla JavaScript: No React or other framework needed - just ES6 modules
3. Static Output: Generates static HTML/CSS/JS files ideal for PWA deployment
4. Fast Builds: Minimal build tooling for quick development iteration
5. PWA-First: Easy integration with service workers and offline-first patterns

When to use Eleventy vs Vite:

• Use Eleventy for simple vanilla JS PWAs, static sites, and lightweight apps
• Use Vite for React-based projects requiring component bundling and HMR

• Removed heavy third-party libraries (XLSX, WebAwesome)
• Built custom, lightweight components
• Reduced bundle size significantly
• Improved load times and offline reliability

• Single-column layouts on mobile
• Touch-optimized button sizes (44x44px minimum)
• Responsive grid system
• Safe area support for notched devices

• Core functionality works without JavaScript
• Service Worker provides offline support
• LocalStorage for data persistence
• Graceful degradation for older browsers

• Chrome/Edge 90+
• Safari 14+
• Firefox 88+
• iOS Safari 14+
• Android Chrome 90+

1. Data Sync: Cloud backup and sync across devices
2. Advanced Statistics:
   • Shooting percentages
   • Plus/minus ratings
   • Heat maps for shot locations
3. Game Analysis:
   • Quarter-by-quarter breakdown
   • Momentum tracking
   • Comparison charts
4. Team Management:
   • Multiple teams support
   • Season history
   • Player photos
5. Enhanced Export:
   • PDF reports
   • Shareable game summaries
   • Social media integration

• Image optimization for icons (WebP/AVIF)
• Code splitting for larger features
• Service Worker precaching strategies
• IndexedDB for larger datasets

• Dark mode support
• Customizable team colors
• Undo/redo functionality
• Drag-and-drop roster management
• Quick stats entry shortcuts

• Voice input for stats
• High contrast mode
• Adjustable font sizes
• Screen reader optimizations

ISC

Adam Jolicoeur

Contributions are welcome! Please feel free to submit a Pull Request.