CoinTracker

A polished Angular + Firebase cryptocurrency portfolio tracker for monitoring holdings, transactions, live market prices, and historical performance.

Overview

CoinTracker helps crypto investors keep a clean view of their portfolio:

• Track multiple coins and transactions across exchanges.
• View live prices, portfolio value, and 24-hour market moves.
• Drill into a coin for historical charts and transaction history.
• Sign in with Google, connect an Ethereum wallet for a local demo session, or explicitly enter demo mode.
• Preserve deep links through login so protected coin-detail routes return to the requested page after authentication.

Live app: cointracker-26919.web.app

Features

• Portfolio dashboard: sortable holdings table, paginated rows, totals, live price indicators, and 7-day mini charts.
• Coin detail pages: large historical price chart, range controls, transaction table, and exchange filtering.
• Transaction management: add, edit, and delete coin transactions from modal dialogs.
• Market data: CoinGecko prices, coin IDs, images, 24-hour change, and chart history.
• Resilient fallback mode: top-coin static data keeps the UI usable if market APIs are unavailable.
• Authentication: Google Sign-In via Firebase Auth, with guarded deep links returning to their original route after login.
• Wallet demo sessions: MetaMask wallet connection enables the local demo portfolio without pretending to be a Firebase-authenticated user.
• Explicit demo mode: localStorage-backed portfolio for quick unauthenticated exploration; demo mode is only enabled after the user selects it.
• Responsive UI: dark crypto-themed interface optimized for desktop and mobile.
• Production hardening: deterministic install settings, headless test support, lint gate, production build script, and critical production audit gate.

Screenshots

Portfolio dashboard

Live portfolio summary with tracked coins, price updates, 24-hour change indicators, mini charts, sorting, and pagination.

Coin detail view

Detailed coin page with historical chart ranges, exchange filtering, and transaction actions.

Add transaction dialog

Form dialog with coin symbol autocomplete, amount, bought price, date picker, and exchange fields.

Login page

Google Sign-In, MetaMask wallet demo login, and explicit demo access.

404 page

Dark themed fallback page with navigation back to the portfolio.

Tech stack

• Frontend: Angular 9, Angular Material, Angular Flex Layout
• Charts: Chart.js 2.9
• Backend: Firebase Auth, Firestore, Realtime Database rules, Firebase Hosting
• Market data: CoinGecko REST API
• Styling: CSS custom properties, responsive layouts, dark theme
• Testing: Karma, Jasmine, Puppeteer Chrome Headless
• Tooling: Angular CLI, TSLint, Firebase CLI

Getting started

Prerequisites

• Node.js 16+ or a newer Node version compatible with NODE_OPTIONS=--openssl-legacy-provider.
• npm.
• Firebase project if you want hosted auth/storage behavior.

The repo includes .npmrc with legacy-peer-deps=true because this is an Angular 9 application with older peer dependency ranges.

Install

git clone https://github.com/QuintusTheFifth/CoinTracker.git
cd CoinTracker
npm install

Run locally

npm start

The app starts through Angular CLI with the legacy OpenSSL provider configured in package.json.

Production build

npm run build:prod

Build output is written to:

dist/coinTracker

Firebase Hosting is configured to serve that directory.

Quality checks

Run the full local gate before deploying or merging:

npm run verify

Expected status:

• Lint passes with no reported files.
• Production build completes.
• Karma/Jasmine runs in headless Chrome; the current suite contains 31 specs.
• Critical production audit gate exits successfully.
• Firestore rules restrict portfolio data to /users/{uid} and /users/{uid}/coins for the authenticated owner only.
• npm run verify includes a Firestore rules assertion script (npm run verify:rules) so owner-scoping regressions fail CI.

Note: the Angular 9/Firebase 7 dependency line may still report high or moderate advisories that require a breaking framework migration. Critical production advisories are blocked by npm run audit:critical; see SECURITY.md for the migration policy.

Firebase deployment

Local deploy

./deploy.sh

GitHub Actions

The workflow in .github/workflows/firebase-deploy.yml installs dependencies, runs npm run verify, builds the production bundle, and uploads dist/coinTracker/ as a build artifact. The workflow intentionally acts as a CI gate; Firebase Hosting deployment is still handled by ./deploy.sh unless a deploy step is added later.

If you add a deploy step later, configure one of these repository secrets:

• FIREBASE_SERVICE_ACCOUNT — recommended service account JSON.
• FIREBASE_TOKEN — token from firebase login:ci.

Project structure

src/app/authentication/      Firebase and wallet auth
src/app/coins/               Portfolio, detail, chart, dialog, and data services
src/app/user/login/          Login and demo entry UI
src/app/page-not-found/      404 route
scripts/                     Compatibility patches used after install
.github/workflows/           Firebase deployment workflow

Notes for maintainers

• CoinGecko has duplicate symbols. The service preserves canonical mappings for common assets so symbols like BTC and ETH resolve predictably.
• Demo mode stores data locally and is intentionally separate from authenticated Firestore data; the guard only accepts the explicit demoMode=1 flag.
• Wallet sessions are local demo sessions and require a fresh signature rather than trusting persisted wallet IDs or writing wallet-only users to Firestore.
• Protected routes redirect unauthenticated users to /login?returnUrl=...; Google, wallet, and demo login paths all honor that return URL.
• The app displays when it is using estimated fallback prices instead of live CoinGecko responses.

License

MIT