How to Contribute to the awesome-gpt-image-2 Project: A Complete Developer’s Guide

To contribute to the awesome-gpt-image-2 project, fork the repository on GitHub, clone it locally, install dependencies with npm install, configure your environment variables from .env.example, launch the Vite development server via npm run dev, and submit a pull request modifying React components, API routes, or Supabase migrations.

The awesome-gpt-image-2 repository is a full-stack image generation application built with Vite, React, and Supabase. Understanding how to contribute to the awesome-gpt-image-2 project requires familiarity with its monorepo structure, which colocates frontend source code, Node.js API routes, and database migrations under a single root directory.

Prerequisites and Repository Structure

Before contributing, review the project's architecture. The codebase follows a mono-repo layout that simplifies cross-cutting changes between the frontend and backend.

Core Technologies

• Frontend: Vite (build tool) + React (JSX components)
• Backend: Node.js API routes served through Vite's proxy
• Database: Supabase (PostgreSQL) with real-time capabilities
• Utilities: ESM scripts for data generation

Key Files and Directories

Reference these paths when contributing:

• src/main.jsx – React application entry point
• src/community.jsx – Community page component
• src/supabaseClient.js – Supabase client initialization
• api/generate-image.js – Image generation endpoint
• api/me.js – User profile endpoint
• scripts/generate-style-skill.mjs – Style library generator
• supabase/migrations/ – Database schema migrations
• data/style-library.json – JSON catalog of available image styles

Setting Up the Development Environment

Follow this workflow to configure your local instance:

1. Fork and clone:

   git clone https://github.com/<your-username>/awesome-gpt-image-2.git
   cd awesome-gpt-image-2

2. Install dependencies:

   npm install

3. Configure environment variables:

   cp .env.example .env

   Edit .env to add your Supabase credentials.

4. Start the development server:

   npm run dev

   The application runs at http://localhost:5173 with API routes proxied automatically.

Contribution Workflows by Component Type

Modifying Frontend Components

The frontend uses JSX components. To add a new feature:

// src/newFeature.jsx
import React from "react";

export default function NewFeature() {
  return <section>New image generation controls</section>;
}

Import your component in src/main.jsx or src/community.jsx to integrate it.

Adding API Routes

API routes reside in the api/ directory as JavaScript modules. Create new endpoints using standard Node.js patterns:

// api/community/custom-style.js
import { supabase } from "../../src/supabaseClient.js";

export async function GET(req) {
  const { data, error } = await supabase.from("styles").select("*");
  if (error) return new Response(JSON.stringify({ error }), { status: 500 });
  return new Response(JSON.stringify(data), { status: 200 });
}

The Vite configuration proxies /api requests to the backend automatically.

Updating Database Schema

Schema changes require SQL migrations in supabase/migrations/:

-- supabase/migrations/202605090001_user_credits.sql
CREATE TABLE IF NOT EXISTS user_credits (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id uuid REFERENCES auth.users,
  credits integer DEFAULT 0
);

Running Utility Scripts

The project includes ESM scripts for data processing. Execute them with Node:

node scripts/generate-style-skill.mjs

Code Examples for Common Tasks

Fetching user credits via Supabase (as implemented in the client):

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

export const supabase = createClient(
  "https://<your-project>.supabase.co",
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

export async function getUserCredits() {
  const { data, error } = await supabase
    .from("user_credits")
    .select("*")
    .single();
  if (error) throw error;
  return data;
}

Proxy configuration (Vite dev server):

// vite.config.js
export default {
  server: {
    proxy: {
      "/api": "http://localhost:3000"
    }
  }
};

Summary

• Fork the repository and clone it locally to begin contributing to the awesome-gpt-image-2 project
• Install dependencies with npm install and configure .env from .env.example
• Run npm run dev to start the Vite development server on port 5173
• Modify React components in src/, API routes in api/, and database schemas in supabase/migrations/
• Use the existing src/supabaseClient.js pattern for database interactions
• Submit pull requests following the repository's existing code style and file organization

Frequently Asked Questions

Do I need a Supabase account to contribute to awesome-gpt-image-2?

Yes, most features require database connectivity. Copy .env.example to .env and populate it with your Supabase project URL and anonymous key to enable full functionality during local development.

What is the recommended way to add a new image style to the application?

Add style definitions to data/style-library.json and regenerate the skill files by running node scripts/generate-style-skill.mjs. This updates the frontend's available style catalog according to the freestylefly/awesome-gpt-image-2 source code.

How do I test API routes locally?

Start the development server with npm run dev. Vite's proxy configuration forwards requests from http://localhost:5173/api to the Node.js backend, allowing you to test endpoints like /api/generate-image.js and /api/me.js without separate server management.

Where should I place new database migrations?

Place SQL migration files in supabase/migrations/ using the timestamp naming convention (e.g., 202605090001_user_credits.sql). These files define tables, indexes, and relationships for the Supabase PostgreSQL backend.

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