Zik4U Web — Public Site & Creator Marketplace

Public website for Zik4U, the music social network. Three acquisition tunnels (listeners, creators, fans), creator discovery, public profile cards and legal pages. No payment on the site: creator subscriptions are store in-app purchases in the mobile app. Shares the same Supabase backend as the mobile app.

Routes

Route	Description
/	Landing — triple-door entry (Listener / Creator / Fan), "For real" taglines
/listeners	Listener tunnel — "What are they listening to. For real." + features + store CTAs
/creators	Creator acquisition funnel — benefits, pricing tiers, 4-step how-to
/fans	Fan discovery — search creators, WHAT_YOU_GET pills, store CTAs
/users	Legacy alias for /fans — kept for existing links
/become-creator	Server-side redirect → /creators
/creator/[username]	Public creator profile — "What you get" pills, tiers carousel (mobile) / grid (desktop)
/legal/privacy	Privacy Policy (GDPR + CCPA, 11 sections)
/legal/terms	Terms of Service (12 sections)
/card/[username]	Share-to-install — Now Card preview (mood + last track + top artist + streak), OG metadata, store CTAs, deep link
/not-found	Custom 404 — "This track doesn't exist."
/og-image.png	Link preview (1200×630, "Empreinte A" logo)
/favicon.ico	Favicon ("Empreinte A" logo, 16/32/48)
/sitemap.xml	Static routes + dynamic creator profiles + /card/ pages (limit 500)
/robots.txt	Crawl allowed, /api/ excluded

Tech Stack

Technology	Version	Purpose
Next.js	16.1.6	Framework (App Router, Server Components)
TypeScript	5	Language
Tailwind CSS	4	Styles via @tailwindcss/postcss — no tailwind.config.ts
Supabase JS	2	Auth + DB (shared backend with mobile app)
Framer Motion	12	Animations (whileHover, whileInView, AnimatePresence)
Radix UI	—	Dialog, Tabs primitives
Lucide React	—	Icons
react-hot-toast	—	Toast notifications

Project Structure

src/
  app/
    /                      # Landing (triple-door: Listener / Creator / Fan)
    /listeners             # Listener tunnel — hero + features + store CTAs
    /creators              # Creator acquisition funnel
    /fans                  # Fan discovery — search + WHAT_YOU_GET + store CTAs
    /users                 # Legacy — kept for existing links
    /become-creator        # Server redirect → /creators
    /creator/[username]    # Public creator profile + tiers
    /legal/privacy         # Privacy Policy (Server Component, 11 sections)
    /legal/terms           # Terms of Service (Server Component, 12 sections)
    /card/[username]       # Share-to-install Server Component — Now Card + store CTAs
    /not-found             # Custom 404 page
    favicon.ico            # "Empreinte A" favicon (16/32/48)
    /sitemap.xml           # Static + dynamic sitemap
    /robots.txt            # Crawl rules
    layout.tsx             # Root layout + SEO metadata
    globals.css            # Tailwind v4 @theme tokens + .gradient-text classes
  app/creators/layout.tsx  # SEO: "For Creators — Monetize Your Real Music Taste"
  app/listeners/layout.tsx # SEO: "For Listeners — Discover Who Listens Like You"
  app/fans/layout.tsx      # SEO: "Find a Creator — See What They Really Listen To"
  components/
    landing/
      CreatorCard.tsx      # Search result card (avatar, artists, price, "✦ Featured" badge)
      TierCard.tsx         # Subscription tier card (popular badge, cyan CTA for non-popular)
    auth/
      AuthModal.tsx        # Auth modal (Google OAuth + Email sign in/sign up)
  lib/
    supabase.ts            # Supabase client
    creators.ts            # searchCreators, getFeaturedCreators (Promise.all + dedup), getCreatorProfile
    seo.ts                 # defaultMetadata, generatePageMetadata, generateCreatorMetadata
  types/
    index.ts               # CreatorProfile, CreatorTier, SearchResult (+ isFeatured: boolean)
public/
  og-image.png             # Link preview ("Empreinte A" logo)
  zik4u-logo.svg           # Nav and footer logo ("Empreinte A")

Getting Started

Prerequisites

