Maaz

Posted on Mar 2

We Built India's Base Directory. Next Stop: The World 🌍

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

Base Builders in India

When Coinbase announced Base Batch 003—a worldwide competition offering funding and startup opportunities—I noticed something troubling: there was zero visibility of Indian builders. No projects. No founders. No track record. It was as if we didn't exist.

But we did exist. And we were building.

I reached out to the Base India team asking if there was a directory of Indian builders. They admitted there wasn't one, but they were thinking about creating it. That's when we saw the opportunity—why wait? We grabbed it and said, "We'll ship it."

And we did. We built BaseCircle.club — the first comprehensive directory showcasing 400+ projects and 500+ founders building on Base from India.

This isn't just a directory. It's proof that Indian builders are here, shipping, and contributing meaningfully to the global Base ecosystem. It's a home for a community that was invisible—now thriving.

What started in India is now going global. We're in active discussions with Base's global leadership to expand this model worldwide. While Base.org showcases top projects, BaseCircle is building for everyone—the early builders, the first-time hackers, the side projects that might become the next big thing.

What I Built

BaseCircle.club — A proof-first directory and founder network for India's Base ecosystem.

🎯 Core Features

1. Project Directory (400+ Projects)

Curated listing of Indian projects built on Base blockchain
Category filtering: AI, DeFi, Gaming, Infrastructure, NFTs, Social, Payments, DAOs
Batch tracking across multiple hackathons:
- Base Batch India
- Based India
- Builder Track 002
- Build Onchain FBI
- Onchain AI BLR
- ClawdKitchen
- Independent projects
Proof-first approach: Every project includes links to:
- GitHub repositories
- Live demos/URLs
- Smart contracts
- Twitter/X profiles
- YouTube demos
- Prize wins and recognition

2. Founders Network (500+ Builders)

Individual founder profiles with:
- Bio and expertise
- Projects built
- Hackathons attended
- Prizes won
- Social links (Twitter, GitHub)
- Skills and interests tags
Interactive India Map: Visualize where builders are located across the country
Founder Matching Algorithm: Discover similar builders based on:
- Geographic proximity (same city = +40 points)
- Shared technical interests and tags (+15 points per match)
- Match percentage displayed for easy networking

3. Interactive Visualizations

Particle Text Hero: Interactive animated title with mouse-responsive particles
Pixel Blast Background: Dynamic pixel animation with ripple effects
Founders Circle: Base logo in center surrounded by founder avatars on concentric circles
Geographic Map: Leaflet-based India map showing founder locations with city markers
Project Carousel: Auto-scrolling showcase of featured projects with drag interaction

4. Telegram Bot Integration

Easy Submissions: Submit projects via @awesome_base_India_bot
Profile Management: Founders can edit their profiles through conversational interface
Four submission types:
- New project submission
- New founder profile
- Update existing project
- Update existing founder profile
Structured data collection: Bot guides users through all required fields
Supabase backend: All submissions stored for review and verification

5. Discovery & Search

Real-time search across projects and founders
Multi-level filtering:
- Primary categories (11 categories)
- Sub-filters within each category (e.g., DeFi: DEX, AMM, Yield, Staking, etc.)
- Batch filters
Tag-based navigation
Prize winner highlighting

6. Direct Founder Connect

One-click access to reach any builder on X (Twitter)
Email and social profile links
Project collaboration discovery
Similar founder recommendations

7. Design & UX

Dark/Light Mode: Full theme switching support
Smooth Scroll: Lenis-powered smooth scrolling throughout
Motion Design: Framer Motion animations for delightful interactions
Responsive: Mobile-first design that works beautifully on all devices
Performance: Next.js 14 App Router with optimized rendering
Accessibility: Semantic HTML, ARIA labels, keyboard navigation

📊 By The Numbers

400+ Projects catalogued with proof links
500+ Founders with detailed profiles
Real Users: Active community using the platform (Launch tweet | Community feedback)
11 Categories spanning the entire Web3 stack
8 Batches tracked including major hackathons
50+ Cities represented across India
Zero Pay-to-Win: Pure meritocracy—shipped projects only

🛠️ What Makes It Different

For Everyone, Not Just The Winners

Base.org highlights top projects. BaseCircle features ALL builders.
Your first hackathon project? You're in.
Experimenting with an idea? You belong here.
Stuck on a problem? See how others tackled it.
This is where builders come to learn, share, and grow together.

Proof-First, Not Hype-First

Every project requires verifiable links (GitHub, demo, contract)
No promotional spam—only shipped products (MVP counts!)
Prize winners get special badges
Quality over quantity

Built For Builders, By Builders

Made by builders who understand the struggle
No middlemen, no gatekeepers
Easy submission via Telegram—no complex forms
Community-curated and verified
Real community: See how others solved problems, ask for help, collaborate

