Awesome-gpt-image-2 Website Stack: React, Vite, and Supabase Architecture Explained

The awesome-gpt-image-2 website runs on a React 19 frontend built with Vite, uses Vercel Serverless Functions for backend logic, and relies on Supabase for authentication, while APIMart powers the image generation and Stripe/Alipay handle payments.

The awesome-gpt-image-2 repository by freestylefly is an open-source showcase and gallery for GPT-Image-2 outputs. Examining the technologies used in the awesome-gpt-image-2 website stack reveals a modern, serverless architecture designed for high-performance image generation, real-time community features, and multi-region payment processing.

Frontend Architecture: React 19 and Vite

The client-side application is built with React 19 and bundled using Vite with the @vitejs/plugin-react plugin. In vite.config.js, the build pipeline configures a multi-page application with separate entry points for the gallery and GPT-Image-2.5 sections, while publicDir: 'data' serves static assets like the style library JSON directly.

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',
    rollupOptions: {
      input: {
        gallery: new URL('./index.html', import.meta.url).pathname,
        image25: new URL('./gpt-image-2-5/index.html', import.meta.url).pathname,
      },
    },
  },
});

Source: [vite.config.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js)

UI Components and Styling

The interface uses lucide-react for SVG iconography (icons like ArrowUpRight and Heart imported throughout components) and plain CSS for layout and theming. Global styles reside in src/styles.css, with component-scoped styles handling responsive design and the WeChat community QR interface defined in src/community.jsx and src/community.css.

Backend Infrastructure: Vercel Serverless Functions

API routes in the /api directory deploy as Vercel Functions, providing serverless endpoints for sensitive operations. The api/generate-image.js handler validates prompts, reserves user credits via Supabase RPC calls, forwards requests to the APIMart service, and returns task IDs for polling. Error handling maps internal failures to user-friendly publicErrorCode and publicErrorStatus fields.

Source: [api/generate-image.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js)

Image Generation Integration

The platform integrates APIMart through a custom wrapper in api/_lib/apimart.js. This abstraction handles webhook URL configuration, request signing, and response parsing for the GPT-Image-2 API. Shared constants like APIMART_MAX_PROMPT_LENGTH and error codes live in shared/apimart.js, ensuring consistency between frontend validation and backend processing.

Database and Authentication: Supabase

Supabase (@supabase/supabase-js) provides the entire data layer. The src/supabaseClient.js file initializes the client with the public anon key, enabling automatic token refresh and session persistence via detectSessionInUrl and persistSession settings.

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 supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    autoRefreshToken: true,
    detectSessionInUrl: true,
    persistSession: true,
  },
});

Source: [src/supabaseClient.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js)

The database stores user favorites, generation credits, and billing data with row-level security policies. Authentication supports Google OAuth via the google-auth-library and Watcha (a Chinese SSO provider) for regional accessibility, as configured in src/main.jsx.

Payment Processing: Stripe and Alipay

The monetization layer uses Stripe for international credit card processing and Alipay SDK for Chinese payment flows. When users purchase credit packs, the client-side helper submitAlipayPaymentForm in src/main.jsx parses the HTML response, validates the action URL against allowed hosts (openapi.alipay.com or openapi-sandbox.dl.alipaydev.com), and programmatically submits a hidden form to redirect the user to Alipay's secure checkout.

function submitAlipayPaymentForm(paymentHtml) {
  const doc = new DOMParser().parseFromString(paymentHtml, 'text/html');
  const srcForm = doc.querySelector('form');
  if (!srcForm) throw new Error('ALIPAY_CHECKOUT_FAILED');

  const action = new URL(srcForm.getAttribute('action'));
  const allowed = new Set(['openapi.alipay.com', 'openapi-sandbox.dl.alipaydev.com']);
  if (action.protocol !== 'https:' || !allowed.has(action.hostname))
    throw new Error('ALIPAY_CHECKOUT_FAILED');

  const form = document.createElement('form');
  form.method = 'POST';
  form.action = action.toString();
  srcForm.querySelectorAll('input[name]').forEach(i => {
    const hidden = document.createElement('input');
    hidden.type = 'hidden';
    hidden.name = i.getAttribute('name');
    hidden.value = i.getAttribute('value') || '';
    form.appendChild(hidden);
  });
  document.body.appendChild(form);
  form.submit();
}

Source: [src/main.jsx](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)

Upon successful payment, webhooks update the user's generationQuotaText values in Supabase, enabling immediate access to purchased credits.

Analytics and Monitoring

Google Analytics 4 integration loads conditionally based on the VITE_GA_MEASUREMENT_ID environment variable. The useGaPageViews hook in src/main.jsx injects the GA script lazily, initializes the data layer, and emits page-view events on hash navigation changes, ensuring privacy-compliant tracking only when explicitly configured.

Development Tooling and Skill Distribution

The repository includes a unique skill packaging system via scripts/generate-style-skill.mjs. This script bundles the prompt template catalog from data/style-library.json into the gpt-image-2-style-library npm package. Claude/Code agents can install this package to access reusable prompt styles as a skill, allowing automated prompt generation based on the curated categories and scenes defined in the JSON catalog.

Summary

• Build System: Vite with React plugin bundles the multi-page frontend and enables local Vercel API mocking for development.
• Frontend: React 19 with lucide-react icons and modular CSS delivers the gallery and community interfaces.
• Backend: Vercel Serverless Functions in /api handle secure operations like image generation and credit management.
• Data Layer: Supabase provides PostgreSQL database, authentication (Google/Watcha OAuth), and row-level security.
• Image Generation: APIMart integration wrapped in api/_lib/apimart.js processes GPT-Image-2 requests asynchronously.
• Payments: Stripe and Alipay SDK support international and Chinese credit purchasing flows respectively.
• Analytics: Conditional Google Analytics 4 loading tracks user engagement without blocking performance.

Frequently Asked Questions

What frontend framework does awesome-gpt-image-2 use?

The project uses React 19 as its UI framework, bundled with Vite and the @vitejs/plugin-react plugin. The entry point src/main.jsx mounts the React root and configures global providers for Supabase authentication and analytics.

How does the image generation API work in awesome-gpt-image-2?

Client applications POST to /api/generate-image, a Vercel Serverless Function that validates the prompt, checks credit balances via Supabase RPC, and forwards the request to APIMart. The function returns a task ID for polling the generation status, with all APIMart integration logic abstracted into api/_lib/apimart.js.

What authentication methods are supported?

Users authenticate via Supabase Auth using Google OAuth (validated with google-auth-library) or Watcha for Chinese users. The src/supabaseClient.js file configures persistent sessions with automatic token refresh, while src/main.jsx handles the OAuth callback detection.

How are payments processed for credit purchases?

The stack implements dual payment providers: Stripe for international cards and Alipay SDK for Chinese users. The frontend constructs secure checkout forms (validating Alipay hostnames against an allowlist) and redirects to external payment gateways, with webhooks updating credit balances in Supabase upon completion.

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