Flight Tracker Event App

A real-time flight tracking application built with React and TypeScript, following Domain-Driven Design principles.

Prerequisites

Development Environment

• Node.js 20.18 or higher
• npm 10.8 or higher
• A modern web browser (Chrome, Firefox, Safari, or Edge)

Google Maps API Key

You'll need a Google Maps API key to display the map. Here's how to get one:

1. Go to the Google Cloud Console

2. Create a new project or select an existing one

3. Enable the required APIs:

   • Maps JavaScript API
   • Places API (if you plan to add search functionality)

4. Create credentials:

   • Go to "Credentials" in the left sidebar
   • Click "Create Credentials" > "API Key"
   • Your new API key will be displayed

5. (Recommended) Restrict the API key:

   • Go back to the Credentials page
   • Click on the newly created API key
   • Under "Application restrictions", choose "HTTP referrers"
   • Add your development and production domains
   • Under "API restrictions", select "Restrict key"
   • Select the APIs you enabled (Maps JavaScript API, etc.)
   • Click "Save"

Project Structure

The project follows a feature-based Domain-Driven Design approach where each feature is organized in its own directory with DDD layers:

src/
├── flights/                # Flight tracking feature
│   ├── ui/                 # Presentation components
│   ├── application/        # Use cases and services
│   ├── domain/             # Entities and value objects
│   └── infrastructure/     # External services and adapters
├── shared/                 # Shared utilities and components
└── App.tsx                 # Application entry point

tests/
├── flights/              # Flight feature tests
│   ├── ui/              # UI component tests
│   ├── domain/          # Domain logic tests
│   └── infrastructure/  # Infrastructure tests
└── setupTests.ts        # Test environment setup

Each feature follows the DDD layered architecture:

• UI Layer: React components and hooks
• Application Layer: Services and use cases that orchestrate domain logic
• Domain Layer: Business entities, value objects, and core business rules
• Infrastructure Layer: External services, repositories, and technical implementations

The test structure mirrors the source code organization, making it easy to locate and maintain tests for each component.

Getting Started

1. Clone the repository:

git clone git@github.com:luismr/flight-tracker-event-app.git
cd flight-tracker-event-app

2. Install dependencies:

npm install

3. Create a env.js file in the project root based on the example file:

// env.js
window.environment = {
  WEBSOCKET_URL: "ws://localhost:8080/map-updates",
  WEBSOCKET_RECONNECT_INTERVAL: 5000,
  WEBSOCKET_MAX_RETRIES: 5,
  GOOGLE_MAPS_API_KEY: "your-google-maps-api-key-here"
};

Note: The env.js file is used for runtime configuration. This file should be created locally and not committed to version control. For local development with Vite, this file needs to be placed in the project root.

4. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Features

• Real-time flight tracking via WebSocket
• Interactive Google Maps display showing all flights
• Custom airplane icons with status indicators
• Detailed flight information cards
• Automatic map bounds adjustment to show all flights
• Responsive design for mobile browsers

Building for Production

npm run build

The built files will be in the dist directory.

Docker Deployment

Build and run the application using Docker:

Using Docker Compose (Recommended)

# Create a .env file with your environment variables
cat <<EOF > .env
VITE_GOOGLE_MAPS_API_KEY=your-google-maps-api-key-here
VITE_WEBSOCKET_URL=ws://your-websocket-server/map-updates
VITE_WEBSOCKET_RECONNECT_INTERVAL=5000
VITE_WEBSOCKET_MAX_RETRIES=3
EOF

docker-compose up -d

The application will be available at http://localhost.

Manual Docker Build

Build the image:

docker build -t flight-tracker-app .

Running the Container

docker run -d \
  --name flight-tracker \
  -p 80:80 \
  -e GOOGLE_MAPS_API_KEY=your-google-maps-api-key-here \
  -e WEBSOCKET_URL=ws://your-websocket-server/map-updates \
  -e WEBSOCKET_RECONNECT_INTERVAL=5000 \
  -e WEBSOCKET_MAX_RETRIES=3 \
  flight-tracker-app

The application will use the environment variables that were set during the build process if not overridden at runtime. The default values are:

• WEBSOCKET_URL: ws://localhost:8080/map-updates
• WEBSOCKET_RECONNECT_INTERVAL: 5000
• WEBSOCKET_MAX_RETRIES: 3

Note: You can override the build-time variables by providing them at runtime using the -e flag.

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage report
npm run test:coverage

The test suite includes:

• Unit tests for domain logic
• Component tests with React Testing Library
• Integration tests for infrastructure services

Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create your feature branch:

git checkout -b feature/amazing-feature

3. Commit your changes:

git commit -m 'Add some amazing feature'

4. Push to the branch:

git push origin feature/amazing-feature

5. Open a Pull Request

Please make sure to:

• Follow the existing code style
• Add tests if applicable
• Update documentation as needed

License

This project is licensed under the MIT License - see the LICENSE.md file for details.