Phase 1: React Migration Infrastructure Setup (VJ-3)

[devin-ai-integration]

Phase 1: React Migration Infrastructure Setup (VJ-3)

Summary

Implements JIRA ticket VJ-3 - Phase 1 of the Angular to React migration by creating a complete React project infrastructure in the react-clinical-portal/ directory.

What's included:

• New React project with Vite 6.0.1 + TypeScript 5.6.2 + React 18.3.1
• Modern ESLint flat config (ESLint 9) with React-specific plugins (replacing Angular's deprecated tslint)
• Vitest 0.34.0 + React Testing Library for testing (instead of Karma/Jasmine)
• React Router v7.9.1 for navigation with basic routing structure
• Material-UI v5.15.12 with Emotion styling for UI components
• Prettier configuration preserved from existing Angular projects
• Basic Home component demonstrating React Router + MUI integration

All 6 success criteria verified:

• ✅ npm run build - Builds successfully (verified locally)
• ✅ npm run lint - Passes with 0 errors
• ✅ npm run format:check - Passes Prettier checks
• ✅ npm run test - 2 tests passing (React Router + MUI rendering)
• ✅ React Router renders at least one route (verified in browser)
• ✅ MUI renders basic components (verified in browser)

Architectural decisions documented in react-clinical-portal/README.md:

• Testing: Vitest (better Vite integration than Jest)
• ESLint: Modern flat config (future-proof, used in reference implementation)
• React Router: v7 (latest stable, improved TypeScript support)
• Approach: Minimal but functional setup matching success criteria

Review & Testing Checklist for Human

⚠️ Critical items to verify (in descending order of importance):

• Verify production build works end-to-end: Run cd react-clinical-portal && npm run build && npm run preview, then test the production build in browser (not just dev server). The success criteria were verified with npm run dev only.

• Check Angular project changes: The PR includes modifications to angular.json (added karmaConfig) and package.json (changed Chrome config to ChromeHeadlessCI). Verify these changes are intentional and don't break the existing Angular app's test suite. Run npm test in the root directory.

• Test all npm scripts work in fresh environment: The React project has 474 dependencies with 4 moderate severity vulnerabilities. Consider testing in a clean environment or running npm audit to understand the security implications.

• Verify the migration plan: This Phase 1 creates infrastructure only - no backend integration yet. The React app doesn't connect to the existing mock API (port 3000) or have any actual clinical trial functionality. Confirm this aligns with expectations for Phase 1.

Notes

Requested by: Ian Moritz (@iancmoritz)
Devin run: https://app.devin.ai/sessions/d1a6ab84c2fe4c9693150882d44d2b50

Known limitations:

• Minimal test coverage (2 smoke tests only)
• No backend/API integration yet
• No error handling or loading states
• Production build not verified (only dev server tested)
• Security vulnerabilities in dependencies (4 moderate)

Reference implementations used:

• Primary: COG-GTM/react-hn (Vite + React Router v7 + ESLint flat config)
• Secondary: COG-GTM/cypress-realworld-app (MUI v5 + Vitest patterns)

[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