Developer Portfolio

As a cricket aficionado who loves turning data into insights, I couldn't pass up the opportunity to build Cricket Stats, a personal app tailored for tracking player performances in our family and friend matches. This isn't a professional tool; it's a custom tracker that categorizes stats into batting, bowling, and fielding, complete with date filters, all-time views, and player comparisons to settle those friendly debates on who's the real star. Crafting it with Next.js, Supabase, TypeScript, Shadcn, TailwindCSS, and Tanstack Table has been an exhilarating mix of passion and tech, and I'm pumped to share the behind-the-scenes story.

Why Cricket Stats?

Cricket has been a staple in my life, from backyard games with family to casual matches with buddies, but keeping score of everyone's contributions was always a hassle—until now. I built this app to objectively analyze who excels in batting prowess, bowling strikes, or fielding finesse, using filters for specific dates or lifetime stats, and even head-to-head comparisons to reveal matchups like who dominates against whom. It's my way of adding structure to our fun, turning raw numbers into narratives that spark laughter and rivalry, all while honing my skills in data-driven web apps.

The Tech Stack: Fueling the Stats Engine

I selected a stack that excels at data handling and visualization:

Next.js: The framework foundation, enabling server-side rendering for quick, dynamic stat displays.
Supabase: Backend powerhouse for secure data storage and real-time updates on player records.
TypeScript: Ensuring code reliability with strong typing, especially crucial for stat calculations.
Shadcn & TailwindCSS: For a clean, responsive UI that makes browsing tables intuitive and visually appealing.
Tanstack Table: The star for powering interactive data tables, allowing seamless filtering and sorting.

This setup empowered me to create a robust, user-centric app focused on cricket analytics without unnecessary complexity.

Key Features: Unlocking Player Insights

Cricket Stats delivers targeted features to dissect performances:

Categorized Stats Tables: Breakdowns for batting (runs, averages), bowling (wickets, economy), and fielding (catches, run-outs) in an easy-to-read format.
Date Filters and All-Time Views: Slice data by specific periods or review career-long totals to track progress over time.
Player Comparisons: Side-by-side analysis to compare stats head-to-head, highlighting strengths like batting against a particular bowler.
Interactive Data Handling: Powered by Tanstack Table for sorting, searching, and exporting insights effortlessly.

These tools transform scattered match notes into actionable, fun insights for our cricket circle.

The Development Process: From Pitch to Pixels

I kicked things off with Next.js setup and Supabase integration to store player data securely. TypeScript kept everything type-safe as I modeled schemas for batting metrics like strike rates, bowling figures such as economy rates, and fielding stats including stumpings. Tanstack Table brought the tables to life with filters for dates and comparisons, while Shadcn and TailwindCSS styled a mobile-friendly interface that feels like flipping through a scorecard. Challenges arose in optimizing queries for large datasets to avoid lags during comparisons, but refining Supabase indexes and Tanstack's virtualization smoothed it out. Testing with simulated match data and real family games ensured accuracy, and watching comparisons reveal hidden talents was the ultimate thrill!

What I Learned

This project unpacked a wealth of knowledge:

Data Mastery: Supabase and Tanstack Table illuminated advanced querying and table management for real-world analytics.
UI for Insights: Shadcn and TailwindCSS proved how thoughtful design can make complex stats accessible and engaging.
Personalization Power: Building for a niche like cricket tracking taught me the joy of solving everyday problems with tech.
Optimization Essentials: Handling filters and comparisons sharpened my skills in performance tuning and user-centric iteration.

Conclusion

Cricket Stats is more than an app—it's a game-changer for our casual cricket sessions, blending stats with storytelling to crown the MVPs fairly. This personal project boosted my full-stack expertise and inspired thoughts of expansions, like automated inputs or advanced visualizations. It's a standout in my portfolio, demonstrating how I can craft practical tools that blend hobby with high-tech flair!