RafeeqPro: AI Prompt for App Prototype

Plan: RafeeqPro - Daily Muslim Companion Mobile App

1. Core Setup and Foundation

Configure app branding and metadata ("RafeeqPro)

Set up design system with color palette (soft sage greens, warm sand, off-white) and typography (Inter or Geist font)

Create shared UI components library (buttons, cards, inputs) with rounded corners and consistent spacing

Configure Database schema for user data, notes, donations, and prayer preferences

Set up AsyncStorage for offline data persistence

Install and configure required packages: expo-location, expo-notifications, react-native-maps, date-fns

2. Bottom Navigation Structure

Implement tab-based navigation using Expo Router's tabs layout

Create five main tab screens: Home, Masjids, Notes, Give, Finance

Design custom tab bar with consistent icons using Lucide React Native

Apply minimalist styling with sage green active states and sand/off-white inactive states

Ensure fixed bottom positioning on all screen sizes

3. Home Screen - Prayer Times

Request and manage location permissions

Integrate prayer times API or calculation library

Build prayer time display component with large, readable typography

Create countdown timer showing time until next prayer

Add visual indicators for current prayer period

Implement prayer time notifications scheduling

Store user prayer time preferences in Bolt Database (calculation method, notification preferences)

Cache prayer times locally for offline access

4. Masjids Screen - Location Discovery

Integrate Google Maps using react-native-maps

Request location permissions and show user's current position

Implement nearby masjids search using Google Places API

Display mosque markers on map with custom icons

Create bottom sheet or card UI for selected masjid details (name, address, distance, prayer times)

Add ability to get directions to selected masjid

Store Google Maps API key in environment variables

5. Notes Screen - Personal Knowledge Base

Create Bolt Database table for notes (id, user_id, title, content, created_at, updated_at, tags)

Build notes list view with search and filter capabilities

Implement create, read, update, delete operations for notes

Add offline support using AsyncStorage with sync mechanism

Design rich text editor or markdown support for note content

Implement tagging system for note organization

Add offline indicator and sync status UI

6. Give Screen - Donation Options for various charities/ nonprofits

Create donation page UI with amount input and charity selection

7. Finance Screen - Charitable Contributions Tracker

Build dashboard showing total contributions by period (month, year, all-time)

Create visual charts for donation trends using react-native-svg

Display detailed user entered giving history from Database

Implement filtering by date range and charity

Add export functionality for tax records

Show breakdown by charity category

8. Push Notifications System

Configure expo-notifications for local and push notifications

Implement Jummah (Friday prayer) reminder system

Create community events notification handler

Set up notification scheduling based on prayer times

Build notification preferences screen

Store notification tokens and preferences in Database

Handle notification taps to navigate to relevant screens

9. User Authentication and Profile

Implement Database authentication (email/password, social login)

Create onboarding flow for new users

Build user profile management screen

Store user preferences (language, prayer calculation method, notification settings)

Add settings screen for app configuration

10. Database Schema and APIs

Create users table with profile information and preferences

Create notes table with offline sync support

Create giving history table for user inputted giving records

Create prayer_preferences table for user-specific settings

Set up Row Level Security (RLS) policies for data protection

Create database functions for common operations

11. Environment Configuration and Security

Set up environment variables for all API keys (Google Maps, Prayer Times API)

Implement secure storage for sensitive user data

Add API request validation and error handling

Set up rate limiting for API calls

12. Polish and Optimization

Implement skeleton loading states for all data fetches

Add error boundaries and graceful error handling

Optimize images and assets for mobile performance

Implement pull-to-refresh on all list screens

Add haptic feedback for important interactions

Test responsive layout on various screen sizes

Ensure accessibility compliance (screen reader support, color contrast)

Add app icon and splash screen with RafeeqPro branding

PROMPT - GRETA - Apr 22, 2026

Building an app like RafeeqPro in Greta (or similar AI-driven development environments) works best when you follow a modular, "building block" approach.

This prevents the AI from getting overwhelmed and ensures that each feature is stable before moving to the next.

Phase 1: Branding, Foundation & Navigation

Goal: Establish the visual identity and the primary navigation shell.

Prompt: > "Initialize a React Native project named 'RafeeqPro' using Expo and Expo Router.
Branding: Set up a global theme using a color palette of soft sage greens, warm sand, and off-white. Use 'Inter' as the primary font.
UI Library: Create a shared component folder with buttons, cards, and inputs featuring rounded corners (12px to 16px) and consistent spacing.
Navigation: Implement a Bottom Tab Navigation structure with five screens: Home, Masjids, Notes, Give, and Finance. Use Lucide React Native for icons. The active state should be sage green and the inactive state sand/off-white. Ensure the layout is responsive for all mobile screen sizes."

Phase 2: Home Screen – Prayer Times & Location

Goal: Get the core functional utility—prayer times—running with real-time data.

Prompt: > "Develop the Home Screen.
Request user location permissions using expo-location.
Integrate a Prayer Times API (like Aladhan) to fetch daily times based on the user's coordinates.
Build a hero component showing the current prayer name and a countdown timer to the next prayer.
Below the hero, list all five daily prayers with their times, highlighting the 'current' one.
Implement AsyncStorage to cache these times so they work offline once fetched. Use large, readable typography for the times."

Phase 3: Masjids Screen – Map Integration

Goal: Interactive map features for finding local mosques.

Prompt: > "Build the Masjids Screen.
Integrate react-native-maps to show a map centered on the user's location.
Use the Google Places API (or a similar mosque-specific API) to find nearby masjids and display them as custom sage green markers on the map.
Implement a Bottom Sheet UI (using gorhom/bottom-sheet or a custom animated view) that appears when a marker is tapped, showing the Masjid name, address, distance, and a 'Get Directions' button that opens the native maps app."

Phase 4: Notes Screen – The Knowledge Base

Goal: Local data persistence for personal reflections and study.

Prompt: > "Create the Notes Screen functionality.
Set up a local database schema for 'Notes' (fields: ID, title, content, tags, created_at).
Build a list view with a search bar at the top to filter notes.
Create a 'Compose' screen with a clean text editor and a tagging system.
Ensure full CRUD (Create, Read, Update, Delete) capabilities.
Add an 'Offline' indicator and ensure notes persist using the database even after the app is closed."

Phase 5: Finance & Give – Tracking & Charity

Goal: A dual-purpose module for finding charities and tracking personal history.

Prompt: > "Develop the Give and Finance screens.
Give Screen: Design a clean UI for browsing a list of charities.
Finance Screen: Build a dashboard using react-native-svg or a charting library to show a bar chart of 'Giving History' by month.
Create a database table for 'Contributions' to store user-entered data.
Include a filter for date ranges and an 'Export' button (placeholder for CSV export)."

Phase 6: Notifications & User Settings

Goal: Engagement through reminders and personalizing the experience.

Prompt: > "Implement the Notification and User System.
Configure expo-notifications to schedule local alerts for each prayer time based on the Home screen data.
Add a special reminder for Jummah (Friday) prayers.
Create a Settings Screen where users can change their prayer calculation method (e.g., ISNA, MWL) and toggle specific notifications.
Add a simple Profile section to store the user's name and preferred language."

Phase 7: Optimization & Final Polish

Goal: Making the app feel premium and stable.

Prompt: > "Perform a final polish on the entire RafeeqPro app:
Add Skeleton Loading states for the Home and Masjids screens while data is fetching.
Implement Pull-to-Refresh on the Notes and Home screens.
Add Haptic Feedback when a user saves a note or toggles a setting.
Ensure all images and icons are optimized.
Set up a custom Splash Screen and App Icon featuring the RafeeqPro branding (sage green/sand theme)."

Refining:

To get these quick-action buttons working, you need to prompt Greta to build the overlay logic. In mobile dev, it's often best to handle these as Modals or Bottom Sheets so the user doesn't lose their place on the Home screen.

Here is the prompt to bring those specific features to life:

Phase 3.3: Functional Modals for Quick Actions

Goal: Implement the logic and UI overlays for Qibla, Tasbih, and Prayer Alerts.

Prompt:
"The Qibla, Tasbih, and Alerts buttons on the Home screen are currently non-functional. Please implement the following features using React Native Modals or Action Sheets:
1. Qibla Finder Modal:
When 'Qibla' is pressed, open a full-screen modal.
Integrate expo-sensors to access the device Magnetometer.
Build a compass UI that calculates the Kaaba direction based on the user's current GPS coordinates (calculate the great-circle distance).
Provide visual feedback (vibration or color change) when the phone is correctly aligned with the Qibla.
2. Tasbih Counter Modal:
When 'Tasbih' is pressed, open a centered modal.
Feature a large, tappable circular area that increments a counter on each press.
Include a 'Reset' button and a small haptic vibration (expo-haptics) for every tap to simulate physical beads.
Save the session count to AsyncStorage so the user doesn't lose their progress if they close the modal.
3. Alerts/Notifications Modal:
When 'Alerts' is pressed, open a bottom sheet showing a list of the 5 daily prayers + Sunrise.
Add a toggle switch next to each prayer to enable/disable push notifications.
Link these toggles to the expo-notifications scheduling logic so that turning a switch 'On' creates a recurring daily alert.
General Requirements:
Ensure all modals have a clear 'Close' or 'X' button in the top-right corner.
Use a backdrop blur or semi-transparent overlay to keep the minimalist aesthetic of the main app."

Pro-Tip for "Greta":

If the Qibla finder feels too complex for a single step, you can tell Greta: "For the Qibla finder, just build the UI shell and the math logic first; we will calibrate the actual sensors in the next turn." This keeps the code clean and prevents the AI from halluincating complex sensor math.

Refinement

Phase 6.1: Fix Giving Dashboard & Implement Records

Goal: Fix text visibility, build the Giving History entry system, and link the History button.

Prompt: "I am having visibility and functional issues on the Give Screen. Please apply the following fixes:
1. Fix Text Visibility:
In the 'Sadaqah & Zakat' section, ensure all text ('Total Given this Year', the dollar amount, and '65% of Annual Goal') is visible.
Explicitly set the text color to a dark charcoal or your primary dark sage green to contrast against the off-white cards. Avoid using default 'system' colors that might be clashing.
2. Implement 'Add Record' Functionality:
Add a floating action button (FAB) or a clear '+ Add Contribution' button in this section.
When clicked, open a Modal with a form containing:
Amount Input (Numeric)
Category Dropdown (Sadaqah, Zakat, Lillah)
Date Picker
Note/Charity Name field
On 'Save', write this record to the giving_history table in the database and update the 'Total Given this Year' state immediately.
3. Fix History Button:
Make the 'History' button in the top right functional.
It should navigate to the Finance Screen or open a full-screen modal showing a chronological list of all previous entries fetched from the database.
4. Data Calculation:
Create a helper function to sum all entries in the database for the current year so the '$1,250.00' value is dynamic and accurate, not hardcoded.
Calculate the 'Annual Goal' percentage based on a user-set goal (default to $2,000) stored in user preferences."

Why this happened (and how to check):

The Visibility: Usually, if you see the "pink" selection boxes in your screenshot but no text, it means Greta set the color to white or transparent by mistake. The prompt above forces her to use high-contrast hex codes.
The History Button: By default, AI often treats "History" as a label rather than a button. Forcing the router.push or navigation.navigate logic ensures it actually responds to a touch.
The Missing Input: Since your original plan mentioned a "Tracker," we need that Modal form to actually feed data into the tracker; otherwise, the screen stays empty forever!