Migrate from CRA to Vite and upgrade to React 19

[devin-ai-integration]

Summary

Complete migration from Create React App (CRA) to Vite and upgrade from React 17 to React 19. This modernizes the build tooling and ensures compatibility with React's latest APIs.

Changes

Build tooling (CRA → Vite):

• Replaced react-scripts with vite + @vitejs/plugin-react
• Created vite.config.js with path aliases matching the existing jsconfig.json baseUrl: "src" setup
• Moved public/index.html → root index.html with Vite module script entry
• Replaced %PUBLIC_URL% references with plain paths (Vite handles public assets differently)
• Removed browserslist and eslintConfig sections from package.json
• Deleted reportWebVitals.js and removed web-vitals dependency

React 17 → 19:

• Upgraded react and react-dom to ^19.0.0
• Migrated src/index.js → src/index.jsx using createRoot API instead of ReactDOM.render
• Added nodeRef to CSSTransition in Alert.jsx and Modal.jsx (replaces removed findDOMNode)
• Renamed AlertContext.js → AlertContext.jsx for Vite's JSX parsing requirement

Testing (Jest → Vitest):

• Replaced react-scripts test (Jest) with Vitest (vitest, jsdom)
• Vitest config embedded in vite.config.js with globals: true and jsdom environment
• Upgraded @testing-library/react to ^16.0.0, @testing-library/jest-dom to ^6.0.0, @testing-library/user-event to ^14.0.0
• Fixed App.test.jsx — replaced CRA placeholder test ("learn react") with a test that matches actual app content

Dependency upgrades:

• react-icons: ^4.3.1 → ^5.4.0
• classnames: ^2.3.1 → ^2.5.1
• sass: ^1.49.9 → ^1.86.0
• react-countdown: ^2.3.2 → ^2.3.6
• react-transition-group: ^4.4.2 → ^4.4.5

Screenshot of running app (Vite dev server):

Review & Testing Checklist for Human

• Run npm start and verify the app loads, play a game, check dark mode / high contrast / hard mode toggles, modals open/close, alerts animate
• Run npm run build and verify production build succeeds
• Run npm run test and verify tests pass
• Open browser console and confirm no React warnings about deprecated APIs
• Verify keyboard input works (both virtual and physical keyboard)

Notes

• npm run build produces a dist/ folder (Vite default) instead of CRA's build/ folder
• The eject script has been removed since it was CRA-specific
• All path aliases (components, hooks, lib, constants, context, styles) are configured in vite.config.js

Link to Devin session: https://app.devin.ai/sessions/b94e4bb693f84028b4d7eb1dc19b30f3
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

[devin-ai-integration]

End-to-End Test Results

Ran Vite dev server locally, tested all migration changes via browser UI.

All 7 tests passed.

Core Migration Tests

• App renders on Vite dev server (React 19 createRoot) — passed
• Info modal opens/closes with CSSTransition nodeRef — passed
• Alert animation: "Not enough letters" shows and fades (nodeRef) — passed
• Word submission: tile flips with color reveals, keyboard updates — passed

Settings & Dependencies

• Dark Mode toggle OFF/ON — passed (background changes white↔dark)
• High Contrast Mode toggle — passed (tiles use orange/cyan colors)
• Stats modal with react-countdown — passed (stats bars render correctly)

Console Check

• No React 19 deprecation warnings — passed (no findDOMNode, ReactDOM.render, or other deprecated API warnings)

Key Evidence

Dark Mode ON	Dark Mode OFF

Alert Animation	Stats Modal

Shell Verification

• npm run build — succeeded
• npx vitest run — 1/1 test passed
• npm run check (prettier) — all files pass

Devin session