18 Commits

Author SHA1 Message Date
Christopher Mayor
7888d7995c chore: update drizzle schema and migrations 2026-04-24 15:04:29 -07:00
Christopher Mayor
3689b1707a chore: gitignore worktree directories 2026-04-24 15:03:14 -07:00
Christopher Mayor
aac0e2f5b1 docs: comprehensive documentation - README, specs, architecture, API reference, UI/UX flow, dev guide 2026-04-24 15:02:40 -07:00
Christopher Mayor
5bde4e3aa6 Merge branch 'feat/backend' 2026-04-24 15:01:37 -07:00
Christopher Mayor
6832fbdebb Merge branch 'feat/frontend' 2026-04-24 15:01:21 -07:00
Christopher Mayor
37c07e468d fix: lazy-init OpenAI client to avoid build failure without API key 2026-04-24 14:37:28 -07:00
Christopher Mayor
a273f29e07 feat: improve compare API route with searching stage and validation 2026-04-24 14:36:06 -07:00
Christopher Mayor
2f4239a83b feat: add provider fallback chain with priority system 2026-04-24 14:35:20 -07:00
Christopher Mayor
3539a5f3eb feat: add .env.example with required environment variables 2026-04-24 14:35:19 -07:00
Christopher Mayor
e13b1ea2d5 feat: add Perplexity Sonar provider with OpenAI fallback 2026-04-24 14:34:55 -07:00
Christopher Mayor
26d879c82e feat: add standalone output to next.config.ts for Docker builds 2026-04-24 14:34:50 -07:00
Christopher Mayor
66a2d647bb feat: add Dockerfile and docker-compose.yml for containerized deployment 2026-04-24 14:34:35 -07:00
Christopher Mayor
637f1540cf feat: update research pipeline with Tavily search and progress stages 2026-04-24 14:34:22 -07:00
Christopher Mayor
2c2fd3547c feat: add auth middleware protecting /compare and /profile routes 2026-04-24 14:34:13 -07:00
Christopher Mayor
3568e2f008 feat: update Better Auth config with schema and session expiry 2026-04-24 14:33:54 -07:00
Christopher Mayor
71ef567d0d feat: enhance OpenAI provider with web research context 2026-04-24 14:33:50 -07:00
Christopher Mayor
d8ff5f4bb1 feat: add users and sessions tables for Better Auth 2026-04-24 14:33:37 -07:00
Christopher Mayor
3a448a5063 feat: add Tavily search provider 2026-04-24 14:33:20 -07:00
25 changed files with 1885 additions and 155 deletions

6
.env.example Normal file
View File

@@ -0,0 +1,6 @@
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/comparaison
BETTER_AUTH_SECRET=change-me-to-random-string
OPENAI_API_KEY=
PERPLEXITY_API_KEY=
TAVILY_API_KEY=
NEXT_PUBLIC_APP_URL=http://localhost:3000

6
.gitignore vendored
View File

@@ -32,6 +32,7 @@ yarn-error.log*
# env files (can opt-in for committing if needed)
.env*
!.env.example
# vercel
.vercel
@@ -39,3 +40,8 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
# Worktrees (tracked via branches)
comparaison-backend/
comparaison-llm/
comparaison-ui/

21
Dockerfile Normal file
View File

@@ -0,0 +1,21 @@
FROM node:20-alpine AS base
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]

152
README.md
View File

@@ -1,36 +1,148 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# ComparAIson
## Getting Started
**AI-Powered Deep Research Comparison Platform**
First, run the development server:
Compare anything with intelligent, multi-dimensional analysis. ComparAIson uses LLM-powered research to generate comprehensive, visual comparisons — then saves them as shareable posts on your profile.
## Features
- **Deep Research Engine** — Multi-provider LLM pipeline (Tavily search → Perplexity/OpenAI synthesis) with automatic fallback
- **Interactive Visualizations** — Radar charts, grouped bar charts, feature comparison tables, score cards, pros/cons breakdowns
- **Real-Time Streaming** — Watch research progress live via Server-Sent Events
- **User Profiles** — Save comparisons to your profile, browse a public feed
- **Self-Hosted** — Docker Compose deployment, runs on a Raspberry Pi
## Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Server Components, Server Actions) |
| Language | TypeScript |
| Database | PostgreSQL 16 |
| ORM | Drizzle ORM |
| Auth | Better Auth (email + password) |
| UI | Tailwind CSS + shadcn/ui |
| Charts | Recharts |
| LLM | OpenAI GPT-4o-mini + Tavily Search + Perplexity Sonar |
| Deployment | Docker Compose + Traefik reverse proxy |
## Quick Start
### Prerequisites
- Node.js 20+
- PostgreSQL 16+ (or Docker)
- At least one LLM API key
### 1. Clone & Install
```bash
git clone https://gitea.tophermayor.com/TopherMayor/comparaison.git
cd comparaison
npm install
```
### 2. Configure Environment
```bash
cp .env.example .env.local
# Edit .env.local with your API keys and database URL
```
Required environment variables:
| Variable | Description | Required |
|---|---|---|
| `DATABASE_URL` | PostgreSQL connection string | Yes |
| `BETTER_AUTH_SECRET` | Random secret for session signing | Yes |
| `OPENAI_API_KEY` | OpenAI API key (GPT-4o-mini) | Yes* |
| `TAVILY_API_KEY` | Tavily search API key | Recommended |
| `PERPLEXITY_API_KEY` | Perplexity Sonar API key | Optional |
| `NEXT_PUBLIC_APP_URL` | Public URL of the app | Yes |
*At minimum, one LLM provider key is required. OpenAI works standalone; Tavily adds web search; Perplexity adds cheaper synthesis.
### 3. Database Setup
```bash
# Generate migration
npx drizzle-kit generate
# Run migration
npx drizzle-kit migrate
```
### 4. Development
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
# App runs at http://localhost:3000
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### 5. Docker Deployment
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```bash
docker compose up -d
```
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Project Structure
## Learn More
```
src/
├── app/
│ ├── (auth)/ # Auth route group
│ │ ├── sign-in/ # Sign in page
│ │ └── sign-up/ # Sign up page
│ ├── (main)/ # Main app route group (with nav)
│ │ ├── compare/ # Comparison input + results
│ │ ├── explore/ # Public comparisons feed
│ │ └── profile/ # User profile + saved comparisons
│ ├── api/
│ │ ├── auth/[...all]/ # Better Auth catch-all
│ │ └── compare/ # SSE streaming research endpoint
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── components/
│ ├── comparison/ # Visualization components
│ │ ├── radar-chart.tsx
│ │ ├── bar-chart.tsx
│ │ ├── comparison-table.tsx
│ │ ├── score-card.tsx
│ │ └── pros-cons-card.tsx
│ └── ui/ # shadcn/ui components
├── hooks/
│ └── use-comparison-stream.ts # SSE streaming hook
├── lib/
│ ├── auth.ts # Better Auth server config
│ ├── auth-client.ts # Better Auth client
│ ├── db/
│ │ ├── index.ts # Drizzle client
│ │ └── schema.ts # Database schema
│ ├── llm/
│ │ ├── index.ts # Research pipeline orchestrator
│ │ ├── types.ts # LLM type definitions
│ │ └── providers/
│ │ ├── index.ts # Provider fallback chain
│ │ ├── openai.ts # OpenAI GPT-4o-mini provider
│ │ ├── tavily.ts # Tavily search provider
│ │ └── perplexity.ts # Perplexity Sonar provider
│ ├── types.ts # Shared type definitions
│ └── utils.ts # Utility functions
└── middleware.ts # Auth middleware + route protection
```
To learn more about Next.js, take a look at the following resources:
## Architecture
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
See [docs/architecture.md](docs/architecture.md) for detailed architecture documentation.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## API Reference
## Deploy on Vercel
See [docs/api-reference.md](docs/api-reference.md) for endpoint documentation.
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
## UI/UX Flow
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
See [docs/ui-ux-flow.md](docs/ui-ux-flow.md) for user journey and wireframe descriptions.
## License
MIT

