🏏 CrickSquad — The App That Replaced 50 WhatsApp Messages for My Cricket Group

This is a submission for the DEV Weekend Challenge: Community

The Community

I'm part of a weekend cricket group of 25 people. Every Sunday at 7 AM, we play cricket at a local turf ground. It's been going on for 3 years now — rain or shine.

But here's the thing nobody talks about: organizing a casual cricket match is harder than playing it.

Every single week, the same chaos unfolds:

🔴 WhatsApp Hell

"Who's coming this Sunday?"
50+ messages later... still no clear count.

🔴 Team Selection Drama

"Last time teams were unfair!"
"Why am I always bowling first?"
Every. Single. Week.

🔴 Money Collection Nightmare

"Bro, you haven't paid for the last 3 matches"
"I paid! Check the chat"
scrolls through 500 messages

🔴 No Memory of Performance

"How many runs did I score last month?"
Nobody knows. No records. No stats.

🔴 Zero Recognition

Score 50 runs on Sunday. By Monday, nobody remembers.
Attendance drops because people feel "it doesn't matter."

I know millions of weekend sports groups around the world face the same problems. So this weekend, I decided to fix it.

---

What I Built

🏏 CrickSquad — Less WhatsApp. More Cricket.

An all-in-one web app for weekend cricket groups that handles everything from RSVP to AI-powered match reports.

One app to replace 50 WhatsApp messages every weekend.

Core Features:

🎯 One-Tap RSVP
No more "who's coming?" chaos. Open the app, tap Yes/No/Maybe. Done. Everyone sees the count in real-time with a countdown to the deadline.

⚖️ Smart Team Balancer
Every player has skill ratings (batting, bowling, fielding). The algorithm creates the most balanced 2 teams possible. No more "unfair teams" complaints. Ever.

🤖 AI-Powered Features (Gemini)
This is where it gets fun:

• AI Team Analysis — Gemini explains why the team split is balanced
• AI Match Reports — Commentary-style match summaries after every game
• AI Player Insights — "You're the Virat Kohli of your group!" with actual improvement tips
• AI POTM Suggestions — Top 3 Player of Match candidates with reasoning
• Smart Reminders — Personalized nudge messages for pending RSVPs
• Season Analytics — Trends, fun facts, predictions

💰 Expense Splitter
Set ground cost → auto-split among players → track who paid → send reminders. Running balances across multiple matches so you always know who owes what.

📊 Scorecards & Leaderboards
Enter batting/bowling stats after each match. Auto-calculated averages, strike rates, economy rates. Season leaderboards with medals 🥇🥈🥉

🎲 Digital Toss
Animated coin flip. No more "my coin, my call" disputes.

📢 Polls & Announcements
"Should we play Saturday instead?" — Quick polls with deadlines. Important announcements that don't get buried in chat.

📸 Match Gallery
Upload and share photos from every match. Organized per game day.

🏟️ Venue Management
Save venues with address, Google Maps link, facilities, pricing. One-tap directions.

🔥 Mail System
When admin creates poll, announcement, pay notifications, new match alert.

---

Demo

🔗 Github Code: https://github.com/TheCoderAdi/cricksquad

Screenshots:

Project Haul

Excalidraw Whiteboard

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

excalidraw.com

Landing Page

Dashboard — Upcoming Match + RSVP

Team Balancer — AI-Powered Fair Teams

Leaderboard — Season Stats

AI Match Report

Expense Tracker

Scorecard

Profile + AI Player Insights

Venue Page

Match Gallery

---

Key Algorithms

Team Balancer Algorithm:

const balanceTeams = (players) => {
  // Sort by overall rating (descending)
  const sorted = [...players].sort((a, b) => b.overallRating - a.overallRating);

  let teamA = [], teamB = [];
  let ratingA = 0, ratingB = 0;

  // Greedy assignment: add to weaker team
  for (const player of sorted) {
    if (ratingA <= ratingB) {
      teamA.push(player);
      ratingA += player.overallRating;
    } else {
      teamB.push(player);
      ratingB += player.overallRating;
    }
  }

  // Role balancing pass (ensure bowlers are distributed)
  // ... swap players to balance roles without hurting ratings

  return { teamA, teamB };
};

