Phone Catalog
Relevant source files
The following files were used as context for generating this wiki page:
The Phone Catalog serves as the central repository and discovery interface for mobile device information within the CoolTools platform. It provides users with a comprehensive database of smartphones, ranging from 2018 to 2025, enabling exploration through brand categorization, latest releases, and detailed individual specification pages. Sources: cooltools/app/page.tsx:88, cooltools/app/phones/page.tsx:10-25
The catalog architecture leverages a remote mobile specifications API, supported by an internal caching layer and a structured database schema for persistent data such as price history and user reviews. It integrates closely with the Comparison System and Advanced Search to provide a unified user experience. Sources: cooltools/lib/phoneApi.ts:4-10, cooltools/shared/schema.ts:4-70
Architecture and Data Flow
The Phone Catalog operates on a decoupled architecture where the frontend (Next.js) communicates with an external API service through a utility library.
Data Acquisition Layer
The system fetches data from https://api-mobilespecs.azharimm.dev. To optimize performance and reduce API overhead, the system implements a 5-minute in-memory cache and request deduplication. Sources: cooltools/lib/phoneApi.ts:4-15
The diagram above illustrates the data retrieval logic, including the caching and deduplication mechanisms used to fetch phone specifications. Sources: cooltools/lib/phoneApi.ts:13-35
Component Structure
The catalog is divided into three primary views:
- Main Listing Page: Displays latest releases and a "Browse by Brand" section. Sources: cooltools/app/phones/page.tsx:100-140
- Brand-Specific Lists: Filters devices based on selected manufacturers. Sources: cooltools/app/phones/page.tsx:128-148
- Detailed Specification View: A deep-dive into a single device's hardware, network, and design attributes. Sources: cooltools/app/phones/[slug]/page.tsx:112-250
Data Models and Schemas
External API Objects
The system interfaces with several TypeScript interfaces to handle data from the mobile specifications provider.
| Interface | Purpose | Key Fields |
|---|---|---|
PhoneListItem | Lightweight object for list views. | phone_name, phone_url, phone_image |
PhoneBrand | Categorization of devices by maker. | brand_name, device_count |
PhoneSpec | Detailed hardware and software data. | display, platform, memory, battery, network |
Sources: cooltools/lib/phoneApi.ts:37-90
Database Schema (Drizzle ORM)
While the primary data is fetched via API, the phones table in the database is designed to mirror and extend this data for internal features like price tracking and reviews.
| Field | Type | Description |
|---|---|---|
slug | Text (Unique) | URL-friendly identifier for the device. |
antutuScore | Integer | Performance benchmark storage. |
cameraScore | Integer | DXOMARK style quality rating. |
fullSpecs | JSONB | Raw specification dump for archival. |
Sources: cooltools/shared/schema.ts:4-53
Phone Details Module
The detailed view uses a tabbed interface to organize the 150+ features available for each device. Sources: cooltools/app/phones/[slug]/page.tsx:12-20
Specification Categories
Information is categorized into three main tabs:
- Specifications: Core hardware including Display (Resolution, Type), Performance (Chipset, CPU, GPU), Memory, and Battery. Sources: cooltools/app/phones/[slug]/page.tsx:155-220
- Features: Physical attributes like Body Dimensions, Build Material, and Connectivity (NFC, Bluetooth, WLAN). Sources: cooltools/app/phones/[slug]/page.tsx:244-290
- Network: Detailed band support for 2G, 3G, 4G, and 5G technologies. Sources: cooltools/app/phones/[slug]/page.tsx:324-350
The sequence above describes the process of loading a specific phone's details when a user navigates from the catalog to a detail page. Sources: cooltools/app/phones/[slug]/page.tsx:30-50, cooltools/lib/phoneApi.ts:160-185
Navigation and Discovery
The catalog utilizes several entry points to help users find devices:
- Search Input: A client-side filter that matches device names against the currently loaded list. Sources: cooltools/app/phones/page.tsx:40-45
- Trending Carousel: Featured on the home page, showing high-interest devices. Sources: cooltools/app/page.tsx:100-130
- Advanced Search: A dedicated page with 150+ filters including RAM, price range, and refresh rate. Sources: cooltools/app/search/page.tsx:45-120
Implementation of Search
const filteredPhones = searchQuery.trim()
? phones.filter(phone =>
phone.phone_name.toLowerCase().includes(searchQuery.toLowerCase())
)
: phones;
Sources: cooltools/app/phones/page.tsx:47-51
The Phone Catalog is the foundational data provider for the CoolTools application. By combining real-time API data with robust caching and a detailed specification UI, it enables the comparison and search functionalities that define the platform. Sources: cooltools/app/page.tsx:12-15, cooltools/README.md:1-5