Specify — Device Comparison Platform for India

Compare phones, laptops, and tablets side-by-side. Real Indian prices, updated daily.

🌐 Live Demo · 📖 Documentation · 🐛 Report a Bug · ✨ Request a Feature

---

📋 Table of Contents

• Overview
• Features
• Screenshots
• Tech Stack
• Getting Started
• How to Use
• Project Structure
• Environment Variables
• Contributing
• Roadmap
• License
• Acknowledgements

---

🔍 Overview

Specify is a device comparison platform built specifically for Indian consumers. Whether you are choosing between two flagship smartphones, picking the right laptop for college, or hunting for the best budget tablet, Specify gives you the data you need to make a confident purchase — in one place, in Indian rupees, from Indian retailers.

Unlike global comparison sites that show USD prices and international availability, Specify tracks live prices from Flipkart, Amazon India, and Croma, highlights no-cost EMI options, and surfaces specs relevant to the Indian market — such as dual SIM support, 5G band compatibility, and regional variant differences.

Specify is designed for three types of users:

User type	What Specify helps them do
First-time buyer	Understand specs in plain language and find the best device for their budget
Tech enthusiast	Deep-dive into detailed specifications, benchmarks, and side-by-side comparisons
Value hunter	Track price history, compare across retailers, and set price drop alerts

Current coverage: 800+ devices across smartphones, laptops, and tablets. New devices are added weekly by our admin team and community contributors.

---

✨ Features

📱 Browse Devices

• Browse an extensive catalogue of smartphones, laptops, and tablets from all major brands including Apple, Samsung, Google, OnePlus, Xiaomi, Realme, and more.
• Filter devices by price range in ₹, brand, RAM, display type, refresh rate, operating system, and special features like 5G or NFC.
• Sort results by popularity, SpecMatch score, price (low to high / high to low), newest first, or user rating.
• Quick-filter chips for popular Indian segments — Under ₹15,000 · Under ₹25,000 · Under ₹40,000 · Flagship.
• Toggle between grid and list view for browsing comfort.

🔬 Detailed Specifications

Each device page on Specify includes:

• Full spec tables grouped by category — Processor, Display, Camera, Battery, Ports, Design & Build.
• Variant selector to switch between RAM/storage/chip configurations and see the price update live.
• Benchmark scores for CPU (single and multi-core), GPU, SSD speed, and battery performance.
• Retailer price strip showing live prices from Flipkart, Amazon India, and Croma with direct buy links.
• No-cost EMI calculation for every device — see monthly instalment amounts upfront.
• Pros & cons section curated by our editorial team.
• Price history chart showing the last 30 days of price changes across retailers.
• SpecMatch score — our proprietary 0–10 rating calculated from benchmarks, build quality, value for money, and user reviews.

⚖️ Compare Devices

• Add up to 3 devices simultaneously to the comparison tool.
• Side-by-side spec table with automatic winner highlighting — green cells indicate the better value per row.
• Grouped comparison sections: Display · Performance · Camera · Battery · India Pricing.
• Verdict strip at the bottom labelling each device — Best Overall, Best Camera, Best Value.
• Share your comparison via a unique URL — perfect for sending to friends before a purchase.
• Export comparison as a PDF.

🔔 Price Alerts (Coming soon)

• Set a target price for any device and get notified by email or app notification when the price drops.
• Supports Flipkart, Amazon India, and Croma simultaneously.

🛠️ Admin Dashboard

• Secure /admin panel for content managers to add, edit, and publish device listings.
• Dynamic spec builder — add any number of spec rows with Group / Label / Value fields.
• Draft/publish workflow with immediate publish toggle.
• CSV import for bulk device data entry.
• Analytics for traffic, top comparisons, and search queries.

---

📸 Screenshots

Screenshots of the current production build.

Browse page	Device detail	Compare tool

Mobile browse	Admin dashboard	Filter sheet

---

🛠 Tech Stack

