Back to all projects

OpenFolio AI.

An AI-powered portfolio generator and guest-only studio that interviews users and builds premium, personalized developer portfolio websites with live editing and instant hosting.

Overview & Guest Experience

Traditional website builders require long sign-up forms and complex layout customization. OpenFolio AI eliminates onboarding friction by offering silent anonymous guest sessions powered by Firebase Anonymous Auth. Visitors start building immediately through an interactive conversational interview with Gemini 2.0 Flash.

System Architecture

A robust serverless full-stack architecture designed for high scalability and zero infrastructure maintenance:

  • Client SPA: React 19, React Router 8, and Vite 6 delivering a fast responsive studio workspace.
  • Serverless API: Express bundled as a Vercel Serverless Function (api/index.ts) verifying Firebase ID tokens, enforcing rate limits, and proxying Gemini endpoints.
  • Intelligence Pipeline: Official Google Gen AI SDK integration for structured JSON generation and conversational revisions.
  • Live Sandboxed Preview: Cockpit preview rendering generated HTML dynamically inside an isolated iframe with real-time viewport toggles.
  • Hosting & Sharing: Firestore database hosting public portfolio routes (/p/{slug}) with zero build steps.

Local Setup & Installation

Clone the repository, configure your environment variables, and run the development server:

1# 1. Install dependencies
2npm install
3
4# 2. Configure environment variables
5cp .env.example .env.local
6
7# 3. Start local development server (Express + Vite)
8npm run dev

Key Features

Zero Friction Auth

Silent guest sessions with automated daily quotas

Natural Language Edits

Conversational AI revisions merged cleanly into portfolio state

Clean HTML Export

Instant standalone HTML and Tailwind CSS download