A comprehensive Angular application for managing clinical trials, serves as a foundation for an Angular-to-React migration demo.
The Clinical Trial Portal is a healthcare application that enables research teams to:
- Track and manage clinical trials
- Monitor participant enrollment and progress
- View real-time analytics and reports
- Manage trial data and documentation
- Angular 19 - Latest Angular framework with standalone components
- Angular Material - Professional UI component library
- RxJS - Reactive programming with Observables
- Chart.js + ng2-charts - Data visualization
- JSON Server - Mock REST API
- TypeScript - Type-safe development
- SCSS - Styling
- ESLint + Prettier - Code quality and formatting
src/app/
├── core/ # Core services and models
│ ├── models/ # TypeScript interfaces (Trial, Participant, Visit)
│ └── services/ # Business logic services
├── shared/ # Reusable components and utilities
│ ├── components/ # Shared UI components (Header)
│ └── pipes/ # Custom pipes (StatusColor)
├── features/ # Feature modules
│ ├── dashboard/ # Dashboard with stats and charts
│ ├── trials/ # Trial management (list, detail)
│ ├── participants/ # Participant management
│ └── reports/ # Reports and analytics
└── app.routes.ts # Application routing
- Node.js (v18 or higher)
- npm (v10 or higher)
- Clone the repository:
cd clinical-trial-portal- Install dependencies:
npm installYou need to run two servers:
Terminal 1 - Start the Mock API:
npm run apiThis starts json-server on http://localhost:3000
Terminal 2 - Start the Angular App:
npm startThis starts the Angular dev server on http://localhost:4200
The application will automatically open in your browser.
- Real-time statistics (total trials, active trials, participants)
- Trial status distribution (doughnut chart)
- Enrollment progress visualization (bar chart)
- Completion rate metrics
- Searchable trial list with sorting and pagination
- Detailed trial information
- Enrollment tracking
- Status management (Planning, Active, Completed, Suspended)
- Participant roster across all trials
- Enrollment status tracking
- Contact information management
- Analytics overview
- Report templates for various metrics
This application showcases key Angular patterns for migration learning:
- Standalone Components - Modern Angular architecture
- Smart vs Presentational - Container/presentational pattern
- Component Communication - @Input, @Output, Services
- HttpClient - REST API communication
- BehaviorSubject - State management
- Service Layer - Business logic separation
- Lazy Loading - Code splitting with loadComponent
- Route Parameters - Dynamic routing
- Navigation - RouterLink, Router service
- Observable Streams - Async data handling
- Operators - map, filter, forkJoin
- Async Pipe - Template subscriptions
- Reactive Forms - Type-safe form handling
- Form Validation - Built-in and custom validators
- Material Components - Tables, Cards, Buttons, Icons
- Theming - Custom color schemes
- Responsive Design - Mobile-friendly layouts
This codebase is designed to demonstrate Angular-to-React migration patterns:
| Angular | React |
|---|---|
| Components | Functional Components |
| Services | Custom Hooks / Context API |
| RxJS Observables | useState + useEffect |
| Dependency Injection | Props / Context |
| Reactive Forms | React Hook Form / Formik |
| Angular Material | Material-UI (MUI) / Chakra UI |
| Router | React Router |
| Pipes | Helper Functions |
| Directives | Custom Hooks / HOCs |
- State Management: BehaviorSubject → useState/Context
- Lifecycle: ngOnInit → useEffect
- Dependency Injection: Constructor injection → Props/Hooks
- Two-way Binding: [(ngModel)] → Controlled components
- Observables: RxJS → Promises/async-await
The mock API (json-server) provides:
GET /trials- List all trialsGET /trials/:id- Get trial detailsPOST /trials- Create new trialPATCH /trials/:id- Update trialDELETE /trials/:id- Delete trialGET /participants- List all participantsGET /participants?trialId=:id- Get participants by trialGET /visits- List all visits
Modify src/styles.scss to customize the Material theme colors.
Edit db.json to add or modify trial and participant data.
To build the application for production:
npm run buildBuild artifacts will be stored in the dist/ directory.
The project includes comprehensive unit tests for components and services.
# Run all tests (single run)
npm test
# Run tests in watch mode
npm run test:watch
# Generate code coverage report
npm run test:coverage
# Alternative browsers
npm run test:firefox # Use Firefox instead of Chrome
npm run test:ci # CI/CD optimized with coverageCurrent Coverage: 11 tests passing ✅
- AppComponent (4 tests)
- TrialService (4 tests)
- ParticipantService (3 tests)
Documentation:
- TESTING.md - Testing guide and best practices
- HEADLESS_TESTING.md - Setup for CI/CD and Docker environments
This project includes ESLint and Prettier for code quality and formatting.
# Check for linting errors
npm run lint
# Auto-fix linting errors
npm run lint:fix
# Format code with Prettier
npm run format
# Check formatting
npm run format:checkSee LINTING.md for detailed linting configuration and best practices.
This demo application represents a typical enterprise Angular application structure. Use it to:
- Understand current Angular patterns and architecture
- Identify migration challenges specific to your codebase
- Plan the React migration strategy
- Train team members on both Angular and React patterns
This is a demo application for educational and migration planning purposes.
Built with ❤️ for Evinova Health Research