Football Tournament Manager banner

Football Tournament Manager

8 devlogs
53h 17m 58s

Rebuilding My Football Tournament Manager(This time Using Typescript, and Supabase, Learning as I go on💪)

This is A comprehensive tournament management platform for competitive Football players and even Gamers. Track your local leagues with real-time standings, individual player statistics, AI-powered match predictions, and professional-grade analytics.

Core Features:

Tournament Formats: Round-robin leagues, knockout brackets, and hybrid Champions League-style competitions
Player Stats: Track goals, assists, clean sheets, and form for individual players within squads
AI Oracle: Gemini-powered predictions and tactical analysis based on form, stats, and match history
Squad Builder: Visual formation editor with drag-and-drop positioning
Analytics: Title race charts, goal distribution graphs, and golden boot/glove tracking
Built for friends groups, gaming communities, and competitive leagues who want to elevate their virtual football tournaments beyond WhatsApp spreadsheets.

Loading README...

Abdulgafar Abdurrasheed

Learnt How to write test, wrote tests for the authentication process, that I have been working on for the past 30 hours( and Yeah. I’on like writing tests 😭😭). Fixed a bug that the test exposed, and yeah. This is currently in a good state I guess. Also integrates Sentry, and created an error boundary component. On fire 🔥🔥

Attachment
0
Abdulgafar Abdurrasheed

Created a profile page(Users can now view and edit their profiles), added sentry for error tracking, and enhanced the UI more and more. Used framer motion to add more animations(I’m playing around with this a lot), and added responsiveness for different screen sizes. Reduced animations for mobile, with an option to remove them entirely. Fixed a Bug where Profiles refuse to update when an profile picture change is added(Just removed Profile picture changing for now, I’ll get back to it later.)

Attachment
0
Abdulgafar Abdurrasheed

Have completed the Authentication UI. Users can now Login, Sign Up, and all that without any Problems. Used Framer motion for Smooth Opening of Authentication Modals. Finally Getting the Hang of Supabase, typescript, and the Frontend, Backend communications with one another. Going into creating tournament Features Now. Probably Gonna ship after the next Phase. I’d say i’m currently about 20% done with the whole thing, and in 40 hours is record time(Considering I’m just learning). Dealt with A LOT of typescript bug, and consulted AI A WHOLE LOT. But it’s all fine and good init? My Idea, My Code, My Project.

Attachment
Attachment
0
Abdulgafar Abdurrasheed

Created the UI for the Login, and Sign up pages, Connected it to the Backend, Added email confirmation link, Created the Routes to said pages, and Some more stuff. Had a heck of a problem creating a working supabase project that uses google OAuth.

0
Abdulgafar Abdurrasheed

Finished all Auth Processes on the Backend side of things(What is Featured in the image is just the testing Page.), Yay 🎉🎉. The next few hours will bring the authentication pages, and all of the cool UI side of stuff, And from there, we Cruise on.

As Someone who didn’t know a lick of Databases and their technicalities prior to this, Really Learning a lot. That’s why to the seasoned people, I probably look slow 🐌🐌(I asked around, and getting to where I currently am in the project, should normally take 10–>15 hours. It’s taken me 26 ☠☠). Anyways, Catch you Guys Later.

Attachment
0
Abdulgafar Abdurrasheed

Finally Ready for my first Devlog after 15 Hours ☠☠

From Zero to React Hero (Supabase Edition)

What I Built This Phase Starting from scratch, I’ve set up a complete React (TypeScript) development environment with Supabase backend connectivity and built the foundational component library.

Completed Features
Environment: Vite + React + TypeScript initialized.
Styling: Tailwind CSS configured with custom dark theme.
Architecture: Organized folder structure (components, pages, hooks, lib).
Backend: Supabase client configured and tested.
UI Component Library
Button: Primary/secondary/ghost variants with loading state.
Card: Reusable container with hover effects.
Input: Form input with label and error handling.
Badge: Status indicators (success, warning, error).
Modal: Accessible backdrop with keyboard support.

React Patterns Practiced
useState for interactive state & useEffect for side effects.
Conditional rendering (&&, ternary) & List rendering (.map).
Data Fetching: The Loading/Error/Data pattern (crucial for Supabase!).
Debouncing with cleanup functions.

Why Supabase? Made the switch from Firebase because:
PostgreSQL: Industry-standard relational database.
RLS (Row Level Security): More intuitive than Firestore rules.
Edge Functions: Can finally hide AI API keys server-side (Security win!).

Reflections “The switch from Firebase to Supabase was smoother than expected. The client API feels similar, but knowing there’s a real PostgreSQL database underneath feels more solid—like I’m learning skills that transfer directly to any backend job. Also, realized Edge Functions will finally let me secure my API keys properly.”

Project Progress [██░░░░░░░░░░░░░░░░░░] 7.5% Complete (15 hours)
Stack: React 18, Vite 5, Tailwind 3.4, Supabase, Lucide React
Mood: Energized
Difficulty: Medium

Written by Your’s Truly, Modified, and Revamped by AI(Copilot’s Claude Opus 4.5 Model, AND Gemini 3-pro)

0