ProPortrait AI

Turn casual photos into polished business headshots and ID-photo style portraits with AI.

Overview

ProPortrait AI is a mobile-first web app for generating professional profile photos from an uploaded image. Users can choose business outfits, pick ID-photo background colors, select common print sizes, generate a new portrait, and keep a private generation history after signing in.

The project is built with the product polish of popular AI apps: a focused first screen, fast upload flow, simple controls, clear before/after output, and account-backed history.

Highlights

• AI headshot generation from an uploaded or captured photo
• Outfit presets for business, formal, and smart-casual portraits
• White, blue, and red background options for ID-photo style use cases
• Common photo size presets including 1-inch and 2-inch formats
• Auth, user profiles, credits, and generation history with Supabase
• Image storage for original and generated photos
• Mobile-first UI with a camera-like upload experience
• Downloadable generated images

Preview

Before	After

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS
• React Router
• Supabase Auth, Database, and Storage
• Sora Image API / image generation service

Getting Started

Prerequisites

• Node.js 18+
• npm
• A Sora Image API key
• Optional: a Supabase project for login, profiles, storage, and history

Installation

npm install

Create a local environment file:

cp .env.example .env.local

Fill in the required values:

VITE_SORA_API_KEY=your_api_key_here
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Start the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

Supabase Setup

The database and storage setup scripts live in supabase/.

1. Create a Supabase project.
2. Run supabase/supabase_setup.sql in the SQL Editor.
3. Create the original-images and generated-images storage buckets.
4. Run supabase/storage_policies.sql.
5. Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to .env.local.

Project Structure

.
|-- components/          # Shared navigation and UI pieces
|-- contexts/            # Auth context
|-- lib/                 # Supabase client
|-- pages/               # Home, upload, editor, profile, login, history
|-- public/              # Demo assets
|-- services/            # AI generation, auth, storage, history
|-- supabase/            # Database and storage SQL setup
|-- types/               # Supabase generated types
`-- types.ts             # App-level types and routes

Environment Variables

Name	Required	Description
VITE_SORA_API_KEY	Yes	API key for image generation
VITE_SUPABASE_URL	Optional	Supabase project URL
VITE_SUPABASE_ANON_KEY	Optional	Supabase anonymous public key
GEMINI_API_KEY	Optional	Legacy Gemini API key

Roadmap

• Add more outfit packs and industry-specific looks
• Add print-sheet export for multiple ID photos on one page
• Add cropping, face alignment, and background validation
• Add payments and credit packages
• Add admin analytics for usage and conversion tracking

Security Notes

Do not commit .env, .env.local, or API keys. The repository keeps only .env.example as a template.

License

No license has been specified yet.