RafeeqPro: Developer Documentation Final v1.0 Apr 27, 2026

  1. Overview
  2. Software Development
  3. RafeeqPro App: Companion
  4. RafeeqPro: Developer Documentation Final v1.0 Apr 27, 2026

This Developer Documentation serves as the master blueprint for RafeeqPro.

It combines the visual design language, functional logic, and technical architecture required to build a scalable, premium application.

RafeeqPro | Master Developer Documentation

1. Design System & Branding

RafeeqPro uses a "Signature Midnight" aesthetic designed to feel premium and high-end.

Color Palette

Element

Hex Code

Purpose

Primary Background

#0F2B22

Global background, deep midnight green.

Secondary Background

#1A3C32

Cards, modals, search bars, and dropdowns.

Accent Gold

#D4AF37

Icons, active toggles, borders, and brand elements.

Primary Text

#F5F5F5

Cream/White for maximum readability.

Typography Rules

  • Header Titles: All caps with letter-spacing: 0.5px and line-height: 1.4.

  • Contrast: "Settings" headers and "Calculation Method" labels must remain #F5F5F5 (Cream). Avoid dark maroons or browns for text.

2. Architecture & Tech Stack

Recommended Stack: Laravel (Backend) + Vue.js (Frontend) via Inertia.js.

  • State Management: Use Vue’s reactive state for real-time timers and modal toggles.

  • Authentication: Laravel Sanctum for secure user registration and login.

  • Real-time: Laravel Reverb/Echo for the "Live Notification" countdown logic.

3. Home Page Layout (The Vertical Stack)

The component order is fixed to ensure the most critical information is seen first:

  1. Hero Timer Card:

    • Large countdown displaying the next prayer.

    • Label: 'REMAINING'.

    • Subtext: "at [Time]" (e.g., at 5:32 PM).

  2. Daily Prayer Schedule: A clean list of the five daily prayers.

  3. Quick Action Grid: Square or circular buttons for Qibla, Tasbih, and Alerts.

  4. $1 Daily Challenge Banner (The Footer Card):

    • Watermark: A large Heart Icon at 0.08 opacity positioned bottom-right.

    • CTA: 'Join Now' button must have at least 15px of right-side padding to prevent clipping.

4. Feature-Specific Logic

A. Alerts & Notifications

  • Modal UI: Must have max-height: 75vh and overflow-y: auto.

  • Scroll Order: 'Live Notification' toggle must be at the top.

  • Safe Zone: Add 40px bottom padding to the internal list so "Isha" is never obscured by the modal edge.

B. Masjid & Map Tab

  • Map Integration: Selecting a Masjid centers the map and triggers a Gold Pin highlight.

  • List Alignment: Address text must be perfectly left-aligned under the Masjid name.

  • Detail Pop-up: * Primary Action: 'NAVIGATE' button.

    • Secondary Action: Favorite (Heart) Icon.

    • Logic: Tapping the heart fills it with Solid Gold and saves the Masjid to the user's profile.

C. Sign-Up (Join RafeeqPro)

  • Form: Email, Password, and Confirm Password.

  • UX Constraint: The modal must have 80px bottom padding to ensure the 'Create Account' button remains visible above the fixed bottom navigation bar.

5. Global Header & Navigation

  • Header (Top):

    • Left: Metadata (CALGARY | DATE | TIME) on a single line.

    • Right: Two icons only—Globe (Language switcher) and Gear (Settings).

    • Note: The Dark Mode/Moon icon has been permanently removed.

  • Bottom Navigation (Fixed): Icons for Home, Masjids, and Settings.

6. API & Data Requirements

  • Prayer Times: Fetch via API based on user coordinates or "Calculation Method" selected in Settings.

  • Masjid Data: GeoJSON format for map markers containing: Name, Address, Coordinates, and Type.

  • User Persistence: Store "Favorite Masjids" and "Alert Settings" (toggle states) in the database via Laravel Eloquent.

Final Developer Mandate

"Design is in the spacing." > Never allow buttons to touch the edge of containers. Always prioritize white space (padding) to maintain the RafeeqPro premium feel. Ensure all interactive gold elements provide tactile or visual feedback (e.g., opacity change on tap).