Home Page
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Home Page of the CoolTools platform serves as the primary entry point and dashboard for the ultimate phone comparison system. It is designed to provide users with immediate access to trending devices, latest releases, and specialized search tools. The page integrates data from multiple high-profile sources like GSMArena, Rtings, and DXOMARK to offer a comprehensive overview of the mobile device market. Sources: cooltools/app/page.tsx:28-30, cooltools/app/layout.tsx:18-20
Its primary scope includes visual marketing via a trending carousel, live statistical counters of the platform's database, and quick-access navigation to advanced features such as the side-by-side Comparison Page and Advanced Search. Sources: cooltools/app/page.tsx:84-110
Architecture and Components
The Home Page is a client-side rendered (CSR) component in the Next.js App Router framework. It utilizes React hooks for state management and data fetching upon component mounting. Sources: cooltools/app/page.tsx:1-5
Data Flow and Lifecycle
Upon initialization, the page triggers two main asynchronous processes: loading phone data from the internal API library and starting a visual animation for platform statistics.
The diagram above illustrates the parallel execution of data fetching and visual animations when the home page is first loaded. Sources: cooltools/app/page.tsx:21-27, cooltools/app/page.tsx:37-45
Core Components
The page is organized into several high-level functional blocks:
| Component | Description | Data Source |
|---|---|---|
| Hero Section | Displays the main brand title and primary call-to-action buttons. | Static / layout.tsx |
| Trending Carousel | A sliding display of the top 5 phones by user interest. | getTopPhones() |
| Animated Stats | A counter showing Features, Phone Models, Data Sources, and Historical Years. | animateStats() |
| Category Quick Links | Navigation cards for Gaming, Camera, Battery, and Flagship categories. | Static links to /search |
| Latest Releases | A grid of the 8 most recently added devices. | getLatestPhones() |
| Newsletter | A subscription block for price drop alerts. | Component state email |
Sources: cooltools/app/page.tsx:87-320
API and Data Integration
The Home Page interacts with a dedicated API utility layer defined in lib/phoneApi.ts. This layer abstracts the communication with the api-mobilespecs.azharimm.dev backend.
Key Data Structures
The data displayed on the Home Page adheres to the PhoneListItem interface:
export interface PhoneListItem {
phone_name: string;
phone_url: string;
phone_image: string;
detail: string;
}
Sources: cooltools/lib/phoneApi.ts:88-93
Stats Animation Logic
The platform statistics are simulated with a local animation function that increments values over a 2000ms duration. This provides a dynamic feel to the platform's scale.
function animateStats() {
const targets = { phones: 10000, features: 150, sources: 25, years: 7 };
const duration = 2000;
// ... logic to increment setStats
}
Sources: cooltools/app/page.tsx:44-67
User Interaction and Navigation
The Home Page facilitates several navigational paths through the application.
Comparison Templates
The page includes hardcoded "Quick Comparison" templates that allow users to jump directly into popular matchups. This uses a URL query parameter strategy:
- Example:
href="/compare?phones=iphone-15-pro,samsung-galaxy-s24-ultra"
Sources: cooltools/app/page.tsx:210-224
Global Navigation
The site-wide layout provides a persistent navigation bar that wraps the Home Page, ensuring consistent access to the primary modules.
The navigation structure ensures that users can easily return to the Home Page or jump to specialized tools from any point. Sources: cooltools/app/layout.tsx:38-65
Database Schema Context
While the Home Page is primarily a consumer of the external MobileSpecs API, the project defines a Drizzle ORM schema for internal features. Data presented on the home page corresponds to the following fields in the phones table:
brandandmodel(Mapped tophone_name)imageUrl(Mapped tophone_image)releaseDate(Used for the "Latest Releases" sorting logic)
Sources: cooltools/shared/schema.ts:4-15
Conclusion
The Home Page acts as a comprehensive portal, combining dynamic data fetching with interactive UI elements to engage users. By highlighting trending devices and providing clear entry points into comparison and search tools, it serves as the functional hub for the CoolTools platform. Sources: cooltools/app/page.tsx:84-350