A dedicated digital archive for legacy car information, powered by Firebase. This platform allows classic car enthusiasts and elders to preserve, search, and update the history of timeless vehicles.
- Real-time Database: Instant updates and data persistence using Firebase.
- Legacy Search: Easily find specific car models, years, and history.
- Downloadable Records: Export car information for offline use.
- User Contributions: Add new entries or update existing car data to keep the archive accurate.
- Elder-Friendly UI: Designed with high contrast and clear navigation for ease of use.
- Persistent Filters: Search filters are saved to localStorage to ensure they are automatically retrieved and reapplied even after the browser is closed or refreshed.
- Client-Side Caching & Data Integrity: All car data is cached in the browser's memory to ensure instant filtering without unnecessary network requests. To prevent "dirty reads" or data conflicts, a timestamp verification system validates the record before any update is saved to the database.
- Mobile-First Design: The website features a fully responsive layout, ensuring a seamless navigation experience across mobile devices.
- Reusable Angular Core Library: This project includes a suite of modular, ready-to-use components, directives, and pipes designed for easy integration into any Angular application. Core utilities include:
- Components: Loading spinners, Toast notifications, and Confirmation dialog boxes.
- Directives & Pipes: Custom logic for enhanced UI behavior and data formatting.
- Services: A global HTTP Interceptor for centralized error handling.
- Real-Time Data Synchronization & Performance
-
Cross-Tab Sync: The application utilizes a shared-data service stored in the browser's memory. This ensures that if a user has multiple tabs open, all pages stay synchronized in real-time with minimal overhead, significantly boosting perceived performance.
-
Future Roadmap (Real-Time Updates): To further enhance the platform, I plan to implement Server-Sent Events (SSE). This will create a persistent connection between the client and the backend, allowing the browser cache to "flush" and update instantly whenever a change is made to the database from any location or user.
-
- Frontend: Angular 21
- Backend/Database: Firestore / nestjs
- Hosting: https://firehawk.vagweb.com
The car information is stored as JSON objects in Firebase, organized by:
- Make & Model
- Year of Production
- Technical Specifications
- Historical Significance
Created for the love of classic motors.
For more information, please refer to the User Manual.
- Environment: Recommended to run within WSL (Windows Subsystem for Linux).
- Node.js: Ensure Node.js is installed. We recommend using fnm (Fast Node Manager) for version management.
- Global CLI: This guide assumes @angular/cli@latest has been installed globally prior to cloning.
- Permissions: Please run all commands as a standard user (avoid using sudo or root).
- Security Note: As of March 27, 2026, npm audit reports no major security vulnerabilities.
- Firebase Configuration This guide assumes you are familiar with setting up a Firebase project. Please ensure you have downloaded your authentication.json (Service Account key) and placed it in the root directory of the NestJS project. For a step-by-step walkthrough, please refer to our Backend Installation Guide.
Development Overview
Due to a condensed 3-4 day development timeline, the current architecture prioritizes core functionality. However, several strategic optimizations and infrastructure improvements have been identified for future implementation.
-
Infrastructure & Hosting
- Current State: Initially considered Cloud Run, but limited by the ~50-hour monthly free tier. (I’m currently moving this web application to my always‑free Oracle Cloud VPS for hosting)
- Future Plan: Transition the application to a dedicated VPS (Virtual Private Server) for more sustainable, long-term hosting without time-based constraints.
-
Development Workflow & Rate Limiting
- Challenge: Encountered Google Cloud’s free-tier limit of 50,000 reads per day during heavy development.
- Solution: For future scaling, I recommend fully adopting the Firebase Emulator Suite for local testing to preserve production quotas.
-
Performance Optimization
- Enhancement: If Firestore remains the primary NoSQL provider, I plan to implement server-side caching within NestJS (using Redis or in-memory cache) to minimize redundant database hits and lower costs.
-
Cost Management & Database Strategy
- Concern: "Pay-as-you-go" pricing models for high-traffic databases can lead to unexpected billing spikes if users refresh data excessively.
- Recommendation: To ensure cost predictability, I recommend migrating to a self-hosted database on a VPS.
- PostgreSQL (Highly Recommended) for structured car data.
- MongoDB if a flexible NoSQL schema is still preferred.
-
Enhanced Security & Authentication:
- Implement JWT (JSON Web Tokens) for secure session management and integrate Google OAuth 2.0 for Single Sign-On (SSO). This will ensure that only authenticated users can access the application and provide a seamless login experience.
- Clone the repo:
git clone https://github.com/edwinwcw2021/firehawk-frontend.git - Install dependencies:
npm install - Running the Application Locally
- Standard Execution: Run
ng servein your terminal to start the development server. - Debugging in VS Code: Open the project in VS Code and press F5 to launch the application in Debug Mode.
- Standard Execution: Run
To start a local development server, run:
ng serveOnce the server is running, navigate to http://localhost:4288/ in your browser. The application features Hot Module Replacement (HMR) and will automatically reload whenever you modify source files. Ensure that the NestJS backend is running concurrently to enable API functionality.
Date: March 27, 2026, Edwin Wong