GPT-Image2 Web Application Technology Stack: React 19, Vite 7, and Supabase

The GPT-Image2 web application is a modern React 19 single-page application built with Vite 7, featuring a serverless Node.js API layer deployed on Vercel, Supabase for authentication and data persistence, and integrated payment processing via Stripe and Alipay.

This open-source project, hosted in the freestylefly/awesome-gpt-image-2 repository, demonstrates a production-ready architecture for AI image generation services. The technology stack combines a lightweight client-side React frontend with serverless backend functions to handle image generation, user authentication, and payment workflows.

Frontend Architecture: React 19 and Vite 7

The client layer of the GPT-Image2 web application relies on cutting-edge frontend technologies optimized for performance and developer experience.

Build System and Configuration

The project uses Vite 7 as its build tool and development server, configured in vite.config.js with the official React plugin. This setup provides fast hot-module replacement and optimized production bundles.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { localVercelApi } from './scripts/vite-local-api.mjs';

export default defineConfig({
  plugins: [localVercelApi(), react()],
  publicDir: 'data',
  build: { outDir: 'dist', sourcemap: false },
});

The configuration references localVercelApi() from scripts/vite-local-api.mjs to simulate the serverless API environment during local development, ensuring consistency between development and production.

UI Components and Styling

The application entry point resides in src/main.jsx, which bootstraps the React 19 application and handles routing and global state. The UI relies on lucide-react for SVG iconography throughout the interface.

Styling is implemented via plain CSS using a global stylesheet at src/styles.css, avoiding heavy CSS-in-JS libraries to keep bundle sizes minimal. This approach provides layout and visual design without the runtime overhead of larger styling frameworks.

Backend and API Layer: Node.js Serverless Functions

While the frontend runs entirely in the browser, the GPT-Image2 web application depends on a lightweight Node-based API layer deployed as Vercel serverless functions.

Serverless Function Architecture

The API layer consists of multiple endpoints located in the api/ directory, each handling specific business logic:

• api/generate-image.js: Forwards user prompts to the GPT-Image2 generation service and returns generated image URLs
• api/me.js: Returns current user profiles and credit balances from Supabase
• api/favorites.js: Handles CRUD operations for saved user cases and favorite images

These functions run on Vercel's edge network, providing low-latency responses globally without requiring dedicated server infrastructure.

Image Generation Endpoint

The core functionality resides in api/generate-image.js, which acts as a proxy between the React frontend and the underlying GPT-Image2 model hosted externally. When users submit generation requests from the UI, the client code posts to this endpoint:

async function generateImage(prompt) {
  const resp = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt }),
  });
  const data = await resp.json();
  if (!resp.ok) throw new Error(data.error);
  return data.imageUrl;   // URL of the generated image
}

The serverless function processes these requests, manages usage credits, and returns the resulting image URLs alongside updated credit balances.

Authentication and Data Management

User identity and persistent data storage rely entirely on Supabase, implemented through @supabase/supabase-js.

Supabase Client Configuration

The src/supabaseClient.js file initializes the Supabase client with environment-specific configuration and session persistence settings:

// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const isSupabaseConfigured = Boolean(supabaseUrl && supabaseAnonKey);

export const supabase = isSupabaseConfigured
  ? createClient(supabaseUrl, supabaseAnonKey, {
      auth: { autoRefreshToken: true, detectSessionInUrl: true, persistSession: true },
    })
  : null;

This configuration supports OAuth authentication via Google and Watcha providers, with automatic token refresh and session persistence in the browser. The isSupabaseConfigured helper allows the application to degrade gracefully when environment variables are missing.

User Profiles and Credit Systems

Supabase stores user profile data and credit balances, which the application queries through the api/me.js endpoint. The authentication state managed by Supabase determines access to image generation features and tracks remaining credits across sessions.

Payment Processing

The technology stack includes dual payment provider support for global accessibility.

Stripe and Alipay Integration

The application integrates Stripe (stripe) for credit-card based purchases and Alipay SDK (alipay-sdk) for Chinese market payments. These SDKs operate primarily within the serverless API layer to securely process transactions without exposing sensitive keys to the client.

When users purchase credit packs or API access subscriptions, the frontend invokes serverless endpoints that create checkout sessions using these payment processors. Successful transactions update the Supabase credits table, immediately reflecting new balances in the user interface.

Analytics and Monitoring

Business intelligence and traffic monitoring integrate directly with Google Analytics 4 through the @google-analytics/data package. This implementation tracks page-view events, user engagement metrics, and conversion funnels without requiring client-side JavaScript analytics libraries, reducing frontend bundle sizes while maintaining comprehensive business metrics.

Deployment and Infrastructure

Vercel Configuration

The entire application deploys to Vercel using static site generation for the React frontend and serverless functions for the API layer. The vercel.json configuration file defines routing rules, function mappings, and deployment settings that wire together the static assets and API endpoints.

Build scripts in scripts/*.mjs (such as generate-site-data.mjs and generate-style-skill.mjs) run during the build process to prepare static data assets before deployment.

Environment Variables

The technology stack relies on environment variables defined in .env.example and configured in the Vercel dashboard:

• VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY: Client-side Supabase configuration
• VITE_STRIPE_PUBLISHABLE_KEY: Public Stripe key for payment UI
• STRIPE_SECRET_KEY and STRIPE_PRICE_ID: Server-side payment configuration
• BASE_URL: Application domain for payment redirects

These variables enable secure communication between the React frontend, serverless API functions, and third-party services without hardcoding sensitive credentials.

Summary

• React 19 and Vite 7 power the frontend build system and component architecture, configured in vite.config.js and initialized in src/main.jsx.
• Supabase (@supabase/supabase-js) handles OAuth authentication, session management, and user data storage via src/supabaseClient.js.
• Node.js serverless functions in the api/ directory provide backend capabilities for image generation, user profiles, and favorites management.
• Stripe and Alipay SDK integrations process payments securely through serverless endpoints, updating Supabase credit tables upon completion.
• Vercel hosts both the static React build output and serverless API functions, configured via vercel.json with environment variables managed securely.

Frequently Asked Questions

What frontend framework does the GPT-Image2 web application use?

The application uses React 19 as its frontend framework, implemented as a single-page application. The root component mounts in src/main.jsx and manages routing, language switching, and global application state using modern React hooks.

How does the application handle user authentication?

User authentication relies on Supabase with the @supabase/supabase-js client library. The implementation in src/supabaseClient.js supports OAuth providers including Google and Watcha, with automatic session persistence and token refresh configured via the auth options in the client constructor.

Where is the GPT-Image2 application deployed?

The application deploys to Vercel, which serves static assets from the dist/ directory generated by Vite and executes serverless Node.js functions from the api/ directory. The deployment configuration resides in vercel.json, enabling global CDN distribution and automatic builds from the repository.

What technologies handle payment processing in the application?

Payment processing uses Stripe (stripe) and Alipay SDK (alipay-sdk) integrated within the serverless API layer. These services handle credit pack purchases and subscriptions without exposing secret keys to the browser, updating user credit balances in Supabase upon successful transaction completion.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}