Solves Real Problems

Discovery: Early projects get buried on Twitter. Here, they're showcased.
Learning: Browse how others built similar features or tackled challenges
Networking: Find builders in your city or with similar interests
Credibility: Prove to the world that India is shipping on Base
Opportunity: Get discovered by VCs, collaborators, and the Base team

Demo

🌐 Live Site: https://basecircle.club

Key Pages to Explore

Homepage (/):
- Interactive particle text hero
- Featured project carousel
- How it works section
Full Directory (/directory):
- All 400+ projects with filtering
- Category and batch filters
- Tag-based sub-filtering
Founders Map (/founders):
- Interactive India map with city markers
- Search founders by name, city, project, or skills
- Click any founder to see similar builders
Individual Founder Profiles (/founders/[username]):
- Full bio and background
- Project showcase
- Hackathon stats
- Direct contact links
About (/about):
- Team behind Base India Circle
- Partnership with Inner Circle community
Submit (/submit):
- Redirects to Telegram bot for easy submissions

Video Walkthrough

Browsing the project directory with filters
Exploring the interactive founders map
Viewing a founder profile and discovering similar builders
Submitting a project via Telegram bot
The beautiful animations and interactions

Code

https://github.com/somewherelostt/awesome-base-india

Repository Highlights

Tech Stack:

Frontend: Next.js 14 (App Router), React 19, TypeScript
Styling: Tailwind CSS 4, Custom CSS animations
Animations: Framer Motion, GSAP, Lenis smooth scroll
3D Graphics: Three.js, React Three Fiber
Maps: Leaflet, React Leaflet
Backend: Supabase (PostgreSQL)
Bot: Node.js Telegram Bot API
Content: MDX for founder profiles and project pages
Deployment: Vercel (recommended)

Key Architecture:

