Extending the Application
Relevant source files
The following files were used as context for generating this wiki page:
The CoolTools platform is a modular Next.js application designed for comprehensive phone comparison. It leverages a tiered architecture consisting of a React-based frontend, a centralized API client for data fetching, and a structured database schema defined via Drizzle ORM. Extending the application involves integrating new data points into the schema, expanding the API client to support additional endpoints, and creating new filtered views or comparison modules.
Sources: cooltools/app/page.tsx, cooltools/lib/phoneApi.ts, cooltools/shared/schema.ts
Data Layer Expansion
The application uses Drizzle ORM to define its data model. The core entity is the phones table, which supports a wide array of specifications from physical dimensions to benchmark scores. To add new comparison metrics (e.g., satellite connectivity or specific AI benchmarks), developers must update the schema in cooltools/shared/schema.ts.
Database Schema Structure
The schema includes specialized tables for longitudinal data like price history and user-generated content like reviews.
This diagram shows the relationship between the core phones table and its historical/metric-driven child tables.
Sources: cooltools/shared/schema.ts:4-118
Key Data Fields
| Field Category | Key Fields | Data Type |
|---|---|---|
| Performance | chipset, cpu, gpu, ram, antutuScore | text, integer |
| Display | displaySize, refreshRate, ppi, brightness | real, integer |
| Camera | mainCamera, selfieCamera, cameraScore | text, integer |
| Battery | batteryCapacity, fastCharging, wirelessCharging | integer, boolean |
Sources: cooltools/shared/schema.ts:13-68
API Integration
The phoneApi.ts module acts as the data abstraction layer, interfacing with an external mobile specs API. It includes a caching mechanism and request deduplication to optimize performance. To extend the application with new data sources, additional functions should be implemented here following the existing pattern of axios requests and Map-based caching.
Request Flow and Caching
The API client uses a TTL (Time To Live) of 5 minutes for cached data.
API Interface Definition
The PhoneSpec interface is the primary data structure used across the application. Any extension to the data provided by the backend must be reflected here to ensure type safety in the UI.
Sources: cooltools/lib/phoneApi.ts:23-83
Frontend Components and Routing
The application uses the Next.js App Router. New features can be added by creating new route segments in the cooltools/app directory.
Advanced Search Extension
The search functionality in cooltools/app/search/page.tsx utilizes a state-driven filter system. To add a new filter (e.g., "Water Resistance"):
- Update the
filtersstate object. - Add a corresponding input/select element to the UI.
- Ensure the
handleSearchfunction serializes the new filter into the URL parameters.
Sources: cooltools/app/search/page.tsx:11-40
Comparison Logic
The comparison module in cooltools/app/compare/page.tsx supports up to 4 phones. It manages selection state and fetches detailed specifications for each selected device.
Implementation Details
Utility Functions
The cooltools/lib/utils.ts file provides helpers for formatting and data extraction which should be used when extending UI components:
formatPrice: Converts numeric strings to currency format.formatRelativeTime: Converts date strings to human-readable relative time (e.g., "2 days ago").extractNumericValue: Pulls integers from strings containing units (e.g., "5000 mAh" to5000).
Sources: cooltools/lib/utils.ts:18-47
Layout and Navigation
Global navigation is defined in cooltools/app/layout.tsx. To add a new top-level module (e.g., "Guides" or "Deals"), a new <Link> component must be added to the <nav> section.
Sources: cooltools/app/layout.tsx:35-64
The application is structured to allow for significant scale by adding new fields to the phones table and corresponding UI elements in the comparison and search views. The modular nature of the API client and the use of TypeScript interfaces ensure that data remains consistent throughout the extension process.