Vercel Deployment Guide

Relevant source files

The following files were used as context for generating this wiki page:

• cooltools/README.md
• cooltools/package.json
• cooltools/app/layout.tsx
• cooltools/tsconfig.json
• cooltools/shared/schema.ts

The Vercel Deployment Guide outlines the process and configuration required to deploy the CoolTools phone comparison platform. As a project bootstrapped with create-next-app, it is optimized for the Vercel Platform, leveraging Next.js features such as automatic font optimization and server-side rendering capability.

Sources: cooltools/README.md:1-5, cooltools/README.md:28-30

Project Configuration

The application is built using Next.js 15.5.4 and TypeScript. Successful deployment on Vercel requires adherence to the defined script lifecycle and dependency management. The project uses next/font to load the Geist font family, which is natively optimized for Vercel deployments.

Sources: cooltools/README.md:20-22, cooltools/package.json:16, cooltools/tsconfig.json:2-15

Build and Deployment Scripts

The package.json defines the essential scripts utilized by the Vercel build pipeline:

Script	Command	Purpose
build	next build --turbopack	Compiles the application for production using the Turbopack bundler.
start	next start --port 5000	Starts the production server (defaulted to port 5000).
lint	eslint	Runs static code analysis to ensure code quality before deployment.

Sources: cooltools/package.json:7-10

Architecture and Data Flow

The deployment architecture involves a Next.js frontend communicating with a PostgreSQL database via Drizzle ORM and a Prisma client. The system also integrates with external mobile specification APIs.

This diagram illustrates the flow of data from the Vercel-hosted Next.js application to both internal databases and external technical specification providers.

Sources: cooltools/package.json:16-24, cooltools/shared/schema.ts:1-5

Database Deployment

The project utilizes PostgreSQL with Drizzle ORM for schema management. For a production deployment on Vercel, database migrations must be handled via the provided schema definitions.

Schema Entities

The following table summarizes the primary database entities defined in the system schema that must be provisioned during deployment:

Table Name	Description	Key Fields
phones	Core phone specification data.	brand, model, slug, full_specs
comparisons	User-saved phone comparisons.	userId, phoneIds
price_history	Historical pricing data for tracking.	phoneId, price, retailer
benchmarks	Technical performance scores.	benchmark_type, score

Sources: cooltools/shared/schema.ts:4-110

Environment and Metadata

Metadata for the production site is configured in the Root Layout. This information is used by Vercel's crawler and search engines for SEO optimization.

export const metadata: Metadata = {
  title: "CoolTools - Ultimate Phone Comparison Platform",
  description: "Compare phones with 150+ features from GSMArena, Rtings, DXOMARK, and 25+ other top platforms",
};

Sources: cooltools/app/layout.tsx:18-21

Deployment Steps

1. Repository Connection: Connect the GitHub repository VpkDevs/phoneCompare to a new project on the Vercel Dashboard.
2. Environment Variables: Configure connection strings for the PostgreSQL database (referenced by pg and drizzle-orm).
3. Build Settings: Ensure the build command is set to npm run build and the output directory is .next.
4. Database Push: Execute npm run db:push if the production database requires initial schema synchronization.

Sources: cooltools/README.md:28-32, cooltools/package.json:11-24

Summary

Deploying CoolTools on Vercel leverages the platform's native support for Next.js 15. The process relies on the Turbopack-enabled build script and a robust PostgreSQL schema managed by Drizzle ORM to provide high-performance phone comparison features and data tracking.