SuppleCost

A supplement price comparison platform built with Next.js (App Router), Supabase, and Tailwind CSS.

Compare prices for supplements across top Indian retailers like Amazon, Flipkart, and more. Features include product discovery, AI-powered advisor, price comparison, and an admin dashboard.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS v4
• Database: Supabase (PostgreSQL)
• State: React hooks, useReducer
• Animation: Framer Motion
• UI Icons: Lucide React
• AI: Built-in advisor with intent-based routing
• Charts: Recharts (admin analytics)

Getting Started

Prerequisites

• Node.js 18+
• pnpm (preferred package manager)

Setup

# Install dependencies
pnpm install

# Copy environment variables
cp .env.example .env.local
# Then fill in your Supabase credentials

# Start development server
pnpm dev

Open http://localhost:3000 to see the app.

Build

pnpm build

Lint

pnpm lint

Project Structure

src/
├── app/          # Next.js App Router pages and API routes
├── admin/        # Admin dashboard components
├── browser/      # Desktop browser-specific components
├── mobile/       # Mobile-specific components
├── server/       # Server utilities (DB, AI, Supabase)
├── shared/       # Shared components, hooks, types, utils
└── data/         # Static data

Key Features

• Product Catalog — Browse, search, and filter supplements by category, brand, price, and goals
• Price Comparison — Compare prices across multiple retailers
• AI Advisor — Chat-based supplement recommendations and advice
• Admin Panel — Manage products, brands, categories, and AI content
• PWA Support — Installable with offline capabilities
• Responsive — Optimized for both desktop and mobile

Deployment

This project is deployed on Vercel. Pushes to the main branch trigger automatic deployments.