Layer	Technology	Purpose
Frontend	Next.js 15 (App Router)	SSG, ISR, and SSR per page
Styling	Tailwind CSS	Utility-first responsive design
State / Data	TanStack Query (React Query)	Server state, caching, optimistic updates
Backend	Next.js API Routes	REST API, replaces separate Express server
ORM	Drizzle ORM	Type-safe database access, schema-as-code, and migrations
Database	PostgreSQL 16	Primary data store
Auth	NextAuth.js	Admin session management
Validation	Zod	Schema validation on client and server
Hosting	Vercel (frontend) + Hetzner VPS (DB)	Production deployment
CDN	Vercel Edge Network	Static asset delivery

Rendering strategy

/                    → SSG  (rebuilt nightly)
/mobiles             → SSG  (rebuilt every 24 hours)
/mobiles/[slug]      → ISR  (rebuilt every 1 hour)
/laptops/[slug]      → ISR  (rebuilt every 1 hour)
/compare             → SSR  (always fresh, user-driven)
/admin/**            → SSR  (always fresh, auth protected)

---

🚀 Getting Started

Prerequisites

Ensure the following are installed on your machine before proceeding:

• Node.js v18.0 or higher (download)
• npm v9.0 or higher (comes with Node.js)
• PostgreSQL 14 or higher (download)
• Git (download)

1 · Clone the repository

git clone https://github.com/specify/specify.git
cd specify

2 · Install dependencies

npm install

This installs all dependencies including drizzle-orm, drizzle-kit, and postgres (the PostgreSQL driver used by Drizzle).

3 · Set up environment variables

Copy the example environment file and fill in your values:

cp .env.example .env.local

See Environment Variables for a full list of required variables.

4 · Set up the database

Create a PostgreSQL database and run Drizzle migrations:

# Create the database (if it does not exist)
createdb specify_db

# Push the schema to the database (development)
npx drizzle-kit push

# (Optional) Seed the database with sample device data
npm run db:seed

The Drizzle schema lives in drizzle/schema.ts. Here is a simplified example of the core tables:

// drizzle/schema.ts
import { pgTable, serial, text, real, boolean, integer, timestamp } from 'drizzle-orm/pg-core'

export const brands = pgTable('brands', {
  id:   serial('id').primaryKey(),
  name: text('name').notNull().unique(),
  logo: text('logo'),
})

export const categories = pgTable('categories', {
  id:   serial('id').primaryKey(),
  name: text('name').notNull().unique(),
})

export const devices = pgTable('devices', {
  id:          serial('id').primaryKey(),
  name:        text('name').notNull(),
  slug:        text('slug').notNull().unique(),
  brandId:     integer('brand_id').references(() => brands.id),
  categoryId:  integer('category_id').references(() => categories.id),
  priceInr:    real('price_inr').notNull(),
  score:       real('score'),
  published:   boolean('published').default(false),
  createdAt:   timestamp('created_at').defaultNow(),
  updatedAt:   timestamp('updated_at').defaultNow(),
})

export const specs = pgTable('specs', {
  id:       serial('id').primaryKey(),
  deviceId: integer('device_id').references(() => devices.id),
  group:    text('group').notNull(),
  label:    text('label').notNull(),
  value:    text('value').notNull(),
})

Drizzle is configured via drizzle.config.ts in the project root:

// drizzle.config.ts
import { defineConfig } from 'drizzle-kit'

export default defineConfig({
  schema:    './drizzle/schema.ts',
  out:       './drizzle/migrations',
  dialect:   'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
})

5 · Start the development server

npm run dev

The app will be running at http://localhost:3000.

The admin panel is available at http://localhost:3000/admin.

Default admin credentials (development only): Email: admin@specify.in · Password: specify_dev_2025 ⚠️ Change these immediately in production.

6 · Build for production

npm run build
npm start

---

📖 How to Use

Browsing devices

1. Visit the homepage and click Mobiles, Laptops, or Tablets in the navigation bar.
2. Use the left sidebar filters (desktop) or tap Filters (mobile) to narrow results by price, brand, RAM, or features.
3. Use the Sort dropdown to reorder results by popularity, price, or SpecMatch score.
4. Click any device card to open its full specification page.

Exploring specifications

1. On any device page, the left panel shows the price, SpecMatch score, retailer prices, and key specs at a glance.
2. Use the variant selector at the top of the right panel to switch between RAM and storage configurations — prices update automatically.
3. Scroll through the spec tables to explore every detail. Green values indicate category-leading specifications.
4. Check the Benchmark scores section for real-world performance numbers.
5. Review the Pros & Cons and User Reviews tabs for qualitative assessment.
6. Click any retailer's Buy → button to be taken directly to the product listing on Flipkart, Amazon, or Croma.

Comparing devices

1. On any device card or device page, click + Add to compare.
2. A floating compare bar will appear at the bottom of the screen showing your selected devices.
3. Add a second and optional third device by browsing and clicking + Add to compare on other devices.
4. Click Compare Now → in the floating bar to open the full comparison page.
5. On the compare page, green cells highlight the winner for each spec row.
6. Review the Verdict strip at the bottom for an overall recommendation.
7. Click Share link to copy a URL to the comparison for sharing.

Setting a price alert (Coming soon)

1. On any device page, click Set price alert below the retailer prices.
2. Enter your target price in ₹.
3. Enter your email address and confirm.
4. You will receive an email notification when the price drops to or below your target.

Using the admin panel

1. Navigate to /admin and sign in with your admin credentials.
2. Click + Add device to create a new listing — fill in the name, brand, category, price, and use the spec builder to add spec rows.
3. Toggle Publish immediately to make the device live, or save as a draft.
4. Use the device table to search, filter, edit, or delete existing listings.
5. Click the edit icon on any row to open the full edit form.

---

📁 Project Structure

specify/
├── app/
│   ├── layout.tsx                   # Root layout with nav and footer
│   ├── page.tsx                     # Homepage
│   ├── mobiles/
│   │   ├── page.tsx                 # Browse mobiles (SSG)
│   │   └── [slug]/page.tsx          # Mobile detail (ISR)
│   ├── laptops/
│   │   ├── page.tsx                 # Browse laptops (SSG)
│   │   └── [slug]/page.tsx          # Laptop detail (ISR)
│   ├── compare/
│   │   └── page.tsx                 # Comparison page (SSR)
│   ├── admin/
│   │   ├── layout.tsx               # Admin auth guard
│   │   ├── page.tsx                 # Admin dashboard
│   │   └── devices/
│   │       ├── page.tsx             # Device list
│   │       ├── new/page.tsx         # Add device
│   │       └── [id]/edit/page.tsx   # Edit device
│   └── api/
│       ├── devices/route.ts         # GET all devices, POST new
│       ├── devices/[id]/route.ts    # GET, PUT, DELETE device
│       └── admin/devices/route.ts   # Protected write routes
│
├── components/
│   ├── ui/                          # Buttons, inputs, badges, modals
│   ├── devices/                     # DeviceCard, SpecTable, VariantSelector
│   ├── compare/                     # CompareTable, VerdictBar, CompareFloat
│   ├── filters/                     # FilterSheet, SortSheet, ActiveFilterBar
│   ├── layout/                      # Navbar, Footer, Breadcrumb
│   └── admin/                       # DeviceForm, SpecBuilder, AdminTable
│
├── lib/
│   ├── prisma.ts                    # Prisma client singleton
│   ├── auth.ts                      # NextAuth configuration
│   ├── utils.ts                     # formatPrice, slugify, helpers
│   └── validations.ts               # Zod schemas
│
├── drizzle/
│   ├── schema.ts                    # Table definitions (devices, brands, specs, etc.)
│   ├── index.ts                     # Drizzle client instance
│   ├── migrations/                  # Auto-generated SQL migration files
│   └── seed.ts                      # Sample data seeder
│
├── public/
│   ├── images/                      # Device images
│   └── icons/                       # Brand logos and UI icons
│
├── middleware.ts                    # Admin route protection
├── next.config.ts                   # Next.js configuration
├── tailwind.config.ts               # Tailwind configuration
└── .env.example                     # Environment variable template

---

🔐 Environment Variables

Create a .env.local file in the project root with the following variables:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/specify_db"

# NextAuth
NEXTAUTH_SECRET="your-nextauth-secret-here"
NEXTAUTH_URL="http://localhost:3000"

# Admin credentials (first-time setup)
ADMIN_EMAIL="admin@specify.in"
ADMIN_PASSWORD="your-secure-password"

# Affiliate partner IDs
FLIPKART_AFFILIATE_ID="your-flipkart-affiliate-id"
AMAZON_AFFILIATE_TAG="specify-21"

# App config
NEXT_PUBLIC_APP_URL="http://localhost:3000"
NEXT_PUBLIC_APP_NAME="Specify"

# Email (for price alerts)
RESEND_API_KEY="your-resend-api-key"
EMAIL_FROM="alerts@specify.in"

⚠️ Never commit your .env.local file to version control. It is listed in .gitignore by default.

---

🤝 Contributing

Specify is open to contributions from the community! Whether it is fixing a bug, improving documentation, adding a missing device, or suggesting a new feature — every contribution makes Specify better for Indian consumers.

Ways to contribute

Type	How
🐛 Bug report	Open an issue with reproduction steps
✨ Feature request	Open an issue describing the use case
📱 Add a device	Submit a pull request with the device data in the /data/devices directory
🔧 Code fix	Fork → branch → fix → PR (see workflow below)
📖 Documentation	Edit any .md file and open a pull request

Development workflow

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/specify.git
cd specify

# 3. Create a new branch
git checkout -b feature/your-feature-name
# or
git checkout -b fix/bug-description

# 4. Make your changes, then commit
git add .
git commit -m "feat: add price history chart to device detail page"

# 5. Push to your fork
git push origin feature/your-feature-name

# 6. Open a Pull Request on GitHub

Commit message convention

Specify follows the Conventional Commits standard:

feat:     a new feature
fix:      a bug fix
docs:     documentation changes only
style:    formatting, missing semicolons, etc. (no logic change)
refactor: code change that neither fixes a bug nor adds a feature
test:     adding or updating tests
chore:    build process, dependency updates

Code standards

• All code must pass npm run lint before submitting a pull request.
• TypeScript strict mode is enabled — avoid using any.
• All new API routes must include Zod validation for request bodies.
• New components must be placed in the appropriate folder under /components.
• Drizzle schema changes must be accompanied by a migration — run npx drizzle-kit generate then npx drizzle-kit migrate.

Adding a device

The quickest contribution you can make is adding a missing device to the database. Use the admin panel (if you have access) or submit a JSON file following this structure:

{
  "name": "Realme 14 Pro+",
  "slug": "realme-14-pro-plus",
  "brand": "Realme",
  "category": "Mobile",
  "priceInr": 34999,
  "score": 8.2,
  "published": true,
  "specs": [
    { "group": "Display", "label": "Screen size", "value": "6.83 inch" },
    { "group": "Display", "label": "Panel type", "value": "AMOLED, 120Hz" },
    { "group": "Performance", "label": "Processor", "value": "Snapdragon 7s Gen 3" },
    { "group": "Performance", "label": "RAM", "value": "8 GB / 12 GB" },
    { "group": "Camera", "label": "Main sensor", "value": "50 MP" },
    { "group": "Battery", "label": "Capacity", "value": "6000 mAh" }
  ]
}

Place the file in /data/devices/mobiles/ and open a pull request.

---

📄 License

Specify is released under the MIT License.

MIT License

Copyright (c) 2025 Specify India

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Device specifications and prices are sourced from publicly available retailer data and manufacturer websites. Specify earns affiliate commissions on purchases made through retailer links. This does not influence our scores or editorial content.

---

🙏 Acknowledgements

Specify would not be possible without these fantastic open-source projects and services:

• Next.js — The React framework that powers the entire application
• Drizzle ORM — For lightning-fast, type-safe database queries with schema-as-code
• TanStack Query — For elegant server state management
• Tailwind CSS — For rapid, consistent UI development
• Zod — For runtime validation that TypeScript cannot catch
• NextAuth.js — For secure, easy authentication
• Vercel — For world-class deployment and edge infrastructure
• DM Sans — The typeface used throughout the interface

---

Built with ❤️ for India by the Specify team

specify.in · @specifyindia · hello@specify.in

If Specify helped you pick the right device, give us a ⭐ on GitHub — it means a lot!