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! 😄
Top comments (0)