# Dependencies for awesome-gpt-image-2: Complete Package.json Breakdown

> Explore the complete dependencies for awesome-gpt-image-2. Understand the runtime requirements including React 19, Vite 7, Supabase SDK, Stripe, and more.

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

---

**The awesome-gpt-image-2 project relies on ten runtime dependencies defined in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json), including React 19, Vite 7, the Supabase JavaScript SDK, Stripe, Alipay SDK, and Google Analytics libraries to power its React frontend, payment processing, and analytics.**

The awesome-gpt-image-2 repository is a modern React application built with Vite that handles image generation workflows. Understanding the dependencies for awesome-gpt-image-2 is essential for developers looking to self-host, extend, or debug the application. All runtime requirements are centralized in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json), which declares specific versions for the frontend framework, build tooling, payment gateways, and analytics clients.

## Frontend Framework and Build Dependencies

The UI layer is built on **React 19** with **Vite** as the build tool. According to [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) lines 29-32 and 25, the core frontend dependencies are:

- **react** `^19.2.1` and **react-dom** `^19.2.1` — The core UI library and DOM rendering utilities that form the foundation of the front-end.
- **vite** `^7.2.7` — Lightning-fast build tool and development server providing bundling and hot-module replacement.
- **@vitejs/plugin-react** `^5.1.1` — Official Vite plugin adding fast JSX/React support and automatic Fast Refresh.
- **lucide-react** `^0.561.0` — Icon library supplying SVG React components for UI elements.

## Backend and Payment SDKs

Server-side functionality and payment processing are handled by three critical SDKs declared in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) lines 24, 31, and 26:

- **@supabase/supabase-js** `^2.105.4` — JavaScript SDK for Supabase that powers authentication, database access, and real-time features.
- **stripe** `^22.1.1` — Official Stripe SDK for creating checkout sessions and handling global payment flows.
- **alipay-sdk** `^4.14.0` — Official SDK for Alipay's web-pay API, enabling Chinese payment processing.

## Analytics and Authentication Libraries

For usage tracking and Google service integration, the project includes:

- **@google-analytics/data** `^5.2.2` — Official client for Google Analytics 4 Data API, enabling server-side analytics queries.
- **google-auth-library** `^10.6.2` — Handles OAuth2 authentication flows required for Google services, particularly GA4 access.

## Implementation Examples

The following snippets demonstrate how these dependencies are integrated throughout the codebase.

### Initializing the Supabase Client

In [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js), the Supabase client is configured using environment variables:

```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)

```

### Processing Stripe Checkout Sessions

The file [`api/billing/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/checkout.js) uses the Stripe SDK to create payment sessions:

```javascript
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

export async function POST(req) {
  const { priceId } = await req.json()
  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.BASE_URL}/success`,
    cancel_url: `${process.env.BASE_URL}/cancel`,
  })
  return new Response(JSON.stringify({ url: session.url }), { status: 200 })
}

```

### Querying Google Analytics 4 Data

Server-side analytics queries utilize the Google Analytics Data API:

```javascript
import { BetaAnalyticsDataClient } from '@google-analytics/data'

const gaClient = new BetaAnalyticsDataClient({
  credentials: {
    client_email: process.env.GA_CLIENT_EMAIL,
    private_key: process.env.GA_PRIVATE_KEY,
  },
})

async function getPageViews() {
  const [response] = await gaClient.runReport({
    property: `properties/${process.env.GA_PROPERTY_ID}`,
    dimensions: [{ name: 'pagePath' }],
    metrics: [{ name: 'screenPageViews' }],
    dateRanges: [{ startDate: '30daysAgo', endDate: 'today' }],
  })
  return response.rows
}

```

### Rendering UI Components with Lucide Icons

The `lucide-react` package provides iconography as shown in this JSX example:

```jsx
import { Sparkles } from 'lucide-react'

function FeaturedBadge() {
  return (
    <span className="badge">
      <Sparkles size={16} /> Featured
    </span>
  )
}

```

## Key Configuration Files

Several files work in concert with these dependencies:

- **[`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json)** — Declares all ten runtime dependencies and their semantic versions (lines 23-32).
- **[`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js)** — Configures the Vite build pipeline including the React plugin setup.
- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)** — Entry point for the React application that initializes the Vite development environment and React rendering.
- **`scripts/google-analytics-oauth.mjs`** — Implements the OAuth flow for GA4 data access using `google-auth-library`.

## Summary

The dependencies for awesome-gpt-image-2 form a cohesive stack enabling modern React development, secure payments, and analytics:

- **React 19 + Vite 7** provide the frontend framework and build tooling with hot-module replacement.
- **Supabase JavaScript SDK** manages authentication, database operations, and real-time subscriptions.
- **Stripe and Alipay SDKs** handle global and Chinese payment processing respectively.
- **Google Analytics Data API and Auth Library** enable server-side usage tracking and OAuth flows.
- **Lucide React** supplies the iconography used throughout the user interface.

## Frequently Asked Questions

### What version of React does awesome-gpt-image-2 use?

The project uses **React 19.2.1** and React DOM 19.2.1, as specified in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) lines 29-30. This recent major version provides the latest features for the UI foundation while `vite` and `@vitejs/plugin-react` handle the build and development workflow.

### How does awesome-gpt-image-2 handle payment processing?

The application supports dual payment gateways through the **`stripe`** `^22.1.1` and **`alipay-sdk`** `^4.14.0` packages. Stripe handles international credit card payments via checkout sessions created in [`api/billing/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/checkout.js), while the Alipay SDK manages Chinese payment flows, allowing global market coverage.

### Where is the Supabase client initialized?

The Supabase client is configured in **[`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js)** using the `@supabase/supabase-js` package. It reads `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY` from environment variables and exports a singleton client used throughout the application for database queries and authentication.

### Which file manages Google Analytics 4 authentication?

OAuth2 authentication for Google Analytics is handled in **`scripts/google-analytics-oauth.mjs`**, which utilizes the `google-auth-library`. This script manages the credential flow required to query GA4 data via the `@google-analytics/data` client, as demonstrated in the server-side reporting examples.