├── app/                       # Next.js App Router pages
│   ├── page.tsx              # Hero + featured projects
│   ├── directory/            # Full project catalog
│   ├── founders/             # Map view + profiles  
│   ├── submit/               # Telegram bot redirect
│   └── about/                # Team info
├── components/               # Reusable React components
│   ├── home-sections.tsx     # Hero, How It Works
│   ├── product-grid.tsx      # Project cards + filters
│   ├── founders-pals-view.tsx # Map + founder matching
│   ├── particle-text.tsx     # Interactive hero text
│   ├── pixel-blast.tsx       # Animated background
│   └── india-map.tsx         # Geographic visualization
├── content/
│   ├── founders/*.mdx        # 500+ founder profiles
│   └── projects/*.mdx        # Future: project pages
├── lib/
│   ├── data.ts               # Project & founder data
│   ├── projects-from-devfolio.json  # Scraped data
│   ├── projects-resolved.ts  # Logo resolution
│   └── founder.ts            # Founder utilities
├── telegram-bot/             # Submission bot
│   └── src/                  # Bot logic + Supabase
└── scripts/                  # Data scraping & seeding
    ├── devfolio-scraper/     # Auto-import projects
    ├── seed-directory-to-supabase.ts
    └── generate-project-mdx.ts

Notable Features in Code:

Automatic Project Import: Devfolio scraper (scripts/devfolio-scraper/) automatically extracts project data from hackathon pages, including:
- Project metadata
- Founder information
- Prize wins
- Social links
- Full descriptions
Dynamic Logo Resolution (lib/projects-resolved.ts): Intelligently fetches project logos from multiple sources (Devfolio CDN, local assets, fallback placeholders)
Founder Matching Algorithm (components/founders-pals-view.tsx):

   function matchScore(a: FounderForPals, b: FounderForPals): number {
     let score = 0;
     if (a.city === b.city) score += 40;  // Same city
     const aTags = new Set(a.tags);
     const bTags = new Set(b.tags);
     for (const t of aTags) {
       if (bTags.has(t)) score += 15;     // Shared interests
     }
     return Math.min(99, score);
   }

Smooth Carousel (components/product-grid.tsx): Auto-scrolling infinite carousel with:
- Drag interaction
- Velocity-based momentum
- Seamless looping
- Responsive card sizing
Telegram Bot Flow (telegram-bot/src/):
- Conversational submission
- Field validation
- Supabase integration
- Edit functionality with unique IDs

How I Built It

🎯 The Journey

This platform wasn't built during the weekend challenge—it was already live and serving the community before the competition started. But the story of how it came to exist is worth sharing:

The Origin (Pre-Challenge)

Week 1-2: The Problem

Discovered the visibility gap when Base Batch 003 was announced
Noticed zero Indian projects visible on Coinbase's website
Reached out to Base India team—they confirmed no directory existed
Decided to grab the opportunity and ship it ourselves

Week 3: Foundation Sprint

Built Devfolio scraper to extract 400+ projects from multiple hackathons
Set up Next.js 14 architecture with TypeScript
Manually verified and curated project data
Created initial directory with filtering system

Week 4: Founder Network

Generated 500+ founder profiles from hackathon participants
Built interactive India map with city markers
Implemented founder matching algorithm
Created individual founder profile pages using MDX

Week 5: Polish & Features

Added particle text hero and pixel blast animations
Built auto-scrolling project carousel
Implemented Telegram bot for easy submissions
Integrated Supabase backend for submission management
Added dark/light mode and smooth scrolling

Week 6: Launch

Deployed to production at basecircle.club
Shared with Base India community
Onboarded first wave of projects and founders
Started getting organic submissions via Telegram bot

Ongoing: Growth & Impact

400+ projects now catalogued
500+ founders with profiles
Real users actively engaging with the platform:
- Launch announcement getting community traction
- Builders discovering and using the directory
Active submissions every week via Telegram bot
Becoming the go-to resource for Base India ecosystem
Featured by community members and builders

🏃 Why This Fits The Challenge

Even though BaseCircle.club was built before this weekend, it perfectly embodies the challenge's spirit:

"Build for Your Community" ✅

Built specifically for Indian builders on Base
Solved a real visibility problem we personally experienced
Made discovery and networking easier for our peers

Real Problem, Real Solution ✅

Indian builders were invisible in the global Base ecosystem
Early projects couldn't get traction on Twitter
No way to find other builders in your city or with similar interests

Genuine Impact ✅

400+ projects now discoverable
Active user adoption: Real builders using and sharing the platform (proof)
Founders finding collaborators through the matching system
Community members discovering projects they didn't know existed (example)
Base India team uses it as official reference
VCs and investors discovering Indian talent

🔧 Technical Challenges Solved

1. Logo Management

Problem: 400+ projects with logos from different sources (Devfolio, local files, URLs)
Solution: Built smart logo resolution system that checks multiple sources and serves optimized versions

2. Performance with Large Datasets

Problem: Rendering 400+ project cards would be slow
Solution:
- Implemented virtual scrolling for directory
- Lazy loading with Intersection Observer
- Optimized animations with will-change CSS
- Server-side rendering (SSR) for better initial load

3. Map Clustering

Problem: Multiple founders in same city would overlap
Solution: Leaflet marker clustering with custom styling

4. Real-time Search

Problem: Searching across 500+ founders and 400+ projects
Solution: Client-side indexed search with useMemo optimization

5. Content Management

Problem: Need easy way for founders to update profiles
Solution: MDX + Telegram bot workflow with Supabase as intermediate storage

6. Data Scraping

Problem: Manually adding 400+ projects is tedious
Solution: Built automated Devfolio scraper that extracts structured data from hackathon pages

🎨 Design Philosophy

Community-First

No paywalls or premium tiers
No advertising or sponsored placements
Pure meritocracy based on what you've shipped

Proof Over Hype

Every project must have verifiable links
GitHub repos, live demos, or smart contracts required
Prize winners get recognition but not preferential placement

Builder-Friendly

Simple Telegram bot for submissions (no complex forms)
Edit your own profile anytime
Open source and transparent

Delightful Interactions

Smooth animations that feel premium
Interactive elements that respond to user input
Beautiful design that showcases the work

🚀 What's Next: Going Global

We're in talks with Base's global leadership to bring this model worldwide.

Base.org is perfect for showcasing top projects. But what about everyone else? The 90% of builders who ship MVPs, experiment, learn, and grow? That's where BaseCircle comes in.

Short-term (Next 3-6 Months):

Expand to Southeast Asia: Philippines, Indonesia, Vietnam, Thailand
Launch Base Africa: Nigeria, Kenya, South Africa, Ghana
Base LATAM: Brazil, Argentina, Mexico
Add project comparison and "how they built it" features
Build collaboration board where builders can ask: "How did you solve X?"
Q&A and troubleshooting section

Long-term (The Vision):

One Global Directory for ALL Base builders, regardless of traction
Regional hubs with local language support
Knowledge base: "How I built this" case studies from every project
Mentorship matching across regions and expertise
Job board connecting Base ecosystem opportunities
DAO governance for community-driven curation
API for external integrations

The Goal: Make BaseCircle the place every builder comes to:

📝 Submit their project (no matter how small)
👀 See what others are building
💡 Learn how they tackled similar problems
🤝 Find collaborators and get help
🌍 Be part of a global builder community

Why This Matters

Not everyone building on Base will be a unicorn. But everyone deserves to be seen.

Base.org highlights the top 1%. BaseCircle is for the other 99%—the builders shipping MVPs, learning in public, experimenting with ideas, and growing together.

Before BaseCircle.club, Indian builders were invisible. Now, we have undeniable proof: