TypeScript Migration and Modern Build System Upgrade

[StevenAskwith]

TypeScript Migration, Modern Build System, and Legacy Browser Support

Summary

This PR modernizes the DREM frontend codebase with a migration from JavaScript to TypeScript and Create React App to Vite, and adds compatibility support for Firefox 84.0 (the browser on DeepRacer cars' Ubuntu GUI).

Key Changes

🔧 Build System Modernization

• Migrated from Create React App to Vite for all three frontend applications:
  • Main website (website/)
  • Leaderboard (website-leaderboard/)
  • Stream overlays (website-stream-overlays/)
• Updated Docker configurations to support the new build system
• Modernized ESLint configuration with new config format

📝 TypeScript Migration

• Complete TypeScript conversion of 289+ files
• Added comprehensive type definitions:
  • API response types (types/api-responses.ts)
  • Domain models (types/domain.ts)
  • GraphQL types (types/graphql.ts)
  • Enums and constants (types/enums.ts)
• Type-safe hooks and components throughout the application
• Maintained backward compatibility while adding type safety

🏎️ Legacy Browser Support for Car Activation

The TypeScript/Vite/React 18 stack targets ES2020, which is incompatible with Firefox 84.0 - the browser shipped on DeepRacer cars running Ubuntu 20.04. This caused the car activation page to crash when accessed directly from a DeepRacer car.

Solution: automatic browser detection with fallback page

• carActivationWrapper.tsx - detects legacy browsers via feature detection and user agent checks, automatically redirects to the legacy page. Supports ?legacy=true URL param for testing
• carActivationOriginal.tsx - the original React/Cloudscape component, unchanged
• carActivation.tsx - re-exports from the wrapper, preserving all existing imports and routing
• car-activation-legacy.html - standalone vanilla JS/HTML page served from public/. Compatible with Firefox 84.0. Loads the AppSync endpoint from sessionStorage (set by App.tsx on load), finds the Cognito idToken from Amplify's localStorage entries, and calls AppSync directly. Provides full car activation functionality including fleet selection, hostname/password, WiFi config, and custom console option

Auth flow: the operator logs into DREM normally via the Amplify login page (compatible with Firefox 84.0), which stores the Cognito idToken in localStorage. When redirected to the legacy page, the token is already available and used directly as the AppSync Authorization header.

🏗️ Architecture Improvements

• Enhanced GraphQL integration with proper TypeScript types and updated GraphQL operations (mutations.ts, queries.ts, subscriptions.ts)
• Improved state management with typed stores
• Better error handling with type-safe error responses
• Modernized React patterns and hooks usage
• New useAuth hook centralising authentication logic, replacing scattered auth calls across components
• Removed useGroupsApi.ts - consolidated into other hooks

🐍 Backend Updates

• Upgraded Lambda runtime to Python 3.12 across all Lambda functions (lib/base-stack.ts)

🐛 Bug Fixes

• Fixed Race Time displaying as "NaN" in laps table and race lap information components
• Fixed /admin/events and /admin/events/create pages broken during TypeScript migration - corrected domain types and GraphQL mutations
• Fixed leaderboard and stream overlay configurations post-Vite migration

🧪 Testing

• Added Vitest configuration (vitest.config.ts) and test runner support via Makefile
• Added GraphQL schema conformance tests to validate frontend operations against the AppSync schema
• Updated metric calculation tests to align with refactored metricCalculations.ts

📚 Documentation

• Added comprehensive TypeScript migration documentation:
  • TYPESCRIPT_MIGRATION_CHECKLIST.md - Step-by-step migration guide
  • TYPESCRIPT_MIGRATION_STATUS.md - Current migration status
  • TYPESCRIPT_QUICK_REFERENCE.md - TypeScript best practices
  • API_TYPES_USAGE.md - API types usage guide

🔄 Dependency Updates

• Upgraded to Amplify v6 with modern authentication patterns
• Updated all major dependencies to latest stable versions
• Improved build performance with Vite's faster compilation

Testing

• ✅ All existing functionality preserved
• ✅ Type safety improvements reduce runtime errors
• ✅ Faster development builds with Vite
• ✅ Improved developer experience with better IDE support
• ✅ Car activation tested on Firefox 84.0 (DeepRacer Ubuntu GUI)
• ✅ Car activation tested on modern browsers (full React interface)
• ✅ GraphQL schema conformance tests added
• ✅ Metric calculation unit tests updated and passing

Breaking Changes

• None - Non-breaking migration that maintains full API compatibility
• Build system changes are internal and don't affect end users
• Deployment process remains unchanged

Benefits

• 🚀 Faster build times with Vite
• 🛡️ Type safety reduces bugs and improves maintainability
• 🔧 Better developer experience with improved IDE support
• 📈 Future-proof codebase with modern tooling
• 🎯 Enhanced code quality with TypeScript's static analysis
• 🏎️ DeepRacer car compatibility - operators can now activate cars directly from the car's own browser

[davidfsmith]

Have this running as a fresh deploy and have found a couple of issues so far in initial testing

1. Can't create a user via Registration -> Add user (as used at events)

2. Can't add an event

[StevenAskwith]

@davidfsmith issues resolved, ready for retest

[davidfsmith]

Timekeeper view is attempting to connect to an insecure websocket endpoint but functionality is working as expected

[davidfsmith]

@davidfsmith issues resolved, ready for retest

re-tested, am now able to create events and also add users via registration

[davidfsmith]

Issue with calculations when selecting multiple races, should display averages and is instead showing NaN, also a single race is showing NaN for lap times

[davidfsmith]

Also impacts commentator -> race statistics view (both screen shots from same race)

[davidfsmith]

Timing is all now displaying correctly in manage race and also the commentator view, warning around insecure websocket connection remains in developer tools

Leaderboard and Overlays all working as expected

[davidfsmith]

Recording a race using a timer still shows the automatic timer not connected even when one was used

[davidfsmith]

All basic functionality checked, including leaderboard and overlays.

Outstanding / Not tested:

1. Activating a DeepRacer car using Firefox on the DeepRacer the activation page is blank. I suspect this is due to the version of FF on a flashed car. Car activation over SSH works fine. (existing bug) - user agent is Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0 on an updated car - will re-flash
2. I've not been able to test car logs and video at this time.

[davidfsmith]

Legacy car activation page worked perfectly 👍

For reference the user agent of a car flashed with 20.04 is User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0 so same as logged earlier (car updates from the activation script leave this unchanged)

[davidfsmith]

All of the core functionality is there as well as a nice fix for car activation. It looks good to merge to me (IMHO)