Skip to content

README.md

Latest commit

 

History

History
124 lines (86 loc) · 4.54 KB

README.md

File metadata and controls

124 lines (86 loc) · 4.54 KB

🏷️ trafi.cc

You ARE traffic.

See how much your personal data is worth to Google, Meta, TikTok, and 60+ platforms — based on real published CPM & ARPU rates.

🌐 Try it live · 📖 Methodology · ☕ Support me

✨ What is this?

People have no idea how much their data is worth to advertisers. The answer is shockingly low — $5–200/year depending on who you are and where you live.

trafi.cc turns publicly available ad industry data into a personalized, shareable digital price tag that tells you exactly what you're worth.

📱 No signup. No data stored. Runs entirely in your browser.

🎯 How it works

1️⃣  Select your platforms    →  50+ apps across 9 categories
2️⃣  Enter your demographics  →  Age, country, device
3️⃣  Pick your interests      →  Travel, gaming, luxury, etc.
4️⃣  Get your price tag       →  Animated reveal + shareable sticker

Every number is calculated from real ARPU data pulled from SEC filings (Meta 10-K, Alphabet 10-K, Snap 10-K), eMarketer CPM benchmarks, and IAB reports.

🖼️ Features

  • 🌍 60+ platforms across AI, Social, Messaging, Shopping, Streaming, Productivity, Delivery, Dating, Finance, Health
  • 🔍 Search & bulk select — find platforms fast, select entire categories
  • 💰 Per-platform breakdown — see exactly which app profits most from you
  • 📊 Data type analysis — location, browsing, purchase intent, social graph
  • 🌎 Country comparison — how your value stacks up globally
  • 🏷️ Shareable price tag — receipt-style sticker, share via Web Share API or download
  • 🌗 Light/dark mode — system preference + manual toggle
  • 📱 Mobile-first — designed for sharing on phones
  • 🔒 Zero backend — all calculations run client-side, nothing leaves your browser

🛠️ Tech Stack
⚡ Framework Next.js 15 (App Router) — static export
🎨 Styling Tailwind CSS v4
🎬 Animations Framer Motion
🏷️ Sticker html2canvas
📝 Language TypeScript
🚀 Deploy Vercel

🏃 Run locally

git clone https://github.com/zeck00/trafi.cc.git
cd trafi.cc
npm install
npm run dev

Open http://localhost:3000

📁 Project structure

src/
├── app/                    # Next.js routes (/, /methodology)
├── components/
│   ├── landing/            # Hero page
│   ├── flow/               # Multi-step form (platforms, demographics, interests)
│   ├── result/             # Result screen (reveal, breakdown, sticker)
│   └── ui/                 # Reusable primitives (chips, toggles, theme)
├── data/                   # Embedded pricing datasets (platforms, countries, interests)
├── hooks/                  # useFlowState, useCountUp, useTheme
├── lib/                    # Calculator engine, animations, sticker generation
└── types/                  # TypeScript interfaces

📐 Methodology

The calculator uses this formula:

Your Value = Platform ARPU × Age × Device × Interest × 0.20
  • Platform ARPU — from SEC filings and earnings reports, by region (NA, EU, APAC, LATAM, MENA, ROW)
  • Age — 35-54 year olds are most valuable (1.15-1.2x); teens ~50% less due to COPPA
  • Device — iOS users command 2-3x higher CPMs, normalized to 1.2x/0.85x
  • Interests — luxury (1.6x) and investing (1.5x) are the most valuable verticals
  • 0.20x — data value fraction (your data is ~20% of what makes the ad system work)
  • 1.8x cap — combined demographic multiplier is capped to prevent unrealistic compounding
  • Family caps — Meta, Alphabet, Amazon platforms don't double-count parent ARPU

Full details with all sources at trafi.cc/methodology

💚 Support

If you found this interesting or want to help keep it running:

☕ Buy me a coffee ⭐ Star this repo 🔗 Share your price tag

📄 License

MIT

Built by Ziad 🇦🇪