Okayyy, let me set the scene.

It's 1:45 AM, I'm about to sleep when that familiar developer itch hits.

Build now or sleep? The voice wouldn't leave.

One coffee later, I'm in VSCode with a mission: create an MVP before sunrise.

After the all-nighter, I felt this urge to document everything (first time ever documenting a project!). Let me tell you how it started...

The Problem to Solve

"Yo we should have a centralized platform to share our insights and resources"
~ friend in our WhatsApp group

Yeah, you know what... lemme use that as an excuse to build a SaaS that does just that.

One random convo in our group chat, and suddenly I'm knee-deep in code at 3AM. That's how these things go, right?

Problem to solve (more formally): To centralize all of our Islamic reflections and resources we'd been sharing in an unorganized WhatsApp group chat.

The problem was real though.

We had guys sharing amazing videos, PDF resources, thoughtful reflections, but they were getting buried under day-to-day conversations.

The Development Journey

Diving right in

I sketched out a rough idea on paper (does anyone else still use paper for initial designs or am I just old school?):

  • Landing page with a clean, minimalist design
  • A form for submitting different types of content
  • A simple feed showing recent submissions

The name "Hadeed" came from the Arabic word for iron; something strong, reliable, lasting. I wanted to create something that would forge stronger Muslims through knowledge sharing.

I got started by creating a new React app. My approach to design is pretty straightforward...just quickly add and edit CSS until satisfied with how it looks (I don't have the patience to design in Figma first).

After a couple minutes of fiddling with CSS and a cup of coffee, this is how the landing page looked:
Image description

But man... the thought of having to initiate an entire backend app, build all the random routes and controllers, host that on a separate hosting platform thingy... I knew there had to be a much faster way.

Vibecoding enters chat

I think Albert Einstein once said "To develop fast, must use nextjs" or something like that.

Bottom line: the MERN stack was just too slow to contain the amount of excitement I had (was legit shaking with excitement when designing the landing page).

I wanted to build fast. I needed to validate this idea with my friends quick before the spark vanished.

Teamed up Next.js with Dr. Claude (definitely wouldn't recommend this level of vibecoding if you're building anything more than a landing page with just one feature) and man, after the first prompt to transform the React landing page to a Next.js page component, I was impressed.

Image description

And yeah, so vibecoding and the philosophy of just shipping fast came to mind. Here's the folder structure after 2 hours of vibecoding till 4 am:
Image description

I'm not gonna sit here and act like I spent hours planning this thing, cause I really didn't. With the help of Dr. Claude, these were the features I started adding to the app:

  • A popup form that dynamically changes based on resource type (reflection, video, PDF, link)
  • Supabase integration for storing and retrieving resources
  • A randomized grid layout for displaying resources (looks mad cool on desktop)
  • Real-time updates when someone adds a new resource
  • Mobile responsiveness because let's be real, my friends mostly use their phones

4:30 am came around, launched this baby to Vercel and immediately shared the app with my friends.

Success I say, that dopamine hit was crazy.

Problems faced:

  • Mobile responsiveness was a pain (those resource cards looking weird on small screens)
  • Getting the grid layout to look random but not chaotic
  • My ego telling me I should use MERN cause it's "a lot more scalable and cleaner code" when in fact it's more important to just ship fast.

Future plans:

  • Me and friends slowly feed the database with resources and reflections
  • Slowly build more features (auth, better UI to show resources, allow PDFs etc.)
  • Introduce the app to other friends outside our immediate circle
  • Maybe even open-source it for other Muslim communities to use

Conclusion:

Building Hadeed Institute taught me that sometimes the best way to validate an idea isn't to plan meticulously but to just build the darn thing. If you're sitting on an idea, especially one that could help your community, don't overthink it, just build it, ship it, and improve it based on real feedback. The journey from "we need this" to "we're using this" is shorter than you think, and infinitely more satisfying.