Case Study: Architecting Jamaah.net

Engineering an Ecosystem Where Tradition Meets Modern UI

Tech Stack & Core Tools: Next.js • Supabase • Tailwind CSS • Firebase • Framer Motion • Leaflet

---

Over the past five months, I spearheaded the development of Jamaah.net—a comprehensive digital platform designed to interconnect mosque congregations. The primary objective was to transform routine daily gatherings into a robust social and economic ecosystem.

In this engineering case study, I outline the architectural decisions, the generational UI/UX strategies, and the technical implementations that power the platform's core features.

The Problem Statement: Bridging the Gap in the Saf

The premise of Jamaah.net originated from a simple yet profound observation: people pray shoulder-to-shoulder every day, yet rarely know each other's professional identities. You could be standing next to a legal consultant, an AC technician, or a local merchant, but that potential network remains untapped outside the mosque doors.

To solve this, I designed a multi-tenant platform encompassing three core pillars: Social, Charity, and Business. However, integrating a Business Aggregator and an Interactive Entity Map (via Leaflet) into a seamless ecosystem presented a unique set of technical and design challenges.

Design System & UX Strategy: Gen-Z Aesthetics for a Senior Demographic

The first major challenge was the visual direction. Jamaah.net serves a broad demographic—while the administrators and core users are often older adults (Gen X and Boomers), the interface needed a modern, engaging aesthetic to attract younger generations.

I anchored the design system around Green, a universally recognized color in Islamic branding. Through extensive iteration, I selected a vibrant, modern shade that feels fresh rather than outdated. By pairing this palette with Magic UI components and subtle Neumorphism, I achieved a balanced visual hierarchy.

The Outcome: A "Gen-Z" aesthetic featuring large, accessible typography and frictionless navigation that remains highly intuitive for older users.

Architecture & Backend Complexity

While the UI required visual harmony, the backend demanded architectural rigor. The chosen tech stack was highly capable—React.js, Supabase, Tailwind CSS, Firebase, and Edge Functions—but orchestrating them seamlessly required careful data modeling.

One of the most complex hurdles was maintaining real-time synchronization. I utilized Firebase for specific real-time automations, which introduced the challenge of keeping it perfectly synced with the primary relational database in Supabase. Furthermore, engineering a secure Role-Based Access Control (RBAC) system—handling Superadmin, Admin Hidayatullah, and Member permissions via Edge Functions—required meticulously optimized queries to ensure high performance without compromising security.

Dynamic UI Engineering: The Islamic Header

A standout feature of Jamaah.net is the Dynamic Islamic Header. Rather than building a static dashboard, I engineered the interface to be context-aware, reacting in real-time to the user's geolocation and the current prayer schedule.

By integrating the BigDataCloud API (for reverse geocoding) and the Aladhan API (for precise prayer times), the header knows exactly where the user is. I then utilized Framer Motion to render a dynamic sky background that shifts its state based on the time of day.

Here is a look at the logic that dictates the environmental state before rendering the animations:

This state management dictates whether the component renders shooting stars or drifting clouds, all overlaid with a subtle Islamic geometric pattern and a real-time countdown to the next Adhan. It is a nuanced detail, but it significantly elevates the overall user immersion.

Final Through

Developing Jamaah.net was a five-month journey of bridging complex backend environments with accessible frontend design. Watching this platform evolve from local prototypes into a centralized community hub—capable of empowering micro-enterprises and tightening social bonds—stands as one of my most fulfilling engineering achievements to date.