Skip to main content

​
Quickstart Guide

Get Air Tracker running locally in just a few minutes. This guide will walk you through the essential steps to start tracking flights.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 18.x or higher (Download)
  • npm 7+ (comes with Node.js)
  • Git for cloning the repository
Air Tracker is built with Angular 20 and requires a modern development environment. We recommend Node.js LTS (v18 or v20).

​
Quick Setup

1

Clone the repository

Get the Air Tracker source code:
git clone https://github.com/EduGese/air-tracker-frontend.git
cd air-tracker-frontend
2

Install dependencies

Install all required packages:
npm install
Installation typically takes 2-3 minutes depending on your internet connection.
3

Configure environment

Air Tracker uses environment configuration for API endpoints. The default configuration works out of the box for development:
src/environments/environment.development.ts
export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/api'
};
If you’re running the backend API on a different port or host, update the apiBaseUrl in this file.
4

Start the development server

Launch the application:
npm start
The development server will start on http://localhost:4200/
You should see “Application bundle generation complete” in your terminal when ready.
5

Open in browser

Navigate to http://localhost:4200 in your browser.You’ll see the Air Tracker interface with:
  • Interactive Leaflet map
  • Live flight tracking (if backend is connected)
  • Filter controls for operators and flight status

​
What You’ll See

When Air Tracker loads successfully, you’ll see:

Interactive Map

Leaflet-powered map with zoom controls and base layer switcher (satellite, streets, dark, light)

Flight Markers

Animated aircraft markers with rotation based on heading

Flight List

Sortable table showing all tracked flights with details

Filter Menu

Controls to filter by airline operator and ground status

​
Quick Commands Reference

CommandDescription
npm startStart development server on port 4200
npm run buildBuild production bundle
npm testRun unit tests with Karma
npm run lintCheck code style
npm run lint:fixFix linting issues automatically

​
Next Steps

Now that you have Air Tracker running:

Explore Features

Learn about real-time tracking, filtering, and map interactions

View Architecture

Understand the Angular 20 architecture and state management

Component Docs

Explore the component library and APIs

Development Guide

Set up your development environment

​
Troubleshooting

To use a different port:
ng serve --port 4300
Or kill the process using port 4200:
# On macOS/Linux
lsof -ti:4200 | xargs kill -9

# On Windows
netstat -ano | findstr :4200
taskkill /PID <PID> /F
This usually means dependencies weren’t installed correctly:
rm -rf node_modules package-lock.json
npm install
If you see “Error fetching flights” in the UI:
  1. Ensure your backend API is running on http://localhost:8080
  2. Check CORS settings on the backend allow requests from http://localhost:4200
  3. Update apiBaseUrl in src/environments/environment.development.ts if using a different endpoint
Air Tracker includes mock data fallback in FlightsStoreService.pollMock() for frontend-only development.

​
Need Help?

Build docs developers (and LLMs) love

Get started for freeTalk to us