Site published to:
https://fandom-mapper-ph1-634174038368.europe-west2.run.app
demo@demo.com / devpost to login to the demo account.
You can signup and login with Google but please contact me vanillabrand@gmail.com as i will need to approve the account before you can use it. Demo account should give you everything you need though :)
Inspiration
Fandom Mapper: The "Social Sonar" for Dark Matter Influence
Inspiration
In a world drowning in "vanity metrics"—where everyone is shouting but nobody is listening—finding genuine connection is surprisingly hard. Traditional tools just count how loud people are. We wanted to build a "social sonar" that maps who is actually listening.
We built Fandom Mapper to reveal the "dark matter" of the internet: the rising stars, the weirdly specific subcultures, and the unexpected connections that algorithms completely miss. We wanted to take boring, flat spreadsheets of data and turn them into a living, breathing 3D universe you can actually explore.
Who is this for? (And why should you care?)
We didn't just build this for fun (though it was fun). We built it to solve real headaches for people flying blind in the social landscape:
1. For Marketers: Precision Sniper vs. Shotgun
The Headache: Privacy changes (RIP cookies) have broken traditional targeting. You're stuck throwing money at broad, expensive demographics and hoping something sticks. The Fix: We map interest graphs, not tracking pixels. Find the "Gorpcore" enthusiasts or "Sustainable Maximalists" who naturally love what you sell. Target passions, not just people.
2. For Agencies: Prove It Before You Pitch It
The Headache: Pitching a bold creative strategy is scary. Clients want proof, not just "vibes." The Fix: Give them visual proof of culture. Show your client a 3D map of their audience. "See this cluster here? That's your growth opportunity." It turns a hunch into hard data.
3. For Consultancies: Spotting the Wave Before it Crashes
The Headache: By the time a "Trend Report" is published, the trend is dead. The Fix: This is a real-time cultural radar. Spot the "dark matter" influencers—the underground leaders shaping culture—before they hit the mainstream. Be the one telling the client what's next, not what just happened.
What it actually does
Fandom Mapper is an intelligent engine that visualizes the "Fandom Universe" of any Instagram or TikTok profile.
- The "Social Sonar" (3D Graph): It sounds cool, but it's also practical. We use a high-performance 3D engine to let you physically fly through a community. You can literally see the distance between different subcultures.
- Visual DNA: Most tools just read text. Ours has eyes. We use Gemini 3 Pro to look at public profile pictures and top posts, tagging them with aesthetic vibes (e.g., "Y2K Cyber," "Cottagecore"). It understands why people connect, not just that they connect.
- It "Thinks" for Itself: Our Orchestrator isn't just a script; it's an agent. It decides when to dig deeper into a niche or when to pull back, dynamically adjusting its strategy based on what it finds.
- Proprietary Metrics: We calculate "Engagement Velocity" and "Cult Scores" to find the people with real pull, ignoring the bots and bought followers.
How we built it
We wanted to prove that you can build something "enterprise-grade" that still feels like magic.
The Stack
- The Brain: Google Gemini 3 Flash & Pro. We use
gemini-3-flash-previewfor the fast, logical stuff (orchestration, JSON parsing) because it's insanely quick and deterministic. For the creative stuff—like analyzing vibes and subcultures—we switch togemini-3-pro-preview. - The Face: React 19 + Three.js. Rendering 5,000+ nodes at 60fps in a browser isn't easy. We used instanced mesh rendering to make sure it runs smooth as butter.
- The Muscle: Node.js (TypeScript). A custom-built "Job Orchestrator" that handles the messy reality of scraping—errors, rate limits, and retries—so the user doesn't have to.
- The Memory: MongoDB for graph data and Apify for the raw inputs.
Why it's technically interesting
- Self-Healing Code: If a scraper fails (and they always do), our Orchestrator notices the data looks "hollow" and automatically patches the plan, adding new steps to fix the gap. It repairs itself in real-time.
- Cost-Aware: We built a "Pre-Flight Auditor" that calculates the cost of a job before it runs. It helps users budget their "credits" so they don't accidentally spend $50 on a single search.
The "Wow" Factor
Visual DNA is our favorite part. Standard tools will tell you two people follow the same account. Fandom Mapper tells you they both share a "Minimalist Beige Aesthetic" and likely shop at the same furniture stores.
By using Gemini to process images, we unlocked a layer of social data that was previously invisible. It turns abstract connections into a visual story.
Demo & Setup
Architecture
graph TD
User[User Query] -->|1. "What do they want?"| Gemini[Gemini 3.0 Flash]
Gemini -->|2. "Here is the plan"| Orchestrator[Job Orchestrator]
Orchestrator -->|3. "Go get the data"| Scrapers[Apify Scrapers]
Scrapers -->|4. Raw JSON| Ingestion[Data Ingestion]
Ingestion -->|5. "What are the vibes?"| VisualGemini[Gemini 3 Pro (Multimodal)]
VisualGemini -->|6. "Aesthetic Tags"| DB[(MongoDB)]
DB -->|7. Physics $F=ma$| Frontend[React Three.js 3D Graph]
How We Used Gemini
We didn't just sprinkle AI on top. Gemini is the engine.
- The Strategist: Gemini 3.0 Flash takes a vague request ("Find microinfluencers within the @googledeepmind community") and turns it into a rigorous, multi-step execution plan.
- The Analyst: We use Gemini to cross-reference our data, making sure every line on the graph has a verifiable source.
- The Critic: Gemini 3 Pro looks at the content itself to tell us what we are looking at.
Log in or sign up for Devpost to join the conversation.