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

The awesome-gpt-image-2 project relies on ten runtime dependencies defined in 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, 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 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 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, the Supabase client is configured using environment variables:

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 uses the Stripe SDK to create payment sessions:

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:

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:

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 — Declares all ten runtime dependencies and their semantic versions (lines 23-32).
• vite.config.js — Configures the Vite build pipeline including the React plugin setup.
• 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 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, 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 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.

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