Phone Comparison
Relevant source files
The following files were used as context for generating this wiki page:
The Phone Comparison system is a core feature of the CoolTools platform, designed to provide users with a side-by-side technical analysis of up to four mobile devices. It aggregates data from multiple industry-leading sources to offer a comprehensive view of specifications including display, performance, camera, and battery life.
The system utilizes a client-side state management approach to handle device selection and asynchronous data fetching from an external mobile specifications API. Users can initiate comparisons via direct search, categorized links, or pre-defined "Quick Comparison" templates available on the homepage.
Sources: cooltools/app/compare/page.tsx:1-15, cooltools/app/page.tsx:85-115
System Architecture and Logic
The comparison engine is built using Next.js client components. It maintains a state of selectedPhones (minimal metadata) and phoneDetails (full technical specifications). When a user adds a phone, the system fetches the full PhoneSpec object if it is not already present in the local cache or application state.
Data Flow for Comparison
The following diagram illustrates how device data is retrieved and synchronized for the comparison view:
The application uses an effect hook to monitor the selectedPhones list. Whenever the list changes, it identifies slugs that lack detailed specifications and triggers parallel asynchronous requests.
Sources: cooltools/app/compare/page.tsx:39-65, cooltools/lib/phoneApi.ts:153-180
Comparison Constraints and Features
| Feature | Implementation Detail | Source |
|---|---|---|
| Capacity | Maximum of 4 phones can be compared simultaneously. | compare/page.tsx:101-110 |
| URL Sync | Comparison lists can be shared via URL parameters (e.g., ?phones=slug1,slug2). | compare/page.tsx:21-37 |
| Data Types | Covers Display, Performance, Camera, and Battery categories. | compare/page.tsx:210-270 |
| Caching | Uses a 5-minute TTL in-memory cache and request deduplication. | phoneApi.ts:7-20 |
Data Structures
The comparison feature relies on two primary TypeScript interfaces defined in the API layer and a database schema for persistence.
Technical Specification Model (PhoneSpec)
The PhoneSpec interface defines the structure of data fetched for comparison. Key fields include:
- Display: size, resolution, and type.
- Platform: chipset, cpu, and gpu.
- Memory: internal storage and ram.
- Battery: capacity (type) and charging speeds.
Sources: cooltools/lib/phoneApi.ts:31-78
Persistent Storage Schema
For saved user comparisons, the system uses a PostgreSQL schema via Drizzle ORM.
Sources: cooltools/shared/schema.ts:4-90
User Interface Components
Selection and Search
The comparison page features a real-time search input with a debounce-like behavior (300ms delay) to prevent excessive API calls. Search results are displayed in a dropdown, allowing users to add devices directly to the comparison grid.
Comparison Matrix
The matrix is organized into categorical sections. Each cell in the grid maps a specific device's attributes to the comparison row.
// Example of how Display specs are mapped in the comparison grid
{selectedPhones.map((phone, index) => {
const slug = phone.phone_url.split('/').pop() || '';
const details = phoneDetails[slug];
return (
<div key={index} className="bg-gray-50 dark:bg-gray-700 rounded p-3">
<div className="text-sm text-gray-600 dark:text-gray-400">Display</div>
<div className="text-gray-900 dark:text-white font-medium text-sm">
{details?.display?.size || 'N/A'}<br/>
{details?.display?.type || 'N/A'}<br/>
{details?.display?.resolution || 'N/A'}
</div>
</div>
);
})}
Sources: cooltools/app/compare/page.tsx:216-231, cooltools/app/compare/page.tsx:67-79
Integration with Utility Functions
The comparison display leverages utility functions to clean and format raw API data:
formatPrice: Extracts numeric values from strings like "About 750 EUR" to display as formatted currency.extractNumericValue: Used for comparing benchmarks or physical dimensions.
Sources: cooltools/lib/utils.ts:19-30
The Phone Comparison module serves as the primary analytical tool of the application, bridging the gap between raw device specifications and user decision-making through a structured, multi-device viewing experience.