Dynamic Phone Details
Relevant source files
The following files were used as context for generating this wiki page:
The Dynamic Phone Details system is a core module of the CoolTools platform, responsible for fetching, caching, and rendering comprehensive technical specifications for individual mobile devices. It utilizes a dynamic routing pattern [slug] to resolve specific hardware models and presents data across multiple categories including performance, display, camera, and network connectivity.
This module acts as the primary data consumer for the external mobile specifications API, transforming raw JSON responses into a structured user interface. It also integrates with the comparison engine by allowing users to transition directly from a detail view into a multi-device comparison session.
Sources: cooltools/app/phones/[slug]/page.tsx:1-20, cooltools/lib/phoneApi.ts:133-168
Data Acquisition and Architecture
The system relies on an asynchronous data fetching layer defined in lib/phoneApi.ts. The primary function getPhoneDetails handles requests to the external API with built-in resilience features.
Fetching Logic and Resilience
To ensure reliability and performance, the data layer implements three key patterns:
- In-Memory Caching: Results are stored in a
Mapwith a Time-To-Live (TTL) of 5 minutes to reduce redundant API calls. - Request Deduplication: Pending promises are tracked in a
pendingRequestsmap to prevent concurrent identical requests. - Retry Mechanism: The system automatically retries failed requests up to 2 times with exponential backoff.
Sources: cooltools/lib/phoneApi.ts:7-12, cooltools/lib/phoneApi.ts:145-168
Sequence of Data Retrieval
The following diagram illustrates the lifecycle of a phone detail request from the UI component to the external API:
Component Structure and UI Logic
The detail view is implemented as a client-side component using Next.js App Router hooks. It manages local state for the phone data, loading indicators, and tab navigation.
State Management
| State Variable | Type | Description |
|---|---|---|
phone | PhoneSpec | null | Stores the full hardware specification object. |
loading | boolean | Tracks the progress of the asynchronous fetch. |
activeTab | 'specs' | 'features' | 'network' | Controls which specification category is visible. |
Sources: cooltools/app/phones/[slug]/page.tsx:13-17
Navigation and Integration
Users can interact with the data through several functional hooks:
- Comparison Integration: The
handleAddToComparefunction usesrouter.pushto navigate to/compare?add={slug}, passing the current device to the comparison engine. - Share Functionality: Utilizes the Clipboard API to copy the current URL to the user's clipboard.
- Dynamic Tabs: Logic switches between technical specs (CPU/RAM), build features (Dimensions/SIM), and carrier network bands.
Sources: cooltools/app/phones/[slug]/page.tsx:44-65, cooltools/app/compare/page.tsx:20-35
Data Model (PhoneSpec)
The PhoneSpec interface defines the structure of the data displayed. This model is reflected in the frontend UI and the database schema for persisted data.
| Category | Fields | Derived From |
|---|---|---|
| Display | size, resolution, type | phone.display |
| Platform | chipset, cpu, gpu | phone.platform |
| Memory | ram, internal storage | phone.memory |
| Camera | main_camera[], selfie_camera[] | phone.main_camera |
| Body | dimensions, weight, build, sim | phone.body |
| Network | technology, 2g/3g/4g/5g_bands | phone.network |
Sources: cooltools/lib/phoneApi.ts:22-77, cooltools/shared/schema.ts:4-65
Database Schema Relationship
While the detail page primarily uses live API data, the system includes a Drizzle ORM schema for persisting phone records, including specialized fields for benchmarks and price history.
Sources: cooltools/shared/schema.ts:4-105
Utility Functions
Technical data presentation is assisted by utility functions in lib/utils.ts to ensure clean formatting:
formatPrice: Extracts numeric values from strings and formats them as localized currency (e.g., "$799").extractNumericValue: Uses regex to pull integers from spec strings (e.g., "5000 mAh" -> 5000) for comparison logic.debounce: Used in search fields to limit API requests during rapid user input.
Sources: cooltools/lib/utils.ts:17-23, cooltools/lib/utils.ts:39-43, cooltools/app/phones/page.tsx:40-45
Summary
The Dynamic Phone Details module provides a high-fidelity view of mobile hardware. By combining a resilient API client with a tabbed responsive UI, it allows users to deeply analyze device capabilities before transitioning into the multi-device comparison tool. The use of slug-based routing ensures that every device in the 10,000+ model database is accessible via a unique, SEO-friendly URL.