Amy Phan's Design Portfolio

Project

Improving display of statistics for a chain of custody company.

A comprehensive web-based analytics platform for visualizing and managing laboratory chain of custody (COC) data across global locations. The dashboard provides real-time insights into sample distribution, laboratory performance, and temporal trends through an interactive map interface.

Info

Role

Web Developer, Web Designer, & Project Manager

Project duration

2-3 months, 3-5 hrs/week

Tools

Visual Studio Code, Firebase Firestore, Firebase Auth, React.js, Tailwind CSS, Leaflet, Font Awesome

SessionStorage API, GeoJSON, Async/Await with batching

Visual Studio Code, Firebase Firestore, Firebase Auth, React.js, Tailwind CSS, Leaflet, Font Awesome

SessionStorage API, GeoJSON, Async/Await with batching

Visual Studio Code, Firebase Firestore, Firebase Auth, React.js, Tailwind CSS, Leaflet, Font Awesome

SessionStorage API, GeoJSON, Async/Await with batching

Skills

Project Management, Front-end development, Web design, Documentation, UI/UX

Problem

Chain of custody management systems faced significant challenges in data visualization and analysis:

Scattered data across multiple laboratories without unified view
Difficulty tracking sample volumes and geographic distribution
Limited temporal analysis and trend identification
Inefficient manual data aggregation and reporting

Chain of custody management systems faced significant challenges in data visualization and analysis:

Scattered data across multiple laboratories without unified view
Difficulty tracking sample volumes and geographic distribution
Limited temporal analysis and trend identification
Inefficient manual data aggregation and reporting

Goal

Develop an interactive geographic analytics platform that transforms complex COC data into actionable insights via a map layout.

Research

Defining requirements and objectives

Real-time visualization of laboratory locations and COC volumes Multi-level geographic drill-down (country to state/region) Advanced date-range filtering and temporal analysis Automated sample counting and analytics

Research

Defining requirements and objectives

Research

Defining requirements and objectives

Key features

Interactive Map Visualization: Dynamic choropleth maps with color-coded regions based on COC volume

Multi-View System: Toggle between country and state-level views with seamless drill-down
Advanced Date Filtering: Preset time ranges plus custom date picker supporting single dates or ranges
Laboratory Management: Ranked lab lists with search, real-time COC counts, and status indicators
Real-time Analytics: Automatic sample counting with statistical summaries and distribution metrics
Performance Optimized: Intelligent caching and batched database queries handling 600+ COCs seamlessly

Interactive Map Visualization: Dynamic choropleth maps with color-coded regions based on COC volume

Multi-View System: Toggle between country and state-level views with seamless drill-down
Advanced Date Filtering: Preset time ranges plus custom date picker supporting single dates or ranges
Laboratory Management: Ranked lab lists with search, real-time COC counts, and status indicators
Real-time Analytics: Automatic sample counting with statistical summaries and distribution metrics
Performance Optimized: Intelligent caching and batched database queries handling 600+ COCs seamlessly

Technical Implementation

Built modular React component architecture with efficient state management

Integrated Leaflet.js for interactive maps with GeoJSON geographic data
Implemented batched Firestore queries to work within Firebase's 10-item limit
Created geographic name normalization system for consistent mapping
Developed SessionStorage caching strategy reducing load times by 70%
Designed responsive UI with Tailwind CSS for all device sizes

Built modular React component architecture with efficient state management

Integrated Leaflet.js for interactive maps with GeoJSON geographic data
Implemented batched Firestore queries to work within Firebase's 10-item limit
Created geographic name normalization system for consistent mapping
Developed SessionStorage caching strategy reducing load times by 70%
Designed responsive UI with Tailwind CSS for all device sizes

Key Challenges Overcome

Firestore Query Limitations: Implemented parallel batched queries using Promise.all() to handle 600+ COCs within Firebase's 10-item 'in' operator limit

Geographic Name Inconsistencies: Created comprehensive mapping constants to normalize country/state names between database and GeoJSON data
Date Timezone Issues: Solved date filtering bugs by implementing string-based date comparison avoiding timezone conversions
Performance Optimization: Reduced initial load from 30+ seconds to under 10 seconds through caching and parallel async operations.

Firestore Query Limitations: Implemented parallel batched queries using Promise.all() to handle 600+ COCs within Firebase's 10-item 'in' operator limit

Geographic Name Inconsistencies: Created comprehensive mapping constants to normalize country/state names between database and GeoJSON data
Date Timezone Issues: Solved date filtering bugs by implementing string-based date comparison avoiding timezone conversions
Performance Optimization: Reduced initial load from 30+ seconds to under 10 seconds through caching and parallel async operations.

Background image of a UMBC Review mockup product

Want to collaborate?

My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.

Work with me