Skip to main content
Back to Projects

Pixel Fits

A Project which explores fashion with AI hand in Hand.

HTML
View on GitHub

PixelFit — V1 Demand-Capture Commerce Platform

AI-powered fashion personalization with hyperlocal order fulfillment for India.

Architecture

Frontend:  Next.js 15 (App Router, TypeScript, Tailwind CSS 4)
Backend:   FastAPI (Python, asyncpg)
Database:  PostgreSQL

Setup

Prerequisites

  • Node.js 18+
  • Python 3.10+
  • PostgreSQL 14+ (running locally or remote)

1. Database

Create a PostgreSQL database:

CREATE DATABASE pixelfit;

2. Backend

cd backend
python -m venv ../.venv
../.venv/Scripts/activate  # Windows
# source ../.venv/bin/activate  # macOS/Linux
pip install -r requirements.txt

Set environment variables (create .env in project root or export):

DATABASE_URL=postgresql://postgres:postgres@localhost:5432/pixelfit
ADMIN_SECRET=pixelfit-admin-2024

Start backend:

cd ..  # back to project root
python run.py

Backend runs at http://localhost:8001. Tables are auto-created on startup.

3. Seed Products

npx tsx prisma/seed.ts

Note: This uses Prisma to seed. Ensure DATABASE_URL is set in .env.local.

4. Frontend

npm install
npm run dev

Frontend runs at http://localhost:3000.

5. Environment Variables

Create .env.local in project root:

DATABASE_URL=postgresql://postgres:postgres@localhost:5432/pixelfit
NEXT_PUBLIC_API_URL=http://localhost:8001

User Flow

  1. Landing Page (/) — Hero + CTA to style analysis
  2. Style Analysis (/style) — Questionnaire + optional image upload
  3. Product Feed (/feed) — AI-personalized product recommendations
  4. Product Detail (/product/[id]) — Full product view + "Request This Item"
  5. Order Request (/request) — Name, phone, address, city, budget
  6. Success — Confirmation shown, order saved to DB

Admin Dashboard

Navigate to /admin and enter the admin secret key (default: pixelfit-admin-2024).

Features:

  • View all incoming orders
  • Update order status: pending → contacted → fulfilled → cancelled
  • Auto-refreshes every 30 seconds
  • Status breakdown stats

API Endpoints

MethodEndpointDescription
POST/analyze-styleSave style profile
POST/analyze-style/imageAnalyze uploaded image
GET/productsList products (optional profile_id filter)
GET/products/{id}Get product by ID
POST/order-requestSubmit order request
GET/admin/ordersList all orders (auth required)
PATCH/admin/orders/{id}Update order status (auth required)
GET/healthHealth check

Testing

Backend

pip install pytest pytest-asyncio httpx
pytest backend/test_orders.py -v

Frontend

npm run build

Deployment

  • Frontend: Deploy to Vercel (auto-detects Next.js)
  • Backend: Deploy to Railway, Render, or any Python host
  • Database: Use Supabase, Neon, or Railway PostgreSQL

Set NEXT_PUBLIC_API_URL in Vercel env vars to point to deployed backend.