Skip to content

QUICK_START.md

Latest commit

 

History

History
228 lines (171 loc) · 5.22 KB

QUICK_START.md

File metadata and controls

228 lines (171 loc) · 5.22 KB

Quick Start Guide

Get the Clinical Trial Portal up and running in 5 minutes.

Prerequisites

  • Node.js v18+ installed
  • npm v10+ installed
  • A code editor (VS Code recommended)

Installation & Setup

1. Navigate to the project directory

cd clinical-trial-portal

2. Install dependencies

npm install

Running the Application

You need two terminal windows running simultaneously:

Terminal 1: Start the Mock API Server

npm run api

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

You should see:

JSON Server started on PORT :3000
Endpoints:
http://localhost:3000/trials
http://localhost:3000/participants
http://localhost:3000/visits

Terminal 2: Start the Angular Development Server

npm start

This starts the Angular app on http://localhost:4200

Wait for the build to complete. You should see:

Application bundle generation complete.
➜  Local:   http://localhost:4200/

3. Open Your Browser

Navigate to: http://localhost:4200

The application will automatically open and you'll see the Clinical Trial Portal dashboard.

What You'll See

Dashboard (Default Landing Page)

  • Overview statistics (5 trials, 2 active, 618 participants)
  • Trial status distribution chart
  • Enrollment progress chart

Navigation

Use the header navigation to explore:

  • Dashboard - Overview and analytics
  • Trials - List of all clinical trials
  • Participants - Enrolled participants
  • Reports - Report templates

Try These Actions

  1. View Trial List

    • Click "Trials" in the header
    • See searchable, sortable table of trials
    • Click on a trial name to view details

  2. View Trial Details

    • Click on "Cardiovascular Health Study - Phase III"
    • See enrollment progress, participant list, and trial information

  3. Search Trials

    • On the Trials page, use the search box
    • Try searching for "diabetes" or "oncology"

  4. View Participants

    • Click "Participants" in the header
    • See all enrolled participants across trials

Project Structure Overview

clinical-trial-portal/
├── src/app/
│   ├── core/              # Services and models
│   ├── shared/            # Reusable components
│   ├── features/          # Feature modules
│   │   ├── dashboard/
│   │   ├── trials/
│   │   ├── participants/
│   │   └── reports/
│   └── app.routes.ts      # Routing configuration
├── db.json                # Mock API data
└── README.md              # Full documentation

Key Files to Explore

Models (TypeScript Interfaces)

  • src/app/core/models/trial.model.ts - Trial data structure
  • src/app/core/models/participant.model.ts - Participant data structure

Services (Business Logic)

  • src/app/core/services/trial.service.ts - Trial CRUD operations
  • src/app/core/services/participant.service.ts - Participant operations

Components

  • src/app/features/dashboard/ - Dashboard with charts
  • src/app/features/trials/trial-list/ - Trial list with table
  • src/app/features/trials/trial-detail/ - Trial detail view

Mock Data

  • db.json - Edit this file to add/modify trial and participant data

Common Issues & Solutions

Issue: Port 3000 already in use

Solution: Kill the process using port 3000

# Mac/Linux
lsof -ti:3000 | xargs kill -9

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

Issue: Port 4200 already in use

Solution: Use a different port

ng serve --port 4201

Issue: Module not found errors

Solution: Reinstall dependencies

rm -rf node_modules package-lock.json
npm install

Issue: Charts not displaying

Solution: Make sure json-server is running and returning data

# Test the API
curl http://localhost:3000/trials

Development Tips

Hot Reload

Both servers support hot reload:

  • Angular: Changes to .ts, .html, .scss files auto-reload
  • json-server: Changes to db.json auto-reload

Browser DevTools

  • Open Chrome DevTools (F12)
  • Check Console for errors
  • Use Network tab to inspect API calls

VS Code Extensions (Recommended)

  • Angular Language Service
  • ESLint
  • Prettier
  • Angular Snippets

Next Steps

  1. Read the full README.md for detailed documentation
  2. Check MIGRATION_GUIDE.md for Angular to React migration patterns
  3. Explore the code to understand Angular architecture
  4. Modify db.json to add your own test data
  5. Experiment with adding new features

Quick Commands Reference

# Install dependencies
npm install

# Start API server
npm run api

# Start Angular app
npm start

# Build for production
npm run build

# Run tests
npm test

Getting Help

  • Check the console for error messages
  • Review the full README.md
  • Examine the MIGRATION_GUIDE.md for patterns
  • Look at existing components for examples

What's Next?

Now that you have the app running, explore:

  1. How components are structured
  2. How services manage data
  3. How routing works
  4. How Angular Material components are used
  5. How RxJS observables handle async data

This will give you a solid foundation for understanding the Angular-to-React migration process.

Happy coding! 🚀