30
docker-compose.yml Normal file
View File

@@ -0,0 +1,30 @@
version: "3.8"
services:
app:
build: .
ports:
- "3000:3000"
environment:
- DATABASE_URL=postgresql://postgres:postgres@db:5432/comparaison
depends_on:
db:
condition: service_healthy
restart: unless-stopped
db:
image: postgres:16-alpine
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: comparaison
ports:
- "5432:5432"
volumes:
- pgdata:/var/lib/postgresql/data
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres"]
interval: 5s
timeout: 5s
retries: 5
restart: unless-stopped
volumes:
pgdata:

204
docs/api-reference.md Normal file
View File

@@ -0,0 +1,204 @@
# ComparAIson — API Reference
## Base URL
```
Development: http://localhost:3000
Production: https://comparaison.tophermayor.com
```
---
## Authentication
All authenticated endpoints use Better Auth session cookies.
### POST `/api/auth/sign-up`
Create a new account.
**Request:**
```json
{
"name": "Alex Johnson",
"email": "alex@example.com",
"password": "securepassword123"
}
```
**Response:** `200 OK` — Sets session cookie, returns user object
### POST `/api/auth/sign-in`
Sign in to existing account.
**Request:**
```json
{
"email": "alex@example.com",
"password": "securepassword123"
}
```
**Response:** `200 OK` — Sets session cookie, redirects to callbackUrl
### POST `/api/auth/sign-out`
Sign out, clears session.
**Response:** `200 OK` — Redirects to `/`
---
## Comparison Endpoints
### POST `/api/compare`
Start a new comparison research. Returns a Server-Sent Events stream.
**Authentication:** Required
**Request:**
```json
{
"query": "for modern web development",
"items": ["React", "Vue", "Svelte"],
"dimensions": ["Performance", "Developer Experience"]
}
```
| Field | Type | Required | Description |
|---|---|---|---|
| `query` | string | No | Context/focus for the comparison |
| `items` | string[] | Yes | Items to compare (2-10) |
| `dimensions` | string[] | No | Optional dimension hints |
**Response:** `200 OK``text/event-stream`
SSE event format:
```
event: progress
data: {"status":"researching","message":"Analyzing comparison request...","itemsCompleted":0,"totalItems":3,"currentStep":"Analyzing comparison request..."}
event: progress
data: {"status":"researching","message":"Researching React...","itemsCompleted":1,"totalItems":3,"currentStep":"Analyzing React"}
event: progress
data: {"status":"completed","message":"Research complete!","itemsCompleted":3,"totalItems":3,"currentStep":"Done"}
event: done
data: {"id":"clx123abc","slug":"react-vs-vue-vs-svelte-clx123","data":{...full comparison data...}}
```
**Error Response:** `400 Bad Request`
```json
{ "error": "At least 2 items are required" }
```
---
## Page Routes
### `GET /`
Landing page. Public. Shows hero, example comparisons, features.
### `GET /sign-in`
Sign in form. Public. Redirects to `/compare` on success.
### `GET /sign-up`
Sign up form. Public. Redirects to `/compare` on success.
### `GET /compare`
Comparison creation page. **Protected.** Shows item input form + streaming progress.
### `GET /compare/[slug]`
Comparison results page. Public (if comparison is public). Shows tabbed visualization layout.
**URL format:** `/compare/react-vs-vue-vs-svelte-clx123a`
### `GET /explore`
Public comparisons feed. Public. Grid layout with search + category filter.
### `GET /profile`
User profile page. **Protected.** Shows user info, stats, and saved comparisons.
---
## TypeScript Types
### ComparisonRequest
```typescript
interface ComparisonRequest {
query: string;
items: string[];
dimensions?: string[];
}
```
### ComparisonResult
```typescript
interface ComparisonResult {
items: ItemResearch[];
dimensions: string[];
summary: string;
recommendation: string;
}
```
### ItemResearch
```typescript
interface ItemResearch {
name: string;
description: string;
overallScore: number;
dimensions: Record<string, DimensionResult>;
pros: string[];
cons: string[];
sources: { title: string; url: string; snippet: string }[];
}
```
### DimensionResult
```typescript
interface DimensionResult {
score: number; // 1-10
summary: string;
details: string;
pros: string[];
cons: string[];
}
```
### ResearchProgress (SSE)
```typescript
type ResearchProgress =
| { stage: "parsing"; message: string }
| { stage: "searching"; item: string; results: number }
| { stage: "researching"; item: string; progress: number }
| { stage: "synthesizing"; message: string }
| { stage: "complete"; result: ComparisonResult }
| { stage: "error"; error: string };
```
### ComparisonData (Frontend)
```typescript
interface ComparisonData {
id: string;
userId: string;
title: string;
query: string;
slug: string;
status: "researching" | "completed" | "failed";
summary: string;
items: {
name: string;
description: string;
overallScore: number;
dimensions: Record<string, DimensionResult>;
pros: string[];
cons: string[];
}[];
dimensions: string[];
tags: string[];
isPublic: boolean;
viewCount: number;
createdAt: string;
updatedAt: string;
}
```

129
docs/architecture.md Normal file
View File

@@ -0,0 +1,129 @@
# ComparAIson — Architecture
## System Overview
```
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Browser │────▶│ Traefik │────▶│ Next.js │
│ (React SPA) │◀────│ (Reverse │◀────│ (Port 3000)│
│ │ │ Proxy) │ │ │
└─────────────┘ └──────────────┘ └──────┬──────┘
┌─────────────┼─────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│PostgreSQL│ │ Tavily │ │ OpenAI │
│ (DB) │ │ (Search) │ │ (LLM) │
└──────────┘ └──────────┘ └──────────┘
┌──────────┐
│Perplexity│
│ (LLM) │
└──────────┘
```
## Component Architecture
### Frontend (Next.js App Router)
```
Route Groups:
├── (auth)/ — Unauthenticated pages (sign-in, sign-up)
├── (main)/ — Authenticated pages with shared nav layout
│ ├── compare/ — Comparison creation + results viewing
│ ├── explore/ — Public feed browsing
│ └── profile/ — User profile + comparison history
└── api/ — Server-side API routes
├── auth/ — Better Auth endpoints
└── compare/ — SSE research streaming endpoint
```
**Key patterns:**
- **Server Components** for data-fetching pages (profile, explore)
- **Client Components** for interactive UI (compare input, charts, streaming)
- **Server Actions** for mutations (save comparison, update profile)
- **SSE streaming** for real-time research progress
### Backend Services
#### Research Pipeline (`src/lib/llm/`)
Orchestrates the multi-stage research process:
1. **Input parsing** — Validate items, extract dimensions
2. **Provider detection** — Check available API keys, select best provider chain
3. **Web search** — Tavily API searches per item
4. **LLM synthesis** — Structured JSON generation via Perplexity or OpenAI
5. **Validation** — Runtime type checking of LLM output
6. **Persistence** — Store results in PostgreSQL via Drizzle ORM
#### Auth System (`src/lib/auth.ts`)
- Better Auth with Drizzle adapter
- Email + password authentication
- 7-day session expiry
- Middleware-based route protection
#### Database (`src/lib/db/`)
- Drizzle ORM with PostgreSQL
- 5 tables: users, sessions, comparisons, comparison_items, comparison_dimensions
- JSONB columns for flexible research data storage
- Indexed on userId, slug, status for query performance
## Data Flow
### Comparison Creation Flow
```
1. User enters items + query on /compare
2. Client calls POST /api/compare with { items, query, dimensions }
3. Server creates comparison record (status: "researching")
4. Server opens SSE stream to client
5. Research pipeline runs:
a. Parsing → emits SSE "parsing" event
b. For each item:
- Tavily search → emits SSE "searching" event
- Process results → emits SSE "researching" event with progress %
c. Synthesize all data → emits SSE "synthesizing" event
d. Validate + structure → emits SSE "complete" event with full data
6. Server persists results to comparisons + comparison_items tables
7. Client renders visualization components with result data
8. User redirected to /compare/[slug] with full results
```
### Comparison Viewing Flow
```
1. User navigates to /compare/[slug]
2. Server component fetches comparison from DB by slug
3. If status === "researching": show streaming progress UI
4. If status === "completed": render full results with all viz components
5. If status === "failed": show error with retry option
6. Increment viewCount on each visit
```
## Deployment Architecture
### Docker Compose
```yaml
services:
app: # Next.js standalone (~150-300MB RAM)
db: # PostgreSQL 16 Alpine (~200-400MB RAM)
```
Total estimated RAM: **400-800MB** — fits comfortably on an 8GB Raspberry Pi.
### Traefik Integration
The app is exposed via Traefik reverse proxy with:
- HTTPS termination
- Domain routing (e.g., `comparaison.tophermayor.com`)
- Automatic SSL certificate management
## Error Handling
| Layer | Strategy |
|---|---|
| LLM API failures | 3x retry with exponential backoff |
| Provider unavailable | Automatic fallback to next provider in chain |
| Invalid LLM output | Runtime validation + retry with new prompt |
| Database errors | Transaction rollback, error logged, user sees "failed" status |
| SSE connection lost | Client auto-reconnects, polls comparison status from DB |
| Auth failures | Redirect to sign-in with callback URL |

