Priority Pass

Priority Pass is a modern, offline-first Progressive Web App (PWA) designed to elegantly manage and display your flight boarding passes. Built with cutting-edge web technologies, it allows you to scan, import, parse, and store your boarding passes directly on your device, ensuring you have access to your travel documents even without an internet connection.

Key Features

• Universal BCBP Parsing: Robustly parses IATA Bar Coded Boarding Pass (BCBP) strings to extract passenger details, flight information, dates, and PNRs.
• Advanced Barcode Scanning: Scan physical or digital boarding passes using your device's camera (powered by @zxing/browser), or directly import screenshots with an integrated image cropping tool (react-image-crop).
• Offline-First PWA: Fully installable on iOS and Android devices. Utilizes Service Workers and Workbox to securely cache application assets, boarding pass data, and local airline logos for lightning-fast offline access.
• Web Share Target Integration: Seamlessly share boarding pass screenshots directly from your device's photo gallery or other apps straight into Priority Pass using the native OS share sheet.
• Dynamic Premium UI & Customization:
  • Full support for automatic light and dark themes based on system preferences.
  • Automatically extracts dynamic color palettes from airline logos using node-vibrant to create beautiful, personalized boarding pass cards.
  • Manually edit pass details and customize background/text colors.
  • Implements the modern Web View Transitions API for seamless, app-like morphing animations between pages.
  • Custom fluid swipe-to-dismiss interactions for toasts.
• Built-In Local Databases: Includes comprehensive, locally-served databases for 650+ airlines (with offline logos) and 7,000+ international airports. This ensures privacy, complete offline reliability, and zero external network latency.

Tech Stack

Core

• Framework: React 19
• Build Tool: Vite
• Language: TypeScript
• Routing: React Router DOM v7
• State Management: Zustand
• Schema Validation: Zod

Styling & UI

• CSS Framework: Tailwind CSS v4
• Components: shadcn/ui and @base-ui/react
• Icons: Material Icons
• Typography: Google Sans Variable
• Notifications: Sonner

Specialized Libraries

• Barcode Parsing: bcbp
• Barcode Rendering: bwip-js (Generates Aztec, PDF417, QR, and Data Matrix)
• Camera Scanning: @zxing/browser & @zxing/library
• Color Extraction: node-vibrant
• Image Cropping: react-image-crop
• PWA Capabilities: vite-plugin-pwa

Development Workflow

This project strictly enforces high code quality and consistency through automated tooling:

• Comprehensive Testing: Setup includes unit/integration tests with Vitest & React Testing Library, and End-to-End (E2E) UI testing using Playwright.
• Type-Aware Linting: Catches logical errors using ESLint.
• Auto-formatting: Prettier ensures a consistent coding style across the codebase.
• Pre-commit Hooks: Every commit is automatically linted and formatted using Husky and lint-staged.
• Conventional Commits: Standardized commit messages are enforced via Commitlint and Commitizen.
• Path Aliases: Use @/ to import from the src directory (e.g., import { App } from '@/App').

Building and Running

• Prerequisites: Ensure you have Node.js (v24+) and pnpm installed.
• Installation: Clone the repository and install dependencies using pnpm install.
• Development: Run pnpm dev to start the local development server with Hot Module Replacement (HMR).
• Production Build: Run pnpm build to build the application and generate the PWA Service Worker. You can preview it locally using pnpm preview.
• Testing: Run pnpm test for unit tests, pnpm test:ui for the Vitest UI, or pnpm test:e2e for Playwright E2E tests.
• Making Commits: Run pnpm commit to use the interactive commitizen prompt, ensuring your commit messages meet the project's standards.

Project Structure

Path	Description
.github/workflows/	GitHub Actions CI/CD pipelines
e2e/	Playwright End-to-End (E2E) UI tests
public/	Static assets, service worker, offline logos and databases
src/components/	Reusable React components (Boarding Passes, Dialogs)
src/components/ui/	Shadcn UI primitives
src/lib/	Utilities (Formatters, Helpers, Color extractors)
src/pages/	Route components (Home, PassDetail)
src/store/	Zustand state stores (Local storage persistence)
src/index.css	Tailwind and global overrides
src/main.tsx	Application entrypoint