ClearPix - AI Image Enhancement Platform

A mobile-first AI image enhancement web application with 200+ AI-powered transformations including color correction, background replacement, scene changes, art style conversions, and facial enhancements.

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS + shadcn/ui
• Backend: Supabase (PostgreSQL + Auth + Storage)
• AI Processing: Google Gemini via Lovable AI Gateway
• State Management: TanStack Query
• Routing: React Router DOM

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Supabase account
• Lovable AI Gateway API key (for AI processing)
• Resend API key (for emails)

Getting Started

1. Install Dependencies

npm install

2. Set Up Supabase

1. Create a new Supabase project at supabase.com
2. Run the database migrations in supabase/migrations/ (see Database Setup below)
3. Configure Storage buckets (see Storage Setup below)
4. Set up Edge Functions (see Edge Functions Setup below)

3. Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Fill in your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
VITE_SUPABASE_PROJECT_ID=your_supabase_project_id

4. Run Development Server

npm run dev

The app will be available at http://localhost:5173

Database Setup

Create Tables and Functions

You need to set up the following in your Supabase project:

1. Tables (run these in Supabase SQL Editor):

-- See supabase/migrations/001_initial_schema.sql for full schema

2. Row Level Security (RLS):

   • All tables have RLS enabled
   • Users can only access their own data
   • Admins have full access
   • Public read access for active enhancements and articles

3. Database Functions:

-- Check if user is admin
CREATE FUNCTION is_admin(_user_id UUID) RETURNS BOOLEAN AS $$
  SELECT EXISTS (SELECT 1 FROM admin_users WHERE user_id = _user_id)
$$ LANGUAGE sql STABLE SECURITY DEFINER;

-- Handle new user registration
CREATE FUNCTION handle_new_user() RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO profiles (user_id, first_name, last_name, display_name, referral_source, use_case)
  VALUES (
    NEW.id,
    NEW.raw_user_meta_data->>'first_name',
    NEW.raw_user_meta_data->>'last_name',
    NEW.raw_user_meta_data->>'display_name',
    NEW.raw_user_meta_data->>'referral_source',
    NEW.raw_user_meta_data->>'use_case'
  );

  INSERT INTO user_credits (user_id, credits) VALUES (NEW.id, 10);
  INSERT INTO user_plans (user_id, plan) VALUES (NEW.id, 'free');
  INSERT INTO user_notification_preferences (user_id) VALUES (NEW.id);

  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Create trigger for new users
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION handle_new_user();

Storage Setup

Create two storage buckets in Supabase:

1. images (Private)

   • For user uploaded and processed images
   • Path format: {user_id}/{timestamp}-{type}.png

2. enhancement-thumbnails (Public)

   • For enhancement preview images
   • Public read access enabled

Edge Functions Setup

Deploy the edge functions to Supabase:

# Install Supabase CLI
npm install -g supabase

# Login to Supabase
supabase login

# Link your project
supabase link --project-ref your-project-ref

# Deploy edge functions
supabase functions deploy process-image
supabase functions deploy send-email
supabase functions deploy knowledge-ai
supabase functions deploy generate-thumbnails
supabase functions deploy improve-prompt

Set the required secrets for edge functions:

supabase secrets set LOVABLE_API_KEY=your_lovable_api_key
supabase secrets set RESEND_API_KEY=your_resend_api_key
supabase secrets set APP_URL=your_app_url

Project Structure

clearpix/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # shadcn/ui base components
│   │   ├── studio/       # Studio-specific components
│   │   ├── admin/        # Admin panel components
│   │   └── ...           # Shared components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utilities and configs
│   ├── pages/            # Page components
│   │   ├── admin/        # Admin pages
│   │   └── ...           # User pages
│   ├── types/            # TypeScript types
│   ├── utils/            # Utility functions
│   ├── App.tsx           # Root component with routing
│   ├── main.tsx          # App entry point
│   └── index.css         # Global styles
├── supabase/
│   ├── functions/        # Edge functions
│   └── migrations/       # Database migrations
├── public/               # Static assets
├── index.html            # HTML entry point
├── vite.config.ts        # Vite configuration
├── tailwind.config.js    # Tailwind configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Dependencies

Key Features

For Users

• 200+ AI enhancement types across 10 categories
• Multi-image processing (up to 5 images)
• Face preservation technology
• Before/after comparison sliders
• Personal gallery with infinite scroll
• Favorites system
• Credit-based usage tracking
• 4 subscription tiers (Free, Starter, Pro, Studio)

For Admins

• User management dashboard
• Enhancement prompt CRUD
• Revenue and cost analytics
• Content moderation (gallery)
• Email template management
• Knowledge base CMS
• App settings configuration

Enhancement Categories

1. Freestyle - Custom AI prompts
2. Enhancement & Restoration - Quality improvements
3. Face & Portrait - Facial enhancements
4. Viral Style Transforms - Trending art styles
5. Pet Features - Pet-specific enhancements
6. Professional/Commercial - Business photos
7. Art Styles - Artistic transformations
8. Photography - Photo editing
9. Scenarios - Scene changes
10. Special FX - Effects and filters

Pricing Tiers

Plan	Credits	Price	Features
Free	5	$0	Watermarked images
Starter	25	$9.95	No watermarks, HD download
Pro	75	$19.95	Priority processing, 4K download
Studio	200	$59.95	Batch processing, API access

Development

Build for Production

npm run build

Preview Production Build

npm run preview

Linting

npm run lint

Deployment

The application can be deployed to:

• Vercel (recommended for frontend)
• Netlify
• Cloudflare Pages
• Any static hosting service

Make sure to:

1. Set environment variables in your hosting platform
2. Deploy Edge Functions to Supabase
3. Configure CORS and allowed domains in Supabase

Contributing

This is a proprietary application. Please contact the development team for contribution guidelines.

License

Copyright © 2025 ClearPix. All rights reserved.

Support

For support, email support@clearpix.app or visit our help center at /help