{programs ? (
) : (
)}
`program${p ? "s" : ""}`}
/>
```
Sources: [apps/web/ui/program-marketplace/pages/marketplace-programs-list-page.tsx:19-79](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/ui/program-marketplace/pages/marketplace-programs-list-page.tsx#L19-L79)
### Card Visualizations and Accent Color Extraction
Program representations utilize specialized card components including `FeaturedProgramCard`, `MarketplaceProgramCard`, and `MarketplaceProgramHero`. Each card dynamically computes aesthetic backdrops using image accent color extraction hooks (`useImageAccentColor`). If color extraction is pending or blocked, cards fall back to deterministic palette arrays.
| Card Component | Layout Structure | Primary Visual Elements |
| :--- | :--- | :--- |
| **FeaturedProgramCard** | Responsive flex layout with header banner integration (`sm:min-h-[340px]`) | Program logo, status badge, description, rewards summary, and external website link with globe icon. |
| **MarketplaceProgramCard** | Vertical grid cell card with hover drop shadow (`hover:drop-shadow-card-hover`) | Circular avatar, program name, truncated 2-line description, and structured reward badges. |
| **MarketplaceProgramHero** | Extended full-width hero header with banner image slot (`min-h-[640px]` when banner active) | Large avatar, title, category tags via `ProgramCategory`, website link, and action slot container. |
```tsx
export function FeaturedProgramCard({
program,
externalMarketplace = false,
colorIndex = 0,
}: {
program: NetworkProgramProps;
externalMarketplace?: boolean;
colorIndex?: number;
}) {
const router = useRouter();
const rewards = program.rewards;
// Derive the tint from the program's image
// Fall back to the palette if extraction is blocked
const { color: accentColor, ready: accentReady } = useImageAccentColor(
program.marketplaceHeaderImage ?? program.logo,
);
const backgroundColor = accentColor ?? getFeaturedCardBackground(colorIndex);
return (
```
Sources: [apps/web/ui/program-marketplace/featured-program-card.tsx:35-55](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/ui/program-marketplace/featured-program-card.tsx#L35-L55)
> [!IMPORTANT]
> `FeaturedProgramCard` cycles through an array of 10 pastel background hex codes (`FEATURED_CARD_BACKGROUNDS`) using modulo arithmetic (`colorIndex % length`), guaranteeing consistent chromatic distribution across items when image accent extraction is not yet ready.
Sources: [apps/web/ui/program-marketplace/featured-program-card.tsx:14-33](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/ui/program-marketplace/featured-program-card.tsx#L14-L33)
## Application Analytics and Conversion Tracking
### Visitor Device Context and URL Path Routing
Tracking marketplace visitor interactions and application clicks involves capturing client device contexts and resolving incoming request URLs into network program slugs. The tracking subsystem parses user-agent headers to record operating system details, browser context, architecture, and referral origins. When an external program page initializes via `MarketplaceExternalProgramPage`, it mounts an `ApplicationAnalytics` component alongside the external shell wrapper and apply button.
```tsx
return (
<>
[!NOTE]
> If `getNetworkProgram` fails to resolve a valid program record for a given `programSlug`, `MarketplaceExternalProgramPage` immediately triggers a server-side redirect to `/marketplace`.
Sources: [apps/web/ui/program-marketplace/external/marketplace-external-program-page.tsx:18-24](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/ui/program-marketplace/external/marketplace-external-program-page.tsx#L18-L24)
### Program Slug Identification Routing
The route tracking logic uses `identityProgramSlug` to map incoming request URLs to specific program slugs or marketplace directory partitions. The parser evaluates pathname segments against known route patterns to determine whether a request targets an individual program, a category view, or platform registration.
| Route Pattern | Parsed Path Structure | Output Slug and Marketplace Flag |
| :--- | :--- | :--- |
| Root Marketplace | `/marketplace` | `programSlug: null`, `isMarketplace: true` |
| Category View | `/marketplace/c/{category}` | `programSlug: null`, `isMarketplace: true` |
| Reserved Slug Check | `/marketplace/{reservedSlug}` | `programSlug: null`, `isMarketplace: true` |
| Direct Marketplace Program | `/marketplace/{programSlug}` | `programSlug: parts[1].toLowerCase()`, `isMarketplace: true` |
| Legacy Marketplace Program | `/programs/marketplace/{programSlug}` | `programSlug: parts[2].toLowerCase()`, `isMarketplace: true` |
| Standard Program Path | `/programs/{programSlug}` | `programSlug: parts[1].toLowerCase()`, `isMarketplace: false` |
| Platform Registration | `/register` | `programSlug: NETWORK_PROGRAM_SLUG`, `isMarketplace: false` |
| Short Slug Route | `/{programSlug}` | `programSlug: parts[0].toLowerCase()`, `isMarketplace: false` |
```typescript
function identityProgramSlug(url: string) {
try {
const urlObj = new URL(url);
const parts = urlObj.pathname.split("/").filter(Boolean);
if (parts.length === 0) {
return { programSlug: null, isMarketplace: false };
}
if (parts[0] === "register") {
return { programSlug: NETWORK_PROGRAM_SLUG, isMarketplace: false };
}
if (parts[0] === "marketplace") {
if (parts.length === 1) {
return { programSlug: null, isMarketplace: true };
}
if (parts[1] === "c") {
return { programSlug: null, isMarketplace: true };
}
if (parts.length === 2) {
if (MARKETPLACE_RESERVED_SLUGS.has(parts[1])) {
return { programSlug: null, isMarketplace: true };
}
return {
programSlug: parts[1].toLowerCase(),
isMarketplace: true,
};
}
return { programSlug: null, isMarketplace: true };
}
if (parts[0] === "programs" && parts[1] === "marketplace") {
if (!parts[2] || MARKETPLACE_RESERVED_SLUGS.has(parts[2])) {
return { programSlug: null, isMarketplace: false };
}
return {
programSlug: parts[2].toLowerCase(),
isMarketplace: true,
};
}
if (parts[0] === "programs") {
if (!parts[1]) {
return { programSlug: null, isMarketplace: false };
}
return {
programSlug: parts[1].toLowerCase(),
isMarketplace: false,
};
}
return {
programSlug: parts[0].toLowerCase(),
isMarketplace: false,
};
```
Sources: [apps/web/app/ee/api/track/application/route.ts:419-480](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/api/track/application/route.ts#L419-L480)
> [!CAUTION]
> The `identityProgramSlug` function wraps its URL parsing inside a `try...catch` block; malformed or unparseable URL strings do not throw errors but instead silently return a fallback object with `programSlug: null` and `isMarketplace: false`.
Sources: [apps/web/app/ee/api/track/application/route.ts:481-484](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/api/track/application/route.ts#L481-L484)
## Marketplace Administration and Metadata Operations
### Admin Dashboard and Program Sorting
Administrative management of marketplace listings is handled through designated administrative dashboard views where operators can update program descriptions, manage category classifications, and alter display rankings. The administrative interface manages ranking positions by tracking original and modified index states, computing updates when programs are reordered, and falling back to `MAX_MARKETPLACE_RANKING` (`2147483647`) for unranked items.
```tsx
const MAX_MARKETPLACE_RANKING = 2147483647;
type MarketplaceProgram = {
id: string;
name: string;
slug: string;
logo: string | null;
url: string | null;
description: string | null;
addedToMarketplaceAt: string | Date;
marketplaceRanking: number;
categories: Category[];
};
```
Sources: [apps/web/app/ee/admin.dub.co/dashboard/programs/page.tsx:25-38](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/admin.dub.co/(dashboard)/programs/page.tsx#L25-L38)
> [!WARNING]
> Programs assigned `MAX_MARKETPLACE_RANKING` are excluded from standard positional sequencing calculations, ensuring unranked entries do not disrupt custom ordering among featured marketplace listings.
Sources: [apps/web/app/ee/admin.dub.co/dashboard/programs/page.tsx:97-138](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/admin.dub.co/(dashboard)/programs/page.tsx#L97-L138)
Operators can also review recent programs via a dedicated administration view that filters workspaces by plan tier and exposes direct actions to add unlisted programs into the public marketplace directory.
```tsx
const filters = useMemo(
() => [
{
key: "plan",
icon: CreditCard,
label: "Plan",
singleSelect: true,
options: plans.map((value) => ({
value,
label: capitalize(value) ?? value,
})),
},
],
[],
);
```
Sources: [apps/web/app/ee/admin.dub.co/dashboard/programs/recent/page.tsx:59-73](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/admin.dub.co/(dashboard)/programs/recent/page.tsx#L59-L73)
### Sitemap Generation and Category Metadata
Search engine optimization and metadata generation leverage automated sitemap compilation routines alongside dynamic Open Graph image generators. The sitemap generation routine inspects incoming request host headers to determine domain context and construct corresponding URL entries.
| Host Context | Query Target | Generated Sitemap Paths |
| :--- | :--- | :--- |
| Partners Hostname (`PARTNERS_HOSTNAMES`) | `prisma.program.findMany` with published default groups | `https://partners.dub.co/{program.slug}` |
| Application Hostname (`isAppHostname`) | `prisma.program.findMany` where `addedToMarketplaceAt` is not null | `https://dub.co/marketplace`, `https://dub.co/marketplace/programs`, category paths, and individual program URLs |
```typescript
if (PARTNERS_HOSTNAMES.has(domain)) {
const programs = await prisma.program.findMany({
where: {
groups: {
some: {
slug: "default",
landerData: {
not: Prisma.AnyNull,
},
landerPublishedAt: {
not: null,
},
},
},
},
orderBy: {
slug: "asc",
},
});
return programs.map((program) => ({
url: `https://partners.dub.co/${program.slug}`,
lastModified: new Date(),
}));
}
```
Sources: [apps/web/app/sitemap.ts:20-44](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/sitemap.ts#L20-L44)
> [!IMPORTANT]
> When executing on application hostnames, the sitemap generator iterates over all values of the Prisma `Category` enum to construct category-specific directory links alongside individual marketplace program records.
Sources: [apps/web/app/sitemap.ts:78-86](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/sitemap.ts#L78-L86)
Category-specific Open Graph images are dynamically rendered using Next.js image response utilities. The category OG route extracts the `categorySlug` search parameter, matches it against `PROGRAM_CATEGORIES`, and renders a styled SVG grid layout with Inter typography and category metadata.
```tsx
export async function GET(req: NextRequest) {
const categorySlug = req.nextUrl.searchParams.get("categorySlug");
if (!categorySlug) {
return new Response("Missing 'categorySlug' parameter", {
status: 400,
});
}
const category = PROGRAM_CATEGORIES.find(
({ id }) => id.toLowerCase() === categorySlug.toLowerCase(),
);
if (!category) {
return new Response("Category not found", {
status: 404,
});
}
```
Sources: [apps/web/app/api/og/program/categories/route.tsx:15-32](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/api/og/program/categories/route.tsx#L15-L32)
### Onboarding Integration
Workspace onboarding connects new affiliate programs to the application routing flow by validating active user sessions and project domain bindings. The onboarding step retrieves domain records stored in Redis or workspace configurations, redirecting unconfigured users to domain setup before rendering the client onboarding page.
```tsx
const data = await redis.get<{ domain: string; userId: string }>(
`onboarding-domain:${workspace.id}`,
);
const onboardingDomain =
data && data.domain && data.userId === user.id ? data.domain : null;
const domain = onboardingDomain || workspace.domains[0]?.slug;
if (!domain)
redirect(`/onboarding/domain?workspace=${slug}&product=partners`);
```
Sources: [apps/web/app/app.dub.co/onboarding/onboarding/steps/program/page.tsx:38-49](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/page.tsx#L38-L49)
Workspaces lacking configured programs display an empty state component featuring partner preview cells that utilize repeating coordinate mappings over a shared asset sprite.
```tsx
const EXAMPLE_PARTNERS = [
{
name: "Lauren Anderson",
country: "US",
revenue: 1_800,
payouts: 550,
index: 0,
},
{
name: "Elias Weber",
country: "DE",
revenue: 783,
payouts: 235,
index: 4,
},
{
name: "Hiroshi Tanaka",
country: "JP",
revenue: 19_200,
payouts: 5_700,
index: 3,
},
{
name: "Mia Taylor",
country: "US",
revenue: 22_600,
payouts: 6_800,
index: 1,
},
];
```
Sources: [apps/web/app/app.dub.co/dashboard/slug/ee/program/program-empty-state.tsx:60-90](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/app.dub.co/(dashboard)/%5Bslug%5D/(ee)/program/program-empty-state.tsx#L60-L90)
## Related
- [Partner Programs](https://www.doc0.dev/docs/934e554a-e6a1-476f-bb2f-23e62d86c3fd/technical/partner-programs/partner-programs)
## Sitemap
See the full [sitemap](https://www.doc0.dev/docs/934e554a-e6a1-476f-bb2f-23e62d86c3fd/llms.txt) for all pages in this wiki.