• Node.js >= 18
• A Supabase project (shared with the mobile app)

Installation

git clone https://github.com/chardinne/Zik4U-web.git
cd Zik4U-web
npm install

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=https://qjrwjdlqlmyliinfjjic.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>
NEXT_PUBLIC_SITE_URL=http://localhost:3000   # https://zik4u.com in production
SUPABASE_SERVICE_ROLE_KEY=<service-key>     # server-only (publicProfile, sharedCard, waitlists)

Development

npm run dev
# → http://localhost:3000

Production Build

npm run build
npm run start

Copy Strategy

The site is built around one idea: "For real" — every listen is real, every connection is real, every dollar is earned from real data.

Declined across all tunnels:

• / buttons: "Listener / Creator / Fan" + "... For real."
• /listeners: "What are they listening to. For real."
• /creators: "What do you listen to? For real. / Now you get paid for the answer."
• /fans: "See what they listen to. For real. Before anyone else."
• /card/[username]: "Real music. Real identity. For real."

No em dashes (—) in user-facing text — replaced by ., :, , or ·.

Share-to-Install Flow (/card/[username])

Mobile app InviteScreen  →  Share.share({ url: 'https://zik4u.com/card/:username' })
                             OR copy to clipboard
  ↓
/card/[username]  (Server Component)
  Fetches: profiles (display_name, avatar, current_streak)
           scrobbles (last played — played_at DESC LIMIT 1)
           get_user_top_artists RPC (limit 1)
  Renders: mood gradient card (5 moods based on UTC hour)
           last track + top artist + streak badge
  ↓
CTAs:
  → App Store (id6748722257)
  → Google Play (com.zik4u.app)
  → zik4u://profile/:username (deep link — opens app if installed)

OG metadata is generated server-side per user (generateMetadata), enabling rich link previews on iOS/Android when the URL is shared via WhatsApp, Messenger, iMessage, etc.

Featured Creators

getFeaturedCreators() runs two parallel queries:

1. users WHERE is_featured = true LIMIT 6
2. users LIMIT 12

Results are merged and deduplicated (featured first). The is_featured flag is set manually in Supabase Dashboard → Table Editor → users. CreatorCard displays a "✦ Featured" badge (gradient #FF3CAC → #7B2FFF) for featured accounts.

Design System

• Palette: cyan #00D4FF, mint #00FFB2, pink #FF3CAC, violet #7B2FFF
• Backgrounds: #0A0A1A (page), #12122A (cards), #1A1A35 (hover)
• Font: Inter
• Gradient brand: #00D4FF → #00FFB2 → #FF3CAC
• Gradient creator: #FF3CAC → #7B2FFF
• Custom CSS classes: .gradient-text, .gradient-text-creator

Tailwind v4 tokens are declared in src/app/globals.css via @theme. Brand colors use inline style={{}} for reliability with the Tailwind v4 JIT compiler.

Security

• Security headers in next.config.ts (X-Frame-Options DENY, CSP, Referrer-Policy, Permissions-Policy)
• images.remotePatterns: images.unsplash.com + *.supabase.co
• No payment and no B2B routes on the site (B2B-OFF1): CSP connect-src limited to Supabase, frame-src 'none'
• User inputs sanitized before Supabase queries: query.trim().slice(0, 100)
• No secrets in client-side code — only NEXT_PUBLIC_* variables are exposed

Deployment (Vercel)

1. Push to main → Vercel deploys automatically
2. Set environment variables in Vercel Dashboard → Settings → Environment Variables
3. Configure custom domain: zik4u.com
4. DNS (Hostinger): A @ 76.76.21.21 + CNAME www cname.vercel-dns.com — full procedure: docs/HOSTINGER_VERCEL_DNS.md

Relation to Other Repos

Repo	Role	URL
Zik4U	React Native mobile app (iOS + Android)	App Store / Google Play
Zik4U-web	This repo — public site, profile cards, legal pages	zik4u.com
Zik4U-admin (private)	Internal back-office — runs on the administrator's workstation only, never published	—
Zik4U-api (private)	Future B2B (labels) service — dormant, not deployed	—

All four share the same Supabase project (qjrwjdlqlmyliinfjjic).