TECAir - Frontend

Frontend application for the TECAir airline management system, developed as part of CE3101 Bases de Datos, I Semestre 2026, Instituto Tecnologico de Costa Rica.

About

TECAir is a low-cost airline platform. This repository contains the client-facing web and mobile interfaces, built as a single React codebase that runs in web browsers and on iOS/Android through Ionic + Capacitor.

Views

• Vista Reservaciones - passenger web app for flight search, booking, payment, loyalty, and trip review
• Vista Aeropuerto - airport operator dashboard for check-in, baggage, flight management, reports, and operational tables
• Mobile App - Ionic/Capacitor version of Vista Reservaciones with native login flow, network detection, and offline SQLite cache support

Stack

• React 19 + TypeScript
• Ionic 8 + Capacitor 8
• Vite
• React Router 5 through Ionic React Router
• Browser fetch API for REST calls to the TECAir API through VITE_API_URL
• @capacitor-community/sqlite for native offline storage
• Capacitor Network for online/offline state
• CSS custom properties (src/styles/tokens.css) for design tokens and layout utilities
• CSS Modules for component-scoped styling
• Radix UI primitives for accessible interactive components
• Tabler Icons and Ionicons
• clsx for conditional class composition
• pdf-lib and html2canvas for generated documents and shareable trip assets
• Ladle for isolated component review
• ESLint with TypeScript and React Hooks rules

Architecture

The app is structured around a few practical layers:

• src/services/ - TECAir API calls, authentication helpers, catalog helpers, and native offline database access
• src/types/ - DTO definitions shared by services and pages
• src/pages/ - screen-level views split into client/, airport/, and auth/
• src/components/ - reusable UI, layout, feedback, card, and flight components
• src/router/ - Ionic route definitions and platform-specific redirects
• src/styles/ - global styles, layout utilities, and design tokens

Offline support

SQLite support is implemented for native platforms through src/services/offlineDb.ts. It stores JSON snapshots for trips and user data in a local tecair_offline database. The service is skipped automatically on non-native web builds.

Getting started

cd tecair
npm install
npm run dev

Set the API base URL with VITE_API_URL, for example:

VITE_API_URL=http://localhost:5088/api npm run dev

Component playground with Ladle

Ladle is used to test and review isolated React components during development.

cd tecair
npm run ladle

Open http://localhost:61000/ and select a story from the side panel.

Useful commands:

cd tecair
npm run ladle:build
npm run ladle:preview

Stories live next to the component as *.stories.tsx. Ladle reads src/**/*.stories.{ts,tsx} by default.

Global setup lives in .ladle/components.tsx -> src/ladle/provider.tsx. The provider loads design tokens, global styles, and wraps stories in the Ionic shell. Viewport defaults to 1280x800; drag the resize handle in the toolbar to check mobile layouts.

Stories are grouped in the sidebar by category using the title field ('UI / Button', 'Layout / Navbar', etc.). Each variant or state is its own named story.

Building for Android

Requires Android Studio.

cd tecair
npm run build
npx cap sync android
npx cap open android

In Android Studio, select your device or emulator and hit Run.

Building for iOS

Requires Xcode and a Mac. For personal device testing, a free Apple ID is enough. The app will need re-signing every 7 days.

cd tecair
npm run build
npx cap sync ios
npx cap open ios

In Xcode, go to the App target -> Signing & Capabilities, set your Team to your personal Apple ID. Select your device from the device picker and hit Run.

Updating the app on device

After any code changes, rebuild and sync before running from Xcode or Android Studio:

cd tecair
npm run build
npx cap sync

Team

Name	Student ID
Nicolás Florez Jiménez	2024086367
David García Cruz	2024115575
Tamara Cajiao Molina	2024143333
Mariana González Sanabria	2023099806