Upgrade from React 17 to React 19 with CRA-to-Vite migration

[devin-ai-integration]

Summary

Comprehensive upgrade from React 17 to React 19, including a migration from Create React App (CRA) to Vite as the build system and Jest to Vitest as the test runner.

Changes

Dependencies upgraded:

• react / react-dom: ^17.0.2 → ^19.0.0
• react-icons: ^4.3.1 → ^5.0.0
• react-transition-group: ^4.4.2 → ^4.4.5
• web-vitals: ^2.1.4 → ^4.0.0
• @testing-library/react: ^12.1.4 → ^16.0.0
• @testing-library/jest-dom: ^5.16.3 → ^6.0.0
• @testing-library/user-event: ^13.5.0 → ^14.0.0

Build system migration (CRA → Vite):

• Removed react-scripts dependency
• Added vite, @vitejs/plugin-react, vitest, jsdom as devDependencies
• Created vite.config.js with path aliases matching the existing jsconfig.json baseUrl: "src" setup
• Moved index.html to project root with <script type="module"> entry point
• Updated npm scripts: start/dev → vite, build → vite build, test → vitest run

React 19 API migration:

• Entry point (src/index.jsx): Replaced ReactDOM.render() with createRoot() API
• reportWebVitals.js: Updated for web-vitals v4 API (onCLS/onINP instead of getCLS/getFID)
• CSSTransition components (Modal, Alert): Added nodeRef prop to avoid deprecated findDOMNode
• Renamed .js files containing JSX to .jsx (required by Vite): index.js → index.jsx, AlertContext.js → AlertContext.jsx

Test updates:

• Migrated from Jest to Vitest (compatible API, configured in vite.config.js)
• Updated App.test.jsx to wrap App in AlertProvider and test for correct content
• setupTests.js uses @testing-library/jest-dom v6 import

No deprecated patterns found — the codebase did not use defaultProps, propTypes, string refs, legacy context, or findDOMNode directly.

Verification

• npm run build (Vite production build) — passes
• npm test (Vitest) — 1 test passing
• npm run check (Prettier) — all files formatted
• Dev server (npm run dev) — app renders correctly

Review & Testing Checklist for Human

• Run npm install && npm run dev and verify the game loads, keyboard input works, and guesses are scored correctly
• Test modal interactions (How to Play, Settings, Stats) — these use the updated CSSTransition with nodeRef
• Toggle dark mode / high contrast mode in Settings and verify theme switching works
• Run npm test to confirm test suite passes
• Run npm run build and serve dist/ to verify the production build works

Notes

• react-countdown was kept at ^2.3.2 as it is compatible with React 19
• The public/index.html was retained since Vite serves public/ as a static assets directory (favicons, manifest, etc.)
• The root index.html is the new Vite entry point
• Added /dist to .gitignore for Vite build output

Link to Devin session: https://app.devin.ai/sessions/acbd90f22fbb4d32b2e7b8237e4e37d6
Requested by: @shahmir-masood

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring