Architecture Overview

MaxTracks Web is a Flutter web application that serves as the primary dashboard for MaxShipping’s logistics operations. It connects to Firebase for backend services and is deployed via Firebase Hosting.

Technology Stack

High-Level Architecture

The Flutter Web App runs on Firebase Hosting (CDN) and uses Provider for state management. It connects to four Firebase services:

• Cloud Firestore – primary database for all collections
• Firebase Storage – file storage for loaded packages, prepaid docs
• Cloud Functions – backend logic, triggers, scheduled jobs
• Firebase Auth – user authentication

Cloud Functions in turn integrate with external services:

• Square API – payment processing
• Gmail (SMTP) – email notifications via Nodemailer
• Google Sheets/Drive – data import/export and reporting

Firebase Projects

Key Dependencies

Flutter (Frontend):

• firebase_core, cloud_firestore, cloud_functions – Firebase integration
• qr_flutter – QR code generation for packages
• pdf + printing – PDF document generation and printing
• provider – State management across screens
• google_fonts – Montserrat font family
• intl_phone_number_input – Phone number validation
• url_launcher – External URL handling

Cloud Functions (Backend):

• firebase-admin, firebase-functions – Firebase SDK
• googleapis – Google Sheets/Drive integration
• nodemailer – Email dispatch (Gmail SMTP)
• exceljs – Excel file generation
• axios + axios-retry – HTTP with retry logic
• bottleneck – Rate limiting for external APIs
• libphonenumber-js – Phone number parsing

Theming

The app uses Material Design 3 with a custom color scheme:

• Primary Color: RGB(97, 136, 186) – steel blue
• Secondary Header: RGB(18, 47, 80) – dark navy
• Font Family: Montserrat (multiple weight variants)