Mimbar360 | Scalable Digital Ecosystem

Project Description: Designed and developed a scalable, accessible digital ecosystem for Mimbar360, a platform dedicated to revitalising mosques as vibrant community hubs by blending Islamic heritage with sustainable design. As the lead frontend engineer, I transformed complex design requirements into a pixel-perfect, performance-optimised platform using Next.js 15, TypeScript, and Sanity CMS. The site empowers global communities with educational courses, a design directory, consultation booking, and a community journal, fostering engagement and accessibility. My work included building a bespoke animation system, integrating advanced APIs, and ensuring WCAG-compliant accessibility, delivering a seamless user experience across devices.

Key Features:

Design Directory: Curated collection of mosque design articles with advanced search, filtering, and tagging, powered by Sanity CMS and Groqd for type-safe queries.

Educational Courses: Structured learning programmes with prospectus downloads and waitlist management, integrated with Sanity CMS for dynamic content.

Consultation Booking: Seamless Cal.com integration for scheduling consultations, enhancing user accessibility.

Community Journal: Engaging blog platform for sharing insights and stories, optimised with Next.js App Router and lazy-loaded media.

Multi-channel Engagement: Formspree-powered enquiry forms, Mailchimp newsletter signup, and donation integration for community interaction.

Technologies Used:

Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS, Framer Motion

Backend/CMS: Sanity CMS, Groqd (Zod-validated queries), Formspree, Mailchimp, Cal.com, Vimeo

Infrastructure: Vercel (deployment), comprehensive SEO (meta tags, sitemaps, structured data)

Achievements:

Delivered a scalable, multilingual-ready platform managing 15+ content types, fusing Islamic heritage with modern technology.

Built a bespoke animation system with Framer Motion, ensuring consistent, engaging UX.

Achieved full ARIA compliance and mobile-first responsiveness, enhancing accessibility for diverse global users.

Reduced load times through Next.js optimisations and Sanity’s image pipeline, improving performance metrics.

Created a reusable UI library, streamlining development efficiency.