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

> Explore the awesome-gpt-image-2 website stack. Learn how React Vite and Supabase power this application's architecture for seamless image generation and payments.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: architecture
- Published: 2026-09-10

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
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)](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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css), with component-scoped styles handling responsive design and the WeChat community QR interface defined in [`src/community.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx) and [`src/community.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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)](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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) file initializes the client with the public anon key, enabling automatic token refresh and session persistence via `detectSessionInUrl` and `persistSession` settings.

```javascript
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)](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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
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)](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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) file configures persistent sessions with automatic token refresh, while [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.