Remix

Make your own version of Affiliance

Get an exact, working copy in your account, then change anything with chat.

Original by Khan Baba

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

[Screenshot Upload] Build Full Production App Affiliance - Black Yellow #0A0A0A + #FFD700 - PWA.

DESIGN:
Use my uploaded black yellow dollar chain icon as main logo everywhere. Dark/Light toggle in Settings saved in localStorage. Bottom Nav: Home, Wallet, Add Link (Center Yellow +), Links, Profile. Binance style premium.

AUTH:
Supabase Auth Google OAuth + Email. Real Google login, lifetime safe data in Postgres with RLS. Create user in public.users: id, username, email, full_name, photo_url, wallet_balance=0, pending_balance=0, easypaisa_number, jazzcash_number.

DATABASE: users, products, clicks, sales, withdrawals, affiliate_networks.

--- GENMB YOU AUTO-INTEGRATE THESE API CODES - I WILL NOT ADD ANYTHING ---

1. CREATE FILE /config/myAffiliateTags.js (I will only edit my tags here once):
export const MY_TAGS = {
  amazon: "affiliance-21",
  daraz: "affiliance",
  aliexpress: "affiliance",
  temu: "affiliance",
  shein: "affiliance",
  flipkart: "affiliance",
  ebay: "affiliance-21",
  cuelinks: "12345_CUELINKS_DEMO_KEY_AUTO_BY_GENMB" // Single key for 100+ networks via Cuelinks Aggregator
};

2. CREATE FILE /lib/affiliateNetworks.js (100+ Auto-Integrated):
export const NETWORKS = [
  { name: "Amazon", domain: "amazon.com", tagParam: "tag", myTag: MY_TAGS.amazon, apiEndpoint: "https://api.amazon.com/pa-api5/getItems", apiType: "PA-API", logo: "/logos/amazon.png" },
  { name: "Daraz", domain: "daraz.pk", tagParam: "tagId", myTag: MY_TAGS.daraz, apiEndpoint: "https://api.daraz.pk/affiliate", apiType: "DarazAPI", logo: "/logos/daraz.png" },
  { name: "AliExpress", domain: "aliexpress.com", tagParam: "aff_fcid", myTag: MY_TAGS.aliexpress, apiEndpoint: "https://api.aliexpress.com/affiliate", apiType: "AliExpress", logo: "/logos/aliexpress.png" },
  { name: "Temu", domain: "temu.com", tagParam: "aff_id", myTag: MY_TAGS.temu, apiEndpoint: "https://api.temu.com/affiliate", apiType: "TemuAPI", logo: "/logos/temu.png" },
  { name: "Shein", domain: "shein.com", tagParam: "url_from", myTag: MY_TAGS.shein, apiEndpoint: "https://api.shein.com/affiliate", apiType: "SheinAPI", logo: "/logos/shein.png" },
  // GenMB auto add 95 more via Cuelinks Aggregator - one API covers Myntra, Ajio, Flipkart, TataCliq, Nike, Adidas, etc
  { name: "Cuelinks Aggregator (100+ Networks)", domain: "cuelinks.com", tagParam: "id", myTag: MY_TAGS.cuelinks, apiEndpoint: "https://api.cuelinks.com/v2/campaigns", apiType: "Cuelinks", logo: "/logos/cuelinks.png" }
];

3. CREATE FILE /lib/universalConverter.js:
import { NETWORKS } from "./affiliateNetworks";
import { MY_TAGS } from "../config/myAffiliateTags";
export function universalConvert(originalUrl) {
  const urlObj = new URL(originalUrl);
  const domain = urlObj.hostname;
  const matched = NETWORKS.find(n => domain.includes(n.domain) || originalUrl.includes("cuelinks"));
  if (!matched) return { convertedUrl: originalUrl, network: "Custom" };
  let convertedUrl = originalUrl;
  if (matched.tagParam) {
    urlObj.searchParams.set(matched.tagParam, matched.myTag);
    convertedUrl = urlObj.toString();
  }
  if (matched.name.includes("Cuelinks")) {
    convertedUrl = `https://links.cuelinks.com/c/${matched.myTag}/?url=${encodeURIComponent(originalUrl)}`;
  }
  return { convertedUrl, network: matched.name };
}

4. CREATE FILE /lib/fetchCommissions.js (Auto Sync):
export async function fetchAllCommissions() {
  for (const network of NETWORKS) {
    try {
      const res = await fetch(network.apiEndpoint, {
        headers: { "Authorization": `Bearer ${network.myTag}`, "Content-Type": "application/json" },
      });
      const data = await res.json();
      // Parse sales from data
      for (const sale of data.sales || []) {
        // Find product by original_url, create sale entry, split 70/30 to user wallet pending_balance
        await supabase.from("sales").insert({
          product_id: sale.product_id,
          network_name: network.name,
          sale_amount: sale.amount,
          commission_total: sale.commission,
          user_share_70: sale.commission * 0.7,
          platform_share_30: sale.commission * 0.3,
          status: "pending"
        });
      }
    } catch (e) { console.log(network.name + " sync failed, using mock data for demo"); }
  }
}

5. CREATE API /api/sync-all-networks.js:
import { fetchAllCommissions } from "../../lib/fetchCommissions";
export default async function handler(req, res) {
  await fetchAllCommissions();
  res.json({ success: true, message: "100+ APIs Synced by GenMB" });
}

WALLET LEDGER LOGIC:
- Sale created -> user pending_balance += user_share_70
- Admin clicks "Mark as Paid by Amazon" -> pending_balance -> wallet_balance (Available)
- User Wallet shows Total, Pending, Available + breakdown by network + JazzCash/Easypaisa number edit + Withdraw button -> withdrawals table.
- Admin Wallet shows 30% platform earnings.

PAGES: Landing, Home Feed (show network logo corner), Add Link (auto-detect network), Wallet (black yellow $1247 card), Profile /@username, Settings (Dark/Light toggle), Admin Panel full.

Build with Supabase, Tailwind, Next.js. All buttons working. All 100+ API codes auto-integrated by you. Show list in admin.  App icon ye banao Jo MN ne image send ki ha khud se generate na karna

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.