feat: Add performance monitoring and analytics#15
Open
slmingol wants to merge 19 commits intoand-computers:mainfrom
Open
feat: Add performance monitoring and analytics#15slmingol wants to merge 19 commits intoand-computers:mainfrom
slmingol wants to merge 19 commits intoand-computers:mainfrom
Conversation
- Add Dockerfile with Node.js build and Nginx production stages - Add docker-compose.yml for local development with build - Add docker-compose.simple.yml for running from GHCR - Add .dockerignore to optimize build context - Use Debian-based Node image for ARM compatibility
- Upgrade React & React DOM to v19.2.4 - Upgrade date-fns from v2 to v4 - Upgrade prettier from v2 to v3 - Upgrade react-spring from v9 to v10 - Upgrade query-string from v8 to v9 - Upgrade tailwind-merge from v1 to v3 - Upgrade ua-parser-js from v1 to v2 - Upgrade Parcel to v2.16.4 - Upgrade lucide-react to v0.575.0 - Upgrade Tailwind CSS to v3.4.19 - Upgrade all @radix-ui packages to latest versions - Upgrade other dependencies to latest compatible versions All tests passing with legacy peer deps for React 19 compatibility
- Upgrade to Node 20 (required by rimraf@6 and other packages) - Switch from npm ci to npm install --legacy-peer-deps for React 19
- Upgrade to Node 20 (required by rimraf@6 and other packages) - Switch from npm ci to npm install --legacy-peer-deps for React 19
chore: Update Dockerfile for React 19 compatibility
- Remove obsolete docker-compose version attribute - Update dev service from Node 18 to Node 20 - Remove unused eslint and eslint-config-react-app packages - Add package overrides to force secure versions of minimatch and glob - Fixes all 21 high severity security vulnerabilities (now 0) This resolves GHSA-3ppc-4f35-3m26 (minimatch ReDoS vulnerability) and eliminates all transitive dependencies on vulnerable package versions.
fix: Address critical security and configuration issues
- Add .nvmrc for consistent Node 20 environment - Enhance package.json scripts (start, clean, format, format:check, test) - Add GitHub Actions CI/CD workflow - Runs on push to main and PRs - Format check, tests, and build verification - Docker image build and push to GHCR (main branch only) - Setup Vitest testing framework - Configured for JSX support in .js files - Includes React Testing Library and jsdom - Added example test for WordButton component - Test scripts: test, test:ui, test:run, test:coverage All tests passing (4/4) with 0 vulnerabilities maintained.
feat: Add developer experience improvements
- Update React 18 → React 19 - Add Node 20 prerequisite and .nvmrc mention - Add Docker setup instructions (local build and GHCR image) - Document all npm scripts (start, test, format, clean, etc.) - Add testing section with Vitest and React Testing Library - Add CI/CD section explaining GitHub Actions workflow - Enhance Contributing section with development requirements - Note --legacy-peer-deps flag requirement - Add technology stack updates (Vitest, Docker, Node 20)
docs: Update README with React 19, Docker, testing, and CI/CD info
- Install Storybook 10.2.10 with React-Vite framework - Configure Storybook with essential addons: - @chromatic-com/storybook for visual testing - @storybook/addon-vitest for component testing integration - @storybook/addon-a11y for accessibility checks - @storybook/addon-docs for automatic documentation - Add vite.config.js for JSX support in .js files - Create example stories: - WordButton: Interactive word selection with multiple scenarios - Button: All design system button variants and sizes - Badge: Badge variants with game status examples - Update README with Storybook documentation and known limitation - Add storybook and build-storybook npm scripts Note: Storybook requires refactoring React component files from .js to .jsx extensions to work properly. This is due to the non-standard practice of using .js extensions for JSX content. Example stories are provided as reference for when this refactoring is completed. Future work: Rename all React component files to use .jsx extension for full Storybook compatibility.
This modernizes the codebase to follow React best practices by using .jsx extensions for files containing JSX syntax. Changes: - Renamed 17 component files: .js → .jsx - All components in src/components/ - All modal components - Both provider components Benefits: - ✅ Makes Storybook fully functional (no longer requires refactoring) - ✅ Follows modern React conventions - ✅ Improves code clarity (file extension indicates JSX content) - ✅ Better IDE/editor support and syntax highlighting - ✅ Aligns with modern build tool expectations (Vite, etc.) Verified: - ✅ Dev server works (npm run dev) - ✅ Production build works (npm run build) - ✅ Tests pass (npm run test:run) - 24 tests including Storybook component tests - ✅ Storybook builds successfully (npm run build-storybook) No breaking changes - index.js files use extensionless imports which resolve correctly to .jsx files.
Remove note about Storybook requiring refactoring since .jsx refactor is complete.
refactor: Rename React component files from .js to .jsx
- Add web-vitals package for Core Web Vitals tracking (CLS, FCP, INP, LCP, TTFB) - Create analytics utility with support for multiple providers (GA4, Plausible, custom) - Track game events: game_won, game_lost, guess submissions, UI interactions - Integrate performance monitoring in application entry point - Add analytics tracking to key user interactions: - Game lifecycle events (won/lost with metadata) - Guess submissions and outcomes - UI interactions (shuffle, deselect, view results, share, info modal) - Update README with comprehensive analytics configuration guide - Maintain zero security vulnerabilities The analytics system is provider-agnostic and logs to console in development mode. In production, it automatically sends data to configured analytics providers without requiring code changes.
Resolves MODULE_TYPELESS_PACKAGE_JSON warning when running tests. This warning appeared because .storybook/main.js uses ES modules syntax without package.json explicitly declaring type: module.
- Added name: react-connections-game - Added version: 1.0.0 - Added description - Added license: MIT - Added repository, bugs, homepage URLs - Added keywords for better discoverability Resolves missing package.json metadata from modernization checklist.
feat: Add performance monitoring and analytics
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Performance monitoring with Core Web Vitals + analytics tracking. See fork: https://github.com/slmingol/react-connections-game