Activity

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