Clinical Trial Portal - Angular Demo

A comprehensive Angular application for managing clinical trials, serves as a foundation for an Angular-to-React migration demo.

🏥 Overview

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

🛠️ Tech Stack

• 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

📁 Project Structure

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

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v10 or higher)

Installation

1. Clone the repository:

cd clinical-trial-portal

2. Install dependencies:

npm install

Running the Application

You need to run two servers:

Terminal 1 - Start the Mock API:

npm run api

This starts json-server on http://localhost:3000

Terminal 2 - Start the Angular App:

npm start

This starts the Angular dev server on http://localhost:4200

The application will automatically open in your browser.

📊 Features

Dashboard

• Real-time statistics (total trials, active trials, participants)
• Trial status distribution (doughnut chart)
• Enrollment progress visualization (bar chart)
• Completion rate metrics

Trials Management

• Searchable trial list with sorting and pagination
• Detailed trial information
• Enrollment tracking
• Status management (Planning, Active, Completed, Suspended)

Participants

• Participant roster across all trials
• Enrollment status tracking
• Contact information management

Reports

• Analytics overview
• Report templates for various metrics

🎯 Angular Concepts Demonstrated

This application showcases key Angular patterns for migration learning:

Components

• Standalone Components - Modern Angular architecture
• Smart vs Presentational - Container/presentational pattern
• Component Communication - @Input, @Output, Services

Services & Dependency Injection

• HttpClient - REST API communication
• BehaviorSubject - State management
• Service Layer - Business logic separation

Routing

• Lazy Loading - Code splitting with loadComponent
• Route Parameters - Dynamic routing
• Navigation - RouterLink, Router service

RxJS & Observables

• Observable Streams - Async data handling
• Operators - map, filter, forkJoin
• Async Pipe - Template subscriptions

Forms & Validation

• Reactive Forms - Type-safe form handling
• Form Validation - Built-in and custom validators

Angular Material

• Material Components - Tables, Cards, Buttons, Icons
• Theming - Custom color schemes
• Responsive Design - Mobile-friendly layouts

🔄 Migration Notes

This codebase is designed to demonstrate Angular-to-React migration patterns:

Angular → React Equivalents

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

Key Migration Challenges

1. State Management: BehaviorSubject → useState/Context
2. Lifecycle: ngOnInit → useEffect
3. Dependency Injection: Constructor injection → Props/Hooks
4. Two-way Binding: [(ngModel)] → Controlled components
5. Observables: RxJS → Promises/async-await

📝 API Endpoints

The mock API (json-server) provides:

• GET /trials - List all trials
• GET /trials/:id - Get trial details
• POST /trials - Create new trial
• PATCH /trials/:id - Update trial
• DELETE /trials/:id - Delete trial
• GET /participants - List all participants
• GET /participants?trialId=:id - Get participants by trial
• GET /visits - List all visits

🎨 Customization

Theming

Modify src/styles.scss to customize the Material theme colors.

Mock Data

Edit db.json to add or modify trial and participant data.

📦 Build

To build the application for production:

npm run build

Build artifacts will be stored in the dist/ directory.

🧪 Testing

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 coverage

Current 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

🎨 Code Quality

This project includes ESLint and Prettier for code quality and formatting.

Linting Commands

# 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:check

See LINTING.md for detailed linting configuration and best practices.

📚 Additional Resources

• Angular Documentation
• Angular Material
• RxJS Documentation
• Chart.js

👥 For Evinova Team

This demo application represents a typical enterprise Angular application structure. Use it to:

1. Understand current Angular patterns and architecture
2. Identify migration challenges specific to your codebase
3. Plan the React migration strategy
4. Train team members on both Angular and React patterns

📄 License

This is a demo application for educational and migration planning purposes.

---

Built with ❤️ for Evinova Health Research