86
docs/development.md Normal file
View File

@@ -0,0 +1,86 @@
# ComparAIson — Development Guide
## Getting Started
```bash
# Clone
git clone https://gitea.tophermayor.com/TopherMayor/comparaison.git
cd comparaison
# Install
npm install
# Environment
cp .env.example .env.local
# Edit .env.local with your keys
# Database
docker compose up db -d # Start just PostgreSQL
npx drizzle-kit generate # Generate migrations
npx drizzle-kit migrate # Apply migrations
# Dev server
npm run dev
```
## Commands
| Command | Description |
|---|---|
| `npm run dev` | Start dev server (port 3000) |
| `npm run build` | Production build (standalone output) |
| `npm run start` | Start production server |
| `npm run lint` | ESLint check |
| `npx tsc --noEmit` | Type check without building |
| `npx drizzle-kit generate` | Generate DB migrations from schema |
| `npx drizzle-kit migrate` | Apply migrations to database |
| `npx drizzle-kit studio` | Open Drizzle Studio (DB browser) |
## Branch Strategy
| Branch | Purpose |
|---|---|
| `main` | Stable, deployable code |
| `feat/backend` | DB schema, auth, Docker, config changes |
| `feat/llm-engine` | LLM provider changes, research pipeline |
| `feat/frontend` | UI components, pages, layouts |
Worktrees are used for parallel development:
```bash
git worktree add ../comparaison-backend -b feat/backend main
```
## Database Schema Changes
1. Edit `src/lib/db/schema.ts`
2. Run `npx drizzle-kit generate` to create migration SQL
3. Run `npx drizzle-kit migrate` to apply
4. Commit both schema.ts and the generated SQL in `drizzle/`
## Adding a New LLM Provider
1. Create `src/lib/llm/providers/your-provider.ts`
2. Implement the provider function matching the `Provider` interface:
```typescript
export async function synthesize(
request: ComparisonRequest,
searchResults: Record<string, SearchResult[]>
): Promise<ComparisonResult>
```
3. Register in `src/lib/llm/providers/index.ts` — add to the fallback chain
4. Add API key to `.env.example` and document in README
## Adding a New Visualization
1. Create `src/components/comparison/your-chart.tsx`
2. Accept `ComparisonData` as props (or relevant subset)
3. Use Recharts for chart components
4. Import and add to the tab layout in `results-client.tsx`
## Key Conventions
- **Server Components** by default, `"use client"` only when needed (hooks, interactivity)
- **Drizzle ORM** for all database queries — no raw SQL
- **shadcn/ui** for UI components — no external component libraries
- **Tailwind** for styling — no CSS modules or styled-components
- **TypeScript strict mode** — no `any` types

163
docs/specs.md Normal file
View File

@@ -0,0 +1,163 @@
# ComparAIson — Product Specification
## 1. Product Overview
**ComparAIson** is a self-hosted web application that enables users to compare two or more items using AI-powered deep research. The system performs multi-source research, generates structured comparison data, and presents results through interactive visualizations. Completed comparisons are saved as posts on user profiles, creating a browsable library of research.
## 2. Problem Statement
Comparing products, technologies, or services requires gathering data from multiple sources, synthesizing findings, and presenting them clearly. This is time-consuming and often produces inconsistent results. ComparAIson automates this process with LLM-powered research that produces structured, visual, and comparable outputs.
## 3. Target Users
- **Developers** comparing frameworks, tools, cloud services
- **Consumers** comparing products before purchase
- **Researchers** comparing methodologies, papers, or approaches
- **Teams** evaluating options for technical decisions
## 4. Core Features
### 4.1 AI Research Engine
- Multi-item comparison (2-10 items)
- Multi-dimensional scoring (5-8 dimensions per comparison)
- Web search integration via Tavily API
- LLM synthesis via OpenAI GPT-4o-mini or Perplexity Sonar
- Automatic provider fallback chain
- Structured JSON output with validation
- Server-Sent Events for real-time progress
### 4.2 Interactive Visualizations
- **Radar/Spider Chart** — Multi-dimensional overlay showing all items
- **Grouped Bar Chart** — Side-by-side metric comparison
- **Comparison Table** — Feature matrix with color-coded cells
- **Score Cards** — Animated progress bars with overall + per-dimension scores
- **Pros/Cons Cards** — Expandable per-item breakdown
### 4.3 User System
- Email + password authentication (Better Auth)
- Session management (7-day expiry)
- Protected routes for compare/profile actions
- Public profile pages with comparison history
### 4.4 Social/Feed Features
- Public comparisons feed (Explore page)
- Per-comparison view count tracking
- Tag-based categorization and filtering
- Search across public comparisons
- Shareable URLs for each comparison
## 5. Technical Constraints
| Constraint | Value |
|---|---|
| Deployment target | Raspberry Pi ARM64, 8GB RAM |
| Concurrent users | Low (homelab, <20) |
| Total RAM budget | ~500MB-1GB (app + DB + reverse proxy) |
| Cost target | Minimal (free tier APIs where possible) |
| Network | Behind Traefik reverse proxy with HTTPS |
## 6. Data Model
### 6.1 Users (Better Auth managed)
```
users: id, name, email, emailVerified, image, createdAt, updatedAt
sessions: id, userId (FK), token, expiresAt, createdAt, updatedAt
```
### 6.2 Comparisons
```
comparisons: id, userId (FK), title, query, slug, status (researching|completed|failed),
summary, overallData (JSONB), tags[], isPublic, viewCount, createdAt, updatedAt
```
### 6.3 Comparison Items
```
comparison_items: id, comparisonId (FK), name, description, imageUrl,
researchData (JSONB), scores (JSONB), pros[], cons[], order
```
### 6.4 Comparison Dimensions
```
comparison_dimensions: id, comparisonId (FK), name, description, weight, order
```
### 6.5 JSONB Schemas
**overallData (on comparisons):**
```json
{
"title": "React vs Vue vs Svelte",
"query": "for modern web development",
"status": "completed",
"summary": "...",
"items": [
{
"name": "React",
"description": "...",
"overallScore": 8.5,
"dimensions": {
"Performance": { "score": 8, "summary": "...", "details": "...", "pros": [], "cons": [] }
},
"pros": ["..."],
"cons": ["..."]
}
],
"dimensions": ["Performance", "Developer Experience", "Ecosystem", ...]
}
```
**researchData (on comparison_items):**
Full `ItemResearch` object including dimensions, sources, and scores.
## 7. LLM Research Pipeline
### 7.1 Flow
```
User submits query
→ Parse request (validate items ≥ 2)
→ Detect available providers (Tavily? Perplexity? OpenAI?)
→ If Tavily available: search each item individually
→ Synthesize via best available provider:
Priority 1: Tavily search + Perplexity synthesis
Priority 2: Tavily search + OpenAI synthesis
Priority 3: OpenAI only (no web search)
→ Validate structured JSON output
→ Persist to database
→ Stream results to client
```
### 7.2 Provider Details
| Provider | Role | Model | Cost |
|---|---|---|---|
| Tavily | Web search | Search API | ~$0.005/search |
| Perplexity | Synthesis | Sonar | ~$0.002/query |
| OpenAI | Synthesis | GPT-4o-mini | ~$0.15/1M tokens |
### 7.3 Progress Stages (SSE)
1. `parsing` — Validating query and extracting items
2. `searching` — Running web search for each item (Tavily only)
3. `researching` — Processing research per item
4. `synthesizing` — LLM generating structured comparison
5. `complete` — Final result with all data
6. `error` — Failure with error message
## 8. Security Considerations
- Auth middleware protects `/compare` and `/profile` routes
- Session tokens stored in HTTP-only cookies
- API keys never exposed to client (server-only LLM calls)
- Input validation on all API endpoints (min 2 items, max 10)
- SQL injection prevented via Drizzle ORM parameterized queries
- CSRF protection via Better Auth
- Rate limiting placeholder in compare API route
## 9. Future Considerations
- [ ] OAuth providers (Google, GitHub)
- [ ] Comparison comments/likes
- [ ] Export to PDF/image
- [ ] Embeddable comparison widgets
- [ ] Comparison templates
- [ ] Batch comparison queue for heavy loads
- [ ] Local Ollama fallback for offline operation