Skill Rating System:

// Weighted by player role
const weights = {
  batsman:    { batting: 0.5, bowling: 0.2, fielding: 0.3 },
  bowler:     { batting: 0.2, bowling: 0.5, fielding: 0.3 },
  allrounder: { batting: 0.35, bowling: 0.35, fielding: 0.3 },
  keeper:     { batting: 0.4, bowling: 0.1, fielding: 0.5 }
};

overallRating = batting * w.batting + bowling * w.bowling + fielding * w.fielding;

Gemini AI Integration:

const { GoogleGenerativeAI } = require('@google/generative-ai');
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

const generateMatchSummary = async (matchData) => {
  const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
  const prompt = `You are a cricket commentator. Write a fun match report...`;
  const result = await model.generateContent(prompt);
  return result.response.text();
};

---

How I Built It

Tech Stack

Layer	Technology	Why
Frontend	React + Vite	Fast dev experience, instant HMR
Styling	Tailwind CSS	Rapid UI development
State	Zustand	Lightweight, no boilerplate
Data Fetching	React Query + Axios	Caching, loading states
Animations	Framer Motion	Smooth page transitions
Backend	Node.js + Express	Fast REST API development
Database	MongoDB + Mongoose	Flexible schema for cricket data
AI	Google Gemini	Fast, accurate, free tier
Image Storage	Cloudinary	Auto-compression, CDN delivery
Auth	JWT + bcrypt	Secure, stateless authentication

Architecture

React → Axios → Express API → MongoDB Atlas
                                    ↓
                              Gemini AI API
                              Cloudinary CDN

Development Timeline

When	What	Hours
Friday Evening	Project setup, DB models, Express config	3h
Saturday Morning	Auth, Groups, Matches, RSVP APIs	5h
Saturday Afternoon	Teams, Expenses, Scorecard, Leaderboard APIs	5h
Saturday Evening	Frontend: Auth, Dashboard, RSVP pages	4h
Sunday Morning	Frontend: Teams, Expenses, Scorecard, Leaderboard	5h
Sunday Afternoon	Gemini AI integration, Polls, Gallery	5h
Sunday Evening	Polish & write this post	3h
Total		~30h

Challenges & Learnings

1. Team Balancing is NP-hard 😅
Turns out, perfectly splitting teams is a partition problem. The greedy algorithm works surprisingly well for groups under 30. Adding a role-balancing second pass made it even better.

2. Gemini AI JSON Responses
Getting Gemini to consistently return valid JSON was tricky. I added replace(/`json\n?/g, '') cleanup and wrapped everything in try-catch with user-friendly fallbacks.

3. Real-Time Feel Without WebSockets
Instead of adding Socket.io complexity, I used React Query's refetchInterval for the RSVP page. Feels real-time, fraction of the complexity.

4. Mobile-First is Non-Negotiable
Cricket groups use WhatsApp on phones. If this app isn't phone-friendly, nobody will use it. Every component was designed thumb-first.

---

What's Next

If the cricket group likes it (they will 😎), here's what I'd add next:

• 📱 React Native mobile app with push notifications
• 💬 WhatsApp API integration for automated reminders
• 🏏 Ball-by-ball live scoring
• 📊 Season playoffs & tournament mode
• 🎥 AI-generated highlight reels from uploaded videos
• 💳 UPI payment integration (India-specific)

---

The Real Test

I shared this with my cricket group yesterday. Within 10 minutes:

• 22 out of 25 members had joined
• 18 RSVPs for this Sunday
• Zero WhatsApp messages about "who's coming?"

That's the real demo. 🏏

---

Built with ❤️ and way too much coffee during the DEV Weekend Challenge.

If you play weekend cricket (or any weekend sport), drop a comment — I'd love to hear about the chaos in YOUR group! 😄