Muslim Journal

"Muslim Jurnal: Your Daily Spiritual Companion."

Comment

🕌 Inspiration

The inspiration behind Muslim Jurnal stemmed from a desire to create a dedicated digital space for spiritual reflection and growth, specifically tailored for the Muslim community. In a fast-paced world, finding moments for introspection and connecting with one's faith can be challenging.

We envisioned an application that would not only facilitate daily journaling but also provide meaningful, personalized guidance rooted in Islamic teachings—particularly through Quranic verses. The goal was to encourage consistency, offer insightful analytics, and foster a sense of accomplishment through gamification.

✨ What it does

Muslim Jurnal is a comprehensive spiritual journaling application designed to help users deepen their connection with their faith through daily reflection and personalized guidance.

Key features include:

  • ✍️ Journal Entries: Morning and evening reflections with mood tracking and guided prompts.
  • 🤖 AI-Powered Insights: Summaries, theme extraction (tags), and relevant Quranic verse recommendations using Google Gemini API.
  • 📊 Analytics Dashboard: Mood trends, recurring themes, and weekly summaries of spiritual progress.
  • 🏆 Gamification: Achievements for journaling streaks and milestones, complete with notifications and a points system.
  • ⚙️ User Preferences: Profile management, theme switching, Quran reciter selection, and notification settings.

🛠️ How we built it

Development Phases:

  1. Foundation:

    • PostgreSQL schema on Supabase
    • Tables for users, journals, reports, and achievements
    • Frontend setup using React 18 + TypeScript + Tailwind CSS

  2. Authentication & Onboarding:

    • Supabase Auth for secure login
    • Multi-step onboarding with preferences (e.g., Quran reciter, AI consent)

  3. Journaling Core:

    • Journal entries with mood & prompt-based input
    • Google Gemini API via Supabase Edge Functions for summaries, tags, and Quranic verse matching
    • Al-Quran Cloud API for verse details and audio

  4. Analytics & Insights:

    • Mood visualizations (Recharts)
    • Weekly AI summaries
    • Tag cloud from journal themes

  5. Gamification:

    • 12+ achievement types
    • Realtime logic via Edge Functions
    • In-app notifications and point system

  6. Settings & UI Polish:

    • Theme switching
    • Notification preferences
    • Smooth, responsive UI

  7. Backend Security & Performance:

    • RLS policies on Supabase
    • Indexed queries and efficient error handling in Edge Functions

  8. Final Polish:

    • Accessibility, animation, UX refinements
    • Production-ready build

🧩 Challenges we ran into

  • AI Integration Complexity: Prompt design for Gemini API was iterative and required JSON-format validation and fallback handling.
  • Achievement Logic: Designing real-time checking for varied trigger conditions was performance-sensitive.
  • Theme Persistence: Ensuring theme preference loads before Supabase profile fetch completes.
  • State Synchronization: Managing reactivity between frontend state and backend in real-time.
  • Chart UX: Implementing clean, accessible charts using recharts.

🏅 Accomplishments that we're proud of

  • ✅ Complete Gamification System: Real-time, animated, point-based achievements
  • ⚙️ Advanced User Settings: Theme, reciter, profile, and notification controls
  • 🔐 Secure, Scalable Backend: Built entirely on Supabase with RLS and Edge Functions
  • 🎨 Premium UI/UX: Smooth animations, clean layouts, responsive design
  • 💡 Meaningful AI Integration: Personalized Quranic verse suggestions based on mood & reflection

📚 What we learned

  • Full-stack Supabase: Auth, RLS, database design, and Edge Functions
  • AI Prompting: Prompt engineering and parsing Gemini API responses
  • Frontend Engineering: Responsive design, state management, Tailwind utility patterns
  • Database Best Practices: Schema design, indexing, privacy with RLS
  • Gamification Design: Trigger conditions, reward systems, and feedback mechanisms
  • External API Use: Integrating Al-Quran Cloud API seamlessly with AI insights

🚀 What's next for Muslim Jurnal

Planned future enhancements:

  • 👥 Community Features: Shared reflections, group challenges, inspirational feeds
  • 🧠 Deeper AI Insight: Emotional pattern recognition, spiritual recommendations
  • 🌍 Multi-language Support: UI and AI in various languages
  • 🧾 Custom Prompts: User-generated or community-sourced reflection prompts
  • 📲 Islamic Resource Integration: Prayer times, Qibla direction, daily Hadith
  • 📱 Mobile Optimization: Push notifications, native experience enhancements

📖 The Story of Muslim Jurnal

Muslim Jurnal was born from a simple yet powerful idea: combine spiritual reflection with modern technology to create a meaningful experience for the global Muslim community.

Now fully built and production-ready, Muslim Jurnal stands as a beautifully designed, AI-powered, spiritually enriching platform that promotes daily introspection and a stronger connection to faith.

Built With

Share this project:

Updates

Submission history