Al-Fetwa is a mobile-first Islamic jurisprudence decision support application designed to help users ask sensitive Fiqh questions in a structured, trustworthy, and context-aware way. The product is inspired by a Human-in-the-Loop AI model where AI assists with research, synthesis, clarification, and structured comparison across the four Sunni Madhabs, while preserving a pathway for scholarly review in high-stakes cases.
This repository contains a React + Vite + TypeScript prototype focused on the product experience, interaction model, and mobile UX architecture for the Al-Fetwa platform.
Al-Fetwa is built around a simple principle:
Islamic legal guidance should be contextual, transparent, multilingual, source-aware, and privacy-conscious.
Instead of returning generic answers, the system is designed to behave more like a careful scholar:
- asking clarifying questions when a query is incomplete,
- comparing positions across the four Madhabs,
- exposing supporting sources,
- adapting to the user’s language and preferred interaction mode,
- and preserving dignity and privacy for sensitive topics.
Al-Fetwa is not intended to be a casual chatbot. It is a decision support interface for Islamic jurisprudence with a clear structure:
- The user asks a question by text or voice.
- The system evaluates whether enough context exists to give a reliable answer.
- If important variables are missing, the app enters a clarification loop.
- Once context is sufficient, the system presents:
- a structured answer,
- a comparison between Madhabs,
- and linked supporting sources.
- In more advanced implementations, scholarly oversight can be added for review and escalation.
The application is designed around the following UX principles:
- Calm – low-noise, readable, distraction-free presentation
- Authoritative – clear hierarchy, strong source visibility, serious tone
- Minimalist – clean interaction patterns with mobile-first ergonomics
- Contextual – no blind answering on incomplete Fiqh questions
- Multilingual – designed for Arabic, English, Amharic, and Oromo flows
- Private – supports anonymous usage patterns for sensitive questions
The current implementation is designed as a native-style mobile app experience rather than a desktop web dashboard. It includes:
- full-screen mobile app shell,
- bottom tab navigation,
- touch-first cards and controls,
- fixed mobile composer for chat,
- sheet-based source inspection,
- compact content hierarchy for handheld usage.
One of the most important ideas in Al-Fetwa is the Deep Detail Protocol.
If a user asks a question that is too vague to answer responsibly, the system does not proceed immediately. Instead, it asks targeted follow-up questions to gather key context such as:
- location,
- travel or resident state,
- health condition,
- urgency,
- school preference,
- and relevant financial or family context.
This allows the application to model a more trustworthy Fiqh consultation workflow.
The platform is structured to present issue comparisons across the four Sunni legal schools:
- Hanafi
- Maliki
- Shafi'i
- Hanbali
Rather than collapsing differences into a single flat answer, the interface supports displaying distinct juristic positions in a way that is understandable to end users.
Al-Fetwa emphasizes transparency. The interface includes a source drawer / bottom sheet designed to expose:
- primary textual references,
- supporting citations,
- Arabic source excerpts,
- and future pathways for verified scholarly references.
The product direction supports:
- Arabic with RTL layout,
- English with mirrored LTR layout,
- Amharic,
- Oromo.
The UI architecture is built to support language-aware behavior and mobile readability.
Although this repository is a front-end prototype, the experience anticipates:
- voice input,
- voice response,
- waveform-driven listening states,
- and seamless transitions between speaking and text-based interaction.
The product concept includes:
- anonymous mode,
- privacy-first religious consultation flows,
- and future support for encrypted private scholar consultation modules.
This repository currently demonstrates the front-end application structure and UX system for the Al-Fetwa concept.
- native-style mobile app layout
- home dashboard for guided entry
- consultation/chat interface
- clarification chips and context-seeking prompts
- four-Madhab comparison cards
- source verification bottom sheet
- settings and language preferences UI
- mobile-oriented design system and information hierarchy
- real backend integration
- live speech-to-text / text-to-speech
- retrieval-augmented generation (RAG)
- scholar review workflow backend
- authentication and encrypted consultation channels
- Supabase, vector database, or LLM orchestration
- React
- TypeScript
- Vite
- CSS (custom mobile-first styling)
- Lucide React for interface iconography
The long-term product direction described for Al-Fetwa includes:
- Flutter for production-grade mobile deployment
- Riverpod for structured state management
- Supabase / PostgreSQL / Vector search for knowledge retrieval
- Whisper / multilingual STT for speech recognition
- TTS services for scholar-tone audio responses
- LLM reasoning layer with strong guardrails and source constraints
This repository should be viewed as a high-fidelity product prototype and interaction model, not the final production architecture.
- components/ contains reusable UI building blocks
- screens/ contains top-level app views
- data/ centralizes product content and mock data
- types/ holds shared TypeScript models
- utils/ contains utility helpers
This structure makes the codebase easier to scale, maintain, and eventually connect to real APIs.
The UI follows the “Modern Maqam” direction:
- Emerald green for spirituality and trust
- Deep charcoal for authority and focus
- Soft cream / muted neutrals for readability and calm
- rounded cards and layered surfaces for a mobile-native feel
- strong content hierarchy for consultation workflows
The interface aims to feel closer to a serious knowledge application than a casual chat product.
- User opens Al-Fetwa.
- User selects preferred language or proceeds with the default profile.
- User asks a jurisprudence question by text or voice.
- The system checks whether the question lacks critical variables.
- If context is missing, Al-Fetwa asks structured follow-up questions.
- Once sufficient context is gathered, the system presents:
- a response summary,
- comparison across Madhabs,
- related sources,
- optional voice playback in future versions.
What makes Al-Fetwa different from a generic AI assistant:
- It is domain-specific to Islamic jurisprudence.
- It prioritizes context before answer generation.
- It supports comparative Madhab-based reasoning.
- It is designed for multilingual Muslim communities, including underrepresented language flows.
- It emphasizes source visibility and answer accountability.
- It is designed to accommodate human scholarly oversight.
npm install
npm run devTo create a production build:
npm run buildThis codebase is currently positioned as a front-end concept implementation for product validation, UX iteration, and stakeholder demonstration.
It is particularly useful for:
- demonstrating the Al-Fetwa concept to partners or investors,
- validating mobile information architecture,
- testing multilingual and RTL UI flows,
- and planning a future production migration to a dedicated mobile stack.
Al-Fetwa is intended as a decision support and educational interface, not as a replacement for qualified scholars in all circumstances. Sensitive, high-impact, or life-critical issues should support escalation to trained human scholars.
This repository can be licensed according to your organization’s needs. If you plan to make it public, add your preferred license file (for example MIT, Apache-2.0, or a proprietary license notice).
Al-Fetwa is a mobile-first Islamic jurisprudence consultation product concept that combines contextual inquiry, multilingual UX, source-aware answer presentation, and four-Madhab comparison into a serious, privacy-conscious religious guidance experience.