Upgrade React 17 to React 19, replace Create React App with Vite

[devin-ai-integration]

Summary

Two-major-version React upgrade (17 → 19) combined with a full build tooling migration from Create React App to Vite.

Build tooling (CRA → Vite):

• Added vite.config.js with @vitejs/plugin-react and resolve.alias entries mirroring the existing jsconfig.json baseUrl: "src" convention
• Moved public/index.html to root index.html, stripped %PUBLIC_URL% placeholders, added <script type="module" src="/src/index.jsx">
• Replaced react-scripts scripts with vite / vite build / vite preview
• Added "type": "module" to package.json; removed eslintConfig and browserslist CRA blocks
• Renamed AlertContext.js → .jsx and index.js → .jsx (Vite requires .jsx extension for files containing JSX)

React 19 entry point:

• ReactDOM.render() → createRoot() from react-dom/client in src/index.jsx

react-transition-group findDOMNode fix (React 19 removes findDOMNode):

• Added nodeRef prop + matching ref on child DOM nodes in both Modal.jsx and Alert.jsx

Dependency upgrades:

Package	Before	After
react / react-dom	^17.0.2	^19.0.0
react-icons	^4.3.1	^5.4.0
web-vitals	^2.1.4	^4.2.4 (getFID → getINP)
@testing-library/react	^12.1.4	^16.1.0
@testing-library/jest-dom	^5.16.3	^6.6.3
@testing-library/user-event	^13.5.0	^14.5.2
husky	^7.0.4	^9.1.7
lint-staged	^12.3.7	^15.2.11
prettier	2.6.1	^3.4.2

Testing infra: Jest (via CRA) → Vitest + jsdom. Setup file now imports @testing-library/jest-dom/vitest. The existing boilerplate test was updated to actually match app content (wraps <App> in <AlertProvider>, asserts on "wordle" text).

Formatting-only diffs in several files are from Prettier 3.x (trailing commas, multi-line SCSS transitions).

Review & Testing Checklist for Human

• Verify animations work: The nodeRef additions to CSSTransition in Modal.jsx and Alert.jsx are the most fragile part of this upgrade. Open the app and confirm modal fade-in/out, alert pop-in/out, and cell flip/jiggle animations all behave correctly.
• Verify react-icons 5.x compatibility: This is a major version bump — confirm all icons render (header icons, close button in modals, keyboard icons if any). Check that import paths like react-icons/ri still resolve.
• Test localStorage persistence end-to-end: Play a game, refresh, confirm board state, dark mode, high contrast, hard mode, and stats all persist correctly.
• Production build output: Run npm run build and serve via npm run preview — verify the built app works identically to dev mode (Vite's production build uses Rollup which can surface different issues than the dev server's esbuild).
• ESLint gap: CRA's eslint config (react-app, react-app/jest) was removed with no standalone replacement. Decide if a new ESLint config is needed.

Notes

• The prepare script still uses husky install which is deprecated in husky v9 (the commit showed a deprecation warning). A follow-up to migrate to husky v9's husky init pattern may be desired.
• The original test (renders learn react link) was a CRA boilerplate that likely never passed against this app. The replacement test is minimal but functional.
• react-countdown and react-transition-group were only minor-bumped; their React 19 compat should be fine with the nodeRef fix in place, but worth a quick smoke test of the countdown timer in StatsModal.

Link to Devin session: https://app.devin.ai/sessions/3322519acf4a4dec902eee53230ef0ba

---

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

[devin-ai-integration]

End-to-End Test Results

Tested the app running on Vite dev server (localhost:5173) after the React 17 → 19 migration.

All 10 tests passed.

Test Results

Test	Result
App loads with header, grid, keyboard, and react-icons 5.x	Passed
Info modal opens/closes with fade animation (CSSTransition nodeRef)	Passed
Dark Mode toggle in Settings modal	Passed
High Contrast Mode toggle	Passed
Keyboard input and grid tile rendering	Passed
Word submission with tile flip animation and keyboard color update	Passed
Invalid word rejection (jiggle + "Not in word list" alert)	Passed
Not enough letters alert	Passed
Stats modal with statistics and guess distribution	Passed
localStorage persistence after page refresh (board state + theme)	Passed

Key Migration Verifications

• CSSTransition nodeRef: Modal and Alert components use nodeRef correctly — fade animations work without findDOMNode
• react-icons 5.x: All icons render (BsInfoCircle, BsBarChart, BsGear, RiCloseCircleLine)
• createRoot API: App bootstraps correctly
• Vite build: Production build completes (381.62 KB JS)
• Vitest: Test suite passes
• web-vitals 4.x: No runtime errors from getINP replacement

App loaded	Tile flip with colors	Stats modal

Devin session