343
docs/ui-ux-flow.md Normal file
View File

@@ -0,0 +1,343 @@
# ComparAIson — UI/UX Flow
## User Journeys
### Journey 1: New User Discovers → Signs Up → First Comparison
```
Landing Page (/)
▼ "Start Comparing" CTA or /compare URL
Sign In Page (/sign-in)
│ ─── "Don't have an account? Sign up"
Sign Up Page (/sign-up)
│ User enters: name, email, password
│ On success → redirect to /compare
Compare Page (/compare)
│ User enters items (2-10) + query
│ Clicks "Start Research"
Streaming Progress
│ Progress bar + current step label
│ Steps: "Analyzing..." → "Searching React..." → "Synthesizing..."
Results Page (/compare/[slug])
│ Tab layout: Overview | Charts | Table | Details
│ User explores visualizations
│ Comparison auto-saved to profile
Profile Page (/profile)
│ Sees their first comparison in the grid
└── Can click to view again
```
### Journey 2: Returning User Quick Compare
```
Home (/) → already logged in
▼ Click "Compare" in nav
Compare Page (/compare)
│ Enter items + query → "Start Research"
Results Page (/compare/[slug])
│ Review results, share URL
└── Return to profile or start new compare
```
### Journey 3: Anonymous User Browses Public Comparisons
```
Landing Page (/)
▼ "Explore" in nav or example comparison card
Explore Page (/explore)
│ Grid of public comparisons
│ Filter by category tags
│ Search by keyword
▼ Click a comparison card
Results Page (/compare/[slug])
│ View full results (read-only)
│ "Start Your Own Comparison" CTA if not logged in
└── Sign up flow from Journey 1
```
---
## Page Descriptions
### 1. Landing Page (`/`)
**Purpose:** First impression, explain the product, drive sign-ups
**Layout:**
```
┌─────────────────────────────────────────────┐
│ Header: Logo "ComparAIson" | [Sign In] │
├─────────────────────────────────────────────┤
│ │
│ ✨ AI-Powered Research │
│ │
│ Compare Anything with │
│ AI-Powered Deep Research │
│ │
│ [🚀 Start Comparing] [Explore Examples] │
│ │
├─────────────────────────────────────────────┤
│ Example Comparisons (2x2 grid) │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ React vs Vue │ │ GPT-4 vs │ │
│ │ vs Svelte │ │ Claude vs │ │
│ │ ⭐ 8.5 │ │ Gemini ⭐ 8.8│ │
│ └──────────────┘ └──────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Notion vs │ │ AWS vs GCP │ │
│ │ Obsidian │ │ vs Azure │ │
│ └──────────────┘ └──────────────┘ │
├─────────────────────────────────────────────┤
│ Features (3 columns) │
│ 📊 Rich Viz 🔍 Deep Research 🔗 Share │
├─────────────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────────────┘
```
### 2. Sign In Page (`/sign-in`)
**Purpose:** Authenticate existing users
**Layout:**
```
Centered card, max-w-md:
┌─────────────────────────────┐
│ Sign In │
│ Welcome back │
│ │
│ Email [______________] │
│ Password [______________] │
│ │
│ [ Sign In ] │
│ │
│ Don't have an account? │
│ [Sign Up] │
└─────────────────────────────┘
```
- Error state: Red text below form on invalid credentials
- Loading state: Spinner on button, disabled inputs
- Success: Redirect to callbackUrl or /compare
### 3. Sign Up Page (`/sign-up`)
**Purpose:** Register new users
**Layout:** Same as sign in but with Name field added
```
Name [______________]
Email [______________]
Password [______________]
[ Create Account ]
Already have an account? [Sign In]
```
### 4. Compare Page (`/compare`)
**Purpose:** Main comparison creation interface
**Layout:**
```
Centered card, max-w-2xl:
┌─────────────────────────────────────────┐
│ ✨ Start a Comparison │
│ Enter items to compare and let AI │
│ do deep research for you. │
│ │
│ What would you like to compare? │
│ [________________________________] │
│ (textarea for natural language query) │
│ │
│ Items to compare (min 2, max 10) │
│ [React ×] [Vue ×] [Svelte ×] [+ Add] │
│ [________________________] [Add] │
│ │
│ Comparison dimensions (optional) │
│ [________________________________] │
│ (comma-separated hints) │
│ │
│ [🚀 Start Research] │
│ │
│ ┌─ Progress (shown during research) ──┐ │
│ │ [████████████░░░░░░░] 60% │ │
│ │ 🔍 Researching Svelte... │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘
```
**Interactions:**
- Tag-style item input: type + Enter to add, X to remove
- Minimum 2 items required to start
- Progress bar appears after "Start Research" clicked
- Cancel button during research
- Auto-redirect to results on completion
### 5. Results Page (`/compare/[slug]`)
**Purpose:** Display completed comparison with visualizations
**Layout:**
```
┌─────────────────────────────────────────────────┐
│ ← Back React vs Vue vs Svelte [Share] │
│ Overall: React ⭐ 8.5 | Vue ⭐ 7.8 | Svelte ⭐ 8.2│
├─────────────────────────────────────────────────┤
│ [Overview] [Charts] [Table] [Details] │
├─────────────────────────────────────────────────┤
│ │
│ ┌── Overview Tab ─────────────────────────────┐ │
│ │ │ │
│ │ Summary text from AI │ │
│ │ "React excels in ecosystem size..." │ │
│ │ │ │
│ │ ┌─ Score Cards ────────────────────────┐ │ │
│ │ │ React: ⭐ 8.5 │ │ │
│ │ │ [█████████░] Performance: 8/10 │ │ │
│ │ │ [████████░░] DX: 9/10 │ │ │
│ │ │ ... │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ │ │ │
│ │ 🏆 Recommendation: "For most projects..." │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌── Charts Tab ──────────────────────────────┐ │
│ │ │ │
│ │ Radar Chart Bar Chart │ │
│ │ ┌─────────────┐ ┌──────────────┐ │ │
│ │ │ React ╲ │ │ ▓ ▓ ▓ │ │ │
│ │ │ │ Vue │ │ │ ▓ ▓ ▓ │ │ │
│ │ │ ╲Svelte │ │ ▓ ▓ ▓ │ │ │
│ │ └─────────────┘ └──────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌── Table Tab ───────────────────────────────┐ │
│ │ │ React │ Vue │ Svelte │ │ │
│ │ Performance│ 8 │ 7 │ 9 │ │ │
│ │ DX │ 9 │ 8 │ 8 │ │ │
│ │ Ecosystem │ 10 │ 7 │ 6 │ │ │
│ │ Price │ 9 │ 9 │ 10 │ │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌── Details Tab ─────────────────────────────┐ │
│ │ Per-item expandable deep dives │ │
│ │ ▶ React - Performance (8/10) │ │
│ │ Pros: Virtual DOM, concurrent mode... │ │
│ │ Cons: Bundle size can grow... │ │
│ │ ▶ Vue - Performance (7/10) │ │
│ │ ... │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
```
**Interactions:**
- Tab switching between Overview/Charts/Table/Details
- Hover tooltips on all charts
- Click legend items to toggle visibility on radar/bar charts
- Expandable rows in table for detailed breakdowns
- Share button copies URL to clipboard
- Trophy icon highlights the winner
### 6. Profile Page (`/profile`)
**Purpose:** User's personal comparison library
**Layout:**
```
┌─────────────────────────────────────────────┐
│ [Avatar] Alex Johnson │
│ alex@example.com │
│ │
│ ┌─ Stats ─────────┐ ┌─ Stats ──────────┐ │
│ │ 12 │ │ 8.2K │ │
│ │ Total Comparisons│ │ Total Views │ │
│ └──────────────────┘ └───────────────────┘ │
│ │
│ My Comparisons │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ React vs Vue │ │ GPT-4 vs │ │
│ │ vs Svelte │ │ Claude │ │
│ │ ⭐ 8.5 | 👁 1.2K│ │ ⭐ 8.8 | 👁 3.9K│ │
│ │ Jan 15, 2024 │ │ Jan 10, 2024 │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ [+ New Comparison] │
└─────────────────────────────────────────────┘
```
### 7. Explore Page (`/explore`)
**Purpose:** Browse public comparisons from all users
**Layout:**
```
┌─────────────────────────────────────────────────┐
│ Explore Comparisons │
│ [🔍 Search comparisons...] │
│ │
│ [All] [Tech] [Products] [AI] [Cloud] [Prod.] │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │React vs │ │GPT-4 vs │ │iPhone vs│ │
│ │Vue vs │ │Claude vs │ │Samsung │ │
│ │Svelte │ │Gemini │ │S24 Ultra│ │
│ │⭐8.5 👁1.2K│ │⭐8.8 👁3.9K│ │⭐8.2 👁3.4K│ │
│ │by Alex │ │by Sarah │ │by James │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │AWS vs │ │Python vs│ │Notion vs│ │
│ │GCP vs │ │Rust vs │ │Obsidian │ │
│ │Azure │ │Go │ │vs Roam │ │
│ │⭐9.0 👁2.2K│ │⭐8.4 👁1.9K│ │⭐7.5 👁892 │ │
│ │by Emma │ │by Anna │ │by Mike │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ [Load More] │
└─────────────────────────────────────────────────┘
```
---
## Responsive Design
### Desktop (≥768px)
- Sidebar navigation on the left
- Full-width comparison tables
- Side-by-side charts on Charts tab
- 3-column grid on Explore page
### Mobile (<768px)
- Bottom navigation bar (fixed)
- Stacked charts (full width each)
- Single column cards on Explore
- Collapsible navigation menu
---
## Loading & Error States
### Research Progress
```
┌─ Research in Progress ──────────────┐
│ [████████████░░░░░░░░░] 60% │
│ 🔍 Researching Svelte... │
│ │
│ Items: React ✓ Vue ✓ Svelte ⟳ │
│ │
│ [Cancel] │
└──────────────────────────────────────┘
```
### Skeleton Loaders
- Used on results page while data loads
- Shimmer effect on card placeholders
- Chart skeleton rectangles
### Error States
- **API error:** Red banner with error message + "Try Again" button
- **Auth required:** Redirect to sign-in with callback
- **Not found:** 404 page with "Browse comparisons" link
- **Network error:** Toast notification + retry prompt

View File

@@ -0,0 +1,59 @@
CREATE TYPE "public"."comparison_status" AS ENUM('researching', 'completed', 'failed');--> statement-breakpoint
CREATE TABLE "comparison_dimensions" (
"id" text PRIMARY KEY NOT NULL,
"comparison_id" text NOT NULL,
"name" text NOT NULL,
"description" text,
"weight" integer DEFAULT 1 NOT NULL,
"order" integer DEFAULT 0 NOT NULL
);
--> statement-breakpoint
CREATE TABLE "comparison_items" (
"id" text PRIMARY KEY NOT NULL,
"comparison_id" text NOT NULL,
"name" text NOT NULL,
"description" text,
"image_url" text,
"research_data" jsonb,
"scores" jsonb,
"pros" text[],
"cons" text[],
"order" integer DEFAULT 0 NOT NULL
);
--> statement-breakpoint
CREATE TABLE "comparisons" (
"id" text PRIMARY KEY NOT NULL,
"user_id" text NOT NULL,
"title" text NOT NULL,
"query" text NOT NULL,
"slug" text NOT NULL,
"status" "comparison_status" DEFAULT 'researching' NOT NULL,
"summary" text,
"overall_data" jsonb,
"tags" text[],
"is_public" boolean DEFAULT true NOT NULL,
"view_count" integer DEFAULT 0 NOT NULL,
"created_at" timestamp with time zone DEFAULT now() NOT NULL,
"updated_at" timestamp with time zone DEFAULT now() NOT NULL,
CONSTRAINT "comparisons_slug_unique" UNIQUE("slug")
);
--> statement-breakpoint
CREATE TABLE "users" (
"id" text PRIMARY KEY NOT NULL,
"name" text,
"email" text NOT NULL,
"email_verified" timestamp with time zone,
"image" text,
"created_at" timestamp with time zone DEFAULT now() NOT NULL,
"updated_at" timestamp with time zone DEFAULT now() NOT NULL,
CONSTRAINT "users_email_unique" UNIQUE("email")
);
--> statement-breakpoint
ALTER TABLE "comparison_dimensions" ADD CONSTRAINT "comparison_dimensions_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
ALTER TABLE "comparison_items" ADD CONSTRAINT "comparison_items_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
ALTER TABLE "comparisons" ADD CONSTRAINT "comparisons_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;--> statement-breakpoint
CREATE INDEX "comparison_dimensions_comparison_id_idx" ON "comparison_dimensions" USING btree ("comparison_id");--> statement-breakpoint
CREATE INDEX "comparison_items_comparison_id_idx" ON "comparison_items" USING btree ("comparison_id");--> statement-breakpoint
CREATE INDEX "comparisons_user_id_idx" ON "comparisons" USING btree ("user_id");--> statement-breakpoint
CREATE INDEX "comparisons_slug_idx" ON "comparisons" USING btree ("slug");--> statement-breakpoint
CREATE INDEX "comparisons_status_idx" ON "comparisons" USING btree ("status");

View File

@@ -1,42 +0,0 @@
CREATE TABLE "comparison_dimensions" (
"id" text PRIMARY KEY NOT NULL,
"comparison_id" text NOT NULL,
"name" text NOT NULL,
"description" text,
"weight" integer DEFAULT 1,
"order" integer NOT NULL
);
--> statement-breakpoint
CREATE TABLE "comparison_items" (
"id" text PRIMARY KEY NOT NULL,
"comparison_id" text NOT NULL,
"name" text NOT NULL,
"description" text,
"image_url" text,
"research_data" jsonb,
"scores" jsonb,
"pros" text[],
"cons" text[],
"order" integer NOT NULL
);
--> statement-breakpoint
CREATE TABLE "comparisons" (
"id" text PRIMARY KEY NOT NULL,
"user_id" text,
"title" text NOT NULL,
"query" text,
"slug" varchar(255) NOT NULL,
"status" text DEFAULT 'researching' NOT NULL,
"summary" text,
"overall_data" jsonb,
"tags" text[],
"is_public" boolean DEFAULT false,
"view_count" integer DEFAULT 0,
"created_at" timestamp DEFAULT now() NOT NULL,
"updated_at" timestamp DEFAULT now() NOT NULL,
CONSTRAINT "comparisons_slug_unique" UNIQUE("slug")
);
--> statement-breakpoint
ALTER TABLE "comparison_dimensions" ADD CONSTRAINT "comparison_dimensions_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
ALTER TABLE "comparison_items" ADD CONSTRAINT "comparison_items_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
CREATE INDEX "comparisons_user_id_idx" ON "comparisons" USING btree ("user_id");

View File

@@ -1,5 +1,5 @@
{
"id": "6cc67b11-8016-409b-9de9-8966593c97b0",
"id": "c719fbf4-6ed1-4b38-9a09-33a7e0799267",
"prevId": "00000000-0000-0000-0000-000000000000",
"version": "7",
"dialect": "postgresql",
@@ -36,17 +36,34 @@
"name": "weight",
"type": "integer",
"primaryKey": false,
"notNull": false,
"notNull": true,
"default": 1
},
"order": {
"name": "order",
"type": "integer",
"primaryKey": false,
"notNull": true
"notNull": true,
"default": 0
}
},
"indexes": {
"comparison_dimensions_comparison_id_idx": {
"name": "comparison_dimensions_comparison_id_idx",
"columns": [
{
"expression": "comparison_id",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"indexes": {},
"foreignKeys": {
"comparison_dimensions_comparison_id_comparisons_id_fk": {
"name": "comparison_dimensions_comparison_id_comparisons_id_fk",
@@ -130,10 +147,27 @@
"name": "order",
"type": "integer",
"primaryKey": false,
"notNull": true
"notNull": true,
"default": 0
}
},
"indexes": {
"comparison_items_comparison_id_idx": {
"name": "comparison_items_comparison_id_idx",
"columns": [
{
"expression": "comparison_id",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"indexes": {},
"foreignKeys": {
"comparison_items_comparison_id_comparisons_id_fk": {
"name": "comparison_items_comparison_id_comparisons_id_fk",
@@ -169,7 +203,7 @@
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": false
"notNull": true
},
"title": {
"name": "title",
@@ -181,17 +215,18 @@
"name": "query",
"type": "text",
"primaryKey": false,
"notNull": false
"notNull": true
},
"slug": {
"name": "slug",
"type": "varchar(255)",
"type": "text",
"primaryKey": false,
"notNull": true
},
"status": {
"name": "status",
"type": "text",
"type": "comparison_status",
"typeSchema": "public",
"primaryKey": false,
"notNull": true,
"default": "'researching'"
@@ -218,26 +253,26 @@
"name": "is_public",
"type": "boolean",
"primaryKey": false,
"notNull": false,
"default": false
"notNull": true,
"default": true
},
"view_count": {
"name": "view_count",
"type": "integer",
"primaryKey": false,
"notNull": false,
"notNull": true,
"default": 0
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": true,
"default": "now()"
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": true,
"default": "now()"
@@ -258,9 +293,53 @@
"concurrently": false,
"method": "btree",
"with": {}
},
"comparisons_slug_idx": {
"name": "comparisons_slug_idx",
"columns": [
{
"expression": "slug",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
},
"comparisons_status_idx": {
"name": "comparisons_status_idx",
"columns": [
{
"expression": "status",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {
"comparisons_user_id_users_id_fk": {
"name": "comparisons_user_id_users_id_fk",
"tableFrom": "comparisons",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"comparisons_slug_unique": {
@@ -274,9 +353,84 @@
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.users": {
"name": "users",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": false
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true
},
"email_verified": {
"name": "email_verified",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false
},
"image": {
"name": "image",
"type": "text",
"primaryKey": false,
"notNull": false
},
"created_at": {
"name": "created_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": true,
"default": "now()"
},
"updated_at": {
"name": "updated_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"users_email_unique": {
"name": "users_email_unique",
"nullsNotDistinct": false,
"columns": [
"email"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
}
},
"enums": {
"public.comparison_status": {
"name": "comparison_status",
"schema": "public",
"values": [
"researching",
"completed",
"failed"
]
}
},
"enums": {},
"schemas": {},
"sequences": {},
"roles": {},

View File

@@ -5,8 +5,8 @@
{
"idx": 0,
"version": "7",
"when": 1777066133958,
"tag": "0000_opposite_doomsday",
"when": 1777066297133,
"tag": "0000_gorgeous_puma",
"breakpoints": true
}
]

View File

@@ -1,7 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
output: "standalone",
};
export default nextConfig;

View File

@@ -18,6 +18,10 @@ function slugify(text: string): string {
.slice(0, 200);
}
// TODO: Implement rate limiting per IP/user
// Example: Use Upstash Ratelimit or a simple in-memory counter
// const ratelimit = new Ratelimit({ redis, limiter: slidingWindow(5, "1m") })
export async function POST(request: Request) {
const body: { query?: string; items?: string[]; dimensions?: string[] } =
await request.json();
@@ -25,7 +29,21 @@ export async function POST(request: Request) {
if (!items || items.length < 2) {
return Response.json(
{ error: "At least 2 items are required" },
{ error: "At least 2 items are required for comparison" },
{ status: 400 }
);
}
if (items.length > 10) {
return Response.json(
{ error: "Maximum 10 items allowed per comparison" },
{ status: 400 }
);
}
if (items.some((item) => item.trim().length === 0)) {
return Response.json(
{ error: "Item names cannot be empty" },
{ status: 400 }
);
}
@@ -70,6 +88,20 @@ export async function POST(request: Request) {
);
}
if (progress.stage === "searching") {
controller.enqueue(
encoder.encode(
serializeSSE("progress", {
status: "researching",
message: `Searching the web for ${progress.item}... (${progress.results} results found)`,
itemsCompleted,
totalItems: items.length,
currentStep: `Searching ${progress.item}`,
})
)
);
}
if (progress.stage === "researching") {
itemsCompleted++;
controller.enqueue(
@@ -102,7 +134,17 @@ export async function POST(request: Request) {
if (progress.stage === "complete") {
const result = progress.result;
const comparisonData: Omit<ComparisonData, "id" | "userId" | "slug" | "tags" | "isPublic" | "viewCount" | "createdAt" | "updatedAt"> = {
const comparisonData: Omit<
ComparisonData,
| "id"
| "userId"
| "slug"
| "tags"
| "isPublic"
| "viewCount"
| "createdAt"
| "updatedAt"
> = {
title,
query: query || "",
status: "completed",
@@ -177,7 +219,7 @@ export async function POST(request: Request) {
encoder.encode(
serializeSSE("progress", {
status: "failed",
message: progress.error,
message: `Comparison failed: ${progress.error}`,
itemsCompleted,
totalItems: items.length,
currentStep: "Failed",
@@ -192,11 +234,16 @@ export async function POST(request: Request) {
.set({ status: "failed", updatedAt: new Date() })
.where(eq(comparisons.id, id));
const message =
error instanceof Error
? error.message
: "An unexpected error occurred during research";
controller.enqueue(
encoder.encode(
serializeSSE("progress", {
status: "failed",
message: error instanceof Error ? error.message : "Unknown error",
message: `Comparison failed: ${message}`,
itemsCompleted,
totalItems: items.length,
currentStep: "Failed",

View File

@@ -1,8 +1,10 @@
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "./db";
import * as schema from "./db/schema";
export const auth = betterAuth({
database: drizzleAdapter(db, { provider: "pg" }),
database: drizzleAdapter(db, { provider: "pg", schema }),
emailAndPassword: { enabled: true },
session: { expiresIn: 60 * 60 * 24 * 7 },
});

View File

@@ -1,40 +1,86 @@
import {
boolean,
index,
integer,
jsonb,
pgEnum,
pgTable,
text,
timestamp,
jsonb,
integer,
boolean,
varchar,
index,
} from "drizzle-orm/pg-core";
import { createId } from "@paralleldrive/cuid2";
export const users = pgTable("users", {
id: text("id").primaryKey(),
name: text("name"),
email: text("email").notNull().unique(),
emailVerified: timestamp("email_verified", { withTimezone: true }),
image: text("image"),
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
});
export const comparisonStatusEnum = pgEnum("comparison_status", [
"researching",
"completed",
"failed",
]);
export const users = pgTable("users", {
id: text("id").primaryKey(),
name: text("name"),
email: text("email").notNull().unique(),
emailVerified: boolean("email_verified").default(false),
image: text("image"),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
});
export const sessions = pgTable("sessions", {
id: text("id").primaryKey(),
userId: text("user_id")
.notNull()
.references(() => users.id, { onDelete: "cascade" }),
token: text("token").notNull().unique(),
expiresAt: timestamp("expires_at").notNull(),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
});
export const comparisons = pgTable(
"comparisons",
{
id: text("id").primaryKey(),
userId: text("user_id"),
title: text("title").notNull(),
query: text("query"),
slug: varchar("slug", { length: 255 }).notNull().unique(),
status: text("status", {
enum: ["researching", "completed", "failed"],
})
id: text("id")
.primaryKey()
.$defaultFn(() => createId()),
userId: text("user_id")
.notNull()
.default("researching"),
.references(() => users.id),
title: text("title").notNull(),
query: text("query").notNull(),
slug: text("slug").notNull().unique(),
status: comparisonStatusEnum("status").notNull().default("researching"),
summary: text("summary"),
overallData: jsonb("overall_data"),
tags: text("tags").array(),
isPublic: boolean("is_public").default(false),
viewCount: integer("view_count").default(0),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
isPublic: boolean("is_public").notNull().default(true),
viewCount: integer("view_count").notNull().default(0),
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
},
(table) => [index("comparisons_user_id_idx").on(table.userId)]
(table) => [
index("comparisons_user_id_idx").on(table.userId),
index("comparisons_slug_idx").on(table.slug),
index("comparisons_status_idx").on(table.status),
],
);
export const comparisonItems = pgTable("comparison_items", {
id: text("id").primaryKey(),
export const comparisonItems = pgTable(
"comparison_items",
{
id: text("id")
.primaryKey()
.$defaultFn(() => createId()),
comparisonId: text("comparison_id")
.notNull()
.references(() => comparisons.id, { onDelete: "cascade" }),
@@ -45,22 +91,24 @@ export const comparisonItems = pgTable("comparison_items", {
scores: jsonb("scores"),
pros: text("pros").array(),
cons: text("cons").array(),
order: integer("order").notNull(),
});
order: integer("order").notNull().default(0),
},
(table) => [index("comparison_items_comparison_id_idx").on(table.comparisonId)],
);
export const comparisonDimensions = pgTable("comparison_dimensions", {
id: text("id").primaryKey(),
export const comparisonDimensions = pgTable(
"comparison_dimensions",
{
id: text("id")
.primaryKey()
.$defaultFn(() => createId()),
comparisonId: text("comparison_id")
.notNull()
.references(() => comparisons.id, { onDelete: "cascade" }),
name: text("name").notNull(),
description: text("description"),
weight: integer("weight").default(1),
order: integer("order").notNull(),
});
export type Comparison = typeof comparisons.$inferSelect;
export type NewComparison = typeof comparisons.$inferInsert;
export type ComparisonItem = typeof comparisonItems.$inferSelect;
export type NewComparisonItem = typeof comparisonItems.$inferInsert;
export type ComparisonDimension = typeof comparisonDimensions.$inferSelect;
weight: integer("weight").notNull().default(1),
order: integer("order").notNull().default(0),
},
(table) => [index("comparison_dimensions_comparison_id_idx").on(table.comparisonId)],
);

View File

@@ -3,7 +3,9 @@ import type {
ComparisonResult,
ResearchProgress,
} from "./types";
import { generateComparison } from "./providers/openai";
import { searchItem, type SearchResult } from "./providers/tavily";
import { generateComparisonWithResearch } from "./providers/openai";
import { getActiveProvider } from "./providers";
export type {
ComparisonRequest,
@@ -24,6 +26,28 @@ export async function* runResearch(
return;
}
const provider = getActiveProvider();
const searchResults: Record<string, SearchResult[]> = {};
if (provider.hasSearch) {
for (let i = 0; i < request.items.length; i++) {
const item = request.items[i];
const results = await searchItem(item, request.query);
searchResults[item] = results;
yield {
stage: "searching",
item,
results: results.length,
};
yield {
stage: "researching",
item,
progress: Math.round(((i + 1) / request.items.length) * 50),
};
}
} else {
for (let i = 0; i < request.items.length; i++) {
yield {
stage: "researching",
@@ -31,14 +55,15 @@ export async function* runResearch(
progress: Math.round(((i + 0.5) / request.items.length) * 80),
};
}
}
yield {
stage: "synthesizing",
message: "Synthesizing research into structured comparison...",
message: `Synthesizing research into structured comparison using ${provider.name}...`,
};
try {
const result = await generateComparison(request);
const result = await provider.synthesize(request, searchResults);
yield { stage: "complete", result };
} catch (error) {
yield {

View File

@@ -0,0 +1,63 @@
import type { ComparisonRequest, ComparisonResult } from "../types";
import type { SearchResult } from "./tavily";
import { generateComparisonWithResearch, generateComparison } from "./openai";
import { synthesizeResearch } from "./perplexity";
export interface Provider {
name: string;
hasSearch: boolean;
synthesize: (
request: ComparisonRequest,
searchResults: Record<string, SearchResult[]>
) => Promise<ComparisonResult>;
}
export function getActiveProvider(): Provider {
const hasTavily = !!process.env.TAVILY_API_KEY;
const hasPerplexity = !!process.env.PERPLEXITY_API_KEY;
const hasOpenAI = !!process.env.OPENAI_API_KEY;
if (hasTavily && hasPerplexity) {
console.log("[llm] Using provider: Tavily search + Perplexity synthesis");
return {
name: "Tavily + Perplexity",
hasSearch: true,
synthesize: synthesizeResearch,
};
}
if (hasTavily && hasOpenAI) {
console.log("[llm] Using provider: Tavily search + OpenAI synthesis");
return {
name: "Tavily + OpenAI",
hasSearch: true,
synthesize: generateComparisonWithResearch,
};
}
if (hasOpenAI) {
console.log("[llm] Using provider: OpenAI only (no web search)");
return {
name: "OpenAI",
hasSearch: false,
synthesize: async (request) => generateComparison(request),
};
}
console.warn(
"[llm] No API keys configured. Research will fail at synthesis."
);
return {
name: "None",
hasSearch: false,
synthesize: async () => {
throw new Error(
"No LLM provider configured. Set OPENAI_API_KEY, TAVILY_API_KEY, or PERPLEXITY_API_KEY."
);
},
};
}
export { searchItem, type SearchResult } from "./tavily";
export { generateComparison, generateComparisonWithResearch } from "./openai";
export { synthesizeResearch } from "./perplexity";

View File

@@ -5,10 +5,16 @@ import type {
DimensionResult,
ItemResearch,
} from "../types";
import type { SearchResult } from "./tavily";
const client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
let _client: OpenAI | null = null;
function getClient(): OpenAI {
if (!_client) {
_client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
}
return _client;
}
const SYSTEM_PROMPT = `You are an expert research analyst. Your job is to compare items across multiple dimensions and produce structured, insightful comparison data.
@@ -105,7 +111,7 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
try {
const response = await client.chat.completions.create({
const response = await getClient().chat.completions.create({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: SYSTEM_PROMPT },
@@ -140,3 +146,75 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
`Failed to generate comparison after ${MAX_RETRIES} attempts: ${lastError?.message}`
);
}
export async function generateComparisonWithResearch(
request: ComparisonRequest,
searchResults: Record<string, SearchResult[]>
): Promise<ComparisonResult> {
const allResults = Object.values(searchResults).flat();
if (allResults.length === 0) {
return generateComparison(request);
}
let researchContext = "Web research data:\n\n";
for (const [itemName, results] of Object.entries(searchResults)) {
if (results.length === 0) continue;
researchContext += `=== ${itemName} ===\n`;
for (const r of results) {
researchContext += `- ${r.title}: ${r.content}\n Source: ${r.url}\n`;
}
researchContext += "\n";
}
const userPrompt = `Compare the following items: ${request.items.join(", ")}
${request.query ? `Focus: ${request.query}` : ""}
${request.dimensions?.length ? `Specific dimensions to include: ${request.dimensions.join(", ")}` : ""}
${researchContext}
Use the web research data above to provide factual, data-driven insights. Reference specific data points in your analysis. Provide a comprehensive comparison with scores, pros/cons, and a recommendation.`;
let lastError: Error | null = null;
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
try {
const response = await client.chat.completions.create({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: SYSTEM_PROMPT },
{
role: "system",
content:
"You have access to real web search results. Use them to ground your comparison in factual data. Cite specific findings from the research when scoring and analyzing items.",
},
{ role: "user", content: userPrompt },
],
response_format: { type: "json_object" },
temperature: 0.3,
});
const content = response.choices[0]?.message?.content;
if (!content) {
throw new Error("Empty response from OpenAI");
}
const parsed: unknown = JSON.parse(content);
if (!validateComparisonResult(parsed)) {
throw new Error("Invalid comparison result structure from OpenAI");
}
return parsed;
} catch (error) {
lastError = error instanceof Error ? error : new Error(String(error));
if (attempt < MAX_RETRIES) {
await sleep(RETRY_DELAY_MS * attempt);
}
}
}
throw new Error(
`Failed to generate comparison with research after ${MAX_RETRIES} attempts: ${lastError?.message}`
);
}

View File

@@ -0,0 +1,117 @@
import type { ComparisonRequest, ComparisonResult } from "../types";
import type { SearchResult } from "./tavily";
import { generateComparisonWithResearch } from "./openai";
const PERPLEXITY_API_URL = "https://api.perplexity.ai/chat/completions";
const SYSTEM_PROMPT = `You are a research synthesis engine. Given web search results for multiple items, produce a structured JSON comparison.
You MUST respond with valid JSON matching this exact structure:
{
"items": [
{
"name": "item name",
"description": "brief overview",
"overallScore": 7.5,
"dimensions": {
"Dimension Name": {
"score": 8,
"summary": "brief assessment",
"details": "detailed analysis",
"pros": ["pro 1"],
"cons": ["con 1"]
}
},
"pros": ["overall pro 1"],
"cons": ["overall con 1"],
"sources": [{ "title": "source", "url": "https://...", "snippet": "excerpt" }]
}
],
"dimensions": ["Dimension 1", "Dimension 2"],
"summary": "comparison summary",
"recommendation": "clear recommendation"
}`;
export async function synthesizeResearch(
request: ComparisonRequest,
searchResults: Record<string, SearchResult[]>
): Promise<ComparisonResult> {
const apiKey = process.env.PERPLEXITY_API_KEY;
if (!apiKey) {
return generateComparisonWithResearch(request, searchResults);
}
const allResults = Object.values(searchResults).flat();
if (allResults.length === 0) {
return generateComparisonWithResearch(request, searchResults);
}
let researchContext = "Search results for each item:\n\n";
for (const [itemName, results] of Object.entries(searchResults)) {
if (results.length === 0) continue;
researchContext += `=== ${itemName} ===\n`;
for (const r of results) {
researchContext += `- ${r.title}: ${r.content}\n Source: ${r.url}\n`;
}
researchContext += "\n";
}
const userPrompt = `Compare: ${request.items.join(", ")}
${request.query ? `Focus: ${request.query}` : ""}
${request.dimensions?.length ? `Dimensions: ${request.dimensions.join(", ")}` : ""}
${researchContext}`;
try {
const response = await fetch(PERPLEXITY_API_URL, {
method: "POST",
headers: {
Authorization: `Bearer ${apiKey}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "sonar",
messages: [
{ role: "system", content: SYSTEM_PROMPT },
{ role: "user", content: userPrompt },
],
temperature: 0.3,
}),
});
if (!response.ok) {
console.error(
`Perplexity API error: ${response.status} ${response.statusText}`
);
return generateComparisonWithResearch(request, searchResults);
}
const data = await response.json();
const content = data.choices?.[0]?.message?.content;
if (!content) {
console.error("Empty response from Perplexity");
return generateComparisonWithResearch(request, searchResults);
}
const parsed: unknown = JSON.parse(content);
if (
!parsed ||
typeof parsed !== "object" ||
!Array.isArray((parsed as Record<string, unknown>).items) ||
!Array.isArray((parsed as Record<string, unknown>).dimensions)
) {
console.error("Invalid structure from Perplexity, falling back to OpenAI");
return generateComparisonWithResearch(request, searchResults);
}
return parsed as ComparisonResult;
} catch (error) {
console.error(
"Perplexity synthesis failed, falling back to OpenAI:",
error instanceof Error ? error.message : error
);
return generateComparisonWithResearch(request, searchResults);
}
}

View File

@@ -0,0 +1,69 @@
export interface SearchResult {
title: string;
url: string;
content: string;
score: number;
}
const TAVILY_API_URL = "https://api.tavily.com/search";
export async function searchItem(
itemName: string,
context: string
): Promise<SearchResult[]> {
const apiKey = process.env.TAVILY_API_KEY;
if (!apiKey) {
return [];
}
try {
const query = `${itemName} ${context}`.trim();
const response = await fetch(TAVILY_API_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
api_key: apiKey,
query,
max_results: 5,
include_answer: false,
search_depth: "advanced",
}),
});
if (!response.ok) {
console.error(
`Tavily API error: ${response.status} ${response.statusText}`
);
return [];
}
const data = await response.json();
if (!data.results || !Array.isArray(data.results)) {
return [];
}
return data.results.map(
(result: {
title?: string;
url?: string;
content?: string;
score?: number;
}) => ({
title: result.title ?? "",
url: result.url ?? "",
content: result.content ?? "",
score: result.score ?? 0,
})
);
} catch (error) {
console.error(
`Tavily search failed for "${itemName}":`,
error instanceof Error ? error.message : error
);
return [];
}
}

View File

@@ -31,6 +31,7 @@ export interface ComparisonResult {
export type ResearchProgress =
| { stage: "parsing"; message: string }
| { stage: "searching"; item: string; results: number }
| { stage: "researching"; item: string; progress: number }
| { stage: "synthesizing"; message: string }
| { stage: "complete"; result: ComparisonResult }

View File

@@ -1,20 +1,29 @@
import { NextRequest, NextResponse } from "next/server";
import { auth } from "@/lib/auth";
const publicPaths = ["/sign-in", "/sign-up", "/api/auth"];
const publicPaths = ["/", "/explore", "/sign-in", "/sign-up", "/api/auth"];
const protectedPaths = ["/compare", "/profile"];
export async function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
if (
pathname.startsWith("/_next") ||
pathname.startsWith("/favicon") ||
pathname.includes(".")
) {
return NextResponse.next();
}
const isPublic = publicPaths.some(
(path) => pathname === path || pathname.startsWith(path + "/"),
);
if (isPublic) {
return NextResponse.next();
}
const isProtected = protectedPaths.some(
(path) => pathname === path || pathname.startsWith(path + "/"),
);
if (pathname.startsWith("/_next") || pathname.startsWith("/favicon")) {
if (isPublic && !isProtected) {
return NextResponse.next();
}
@@ -22,7 +31,7 @@ export async function middleware(request: NextRequest) {
headers: request.headers,
});
if (!session) {
if (!session && isProtected) {
const signInUrl = new URL("/sign-in", request.url);
signInUrl.searchParams.set("callbackUrl", pathname);
return NextResponse.redirect(signInUrl);