Files
prayer-app/README.md
T
2026-01-19 12:45:51 -05:00

9.2 KiB

Haver — Prayer App

A beautiful, minimalist PWA for journaling prayers, tracking prayer requests, and celebrating answered prayers.

Built with Next.js, Firebase, and Tailwind CSS.

Current Version: 0.4.0

PWA Firebase License


📸 Screenshots

Dashboard showing Today's Prayers and quick stats

Compose tab for creating new prayer entries

Calendar view of prayer activity

Things to Pray For - active requests


✨ What's New (0.4.0)

  • Dashboard Navigation: Tap stat cards to jump to relevant sections
  • Today's Prayers: Shows unique prayers + total taps with details
  • Fresh Compose: No draft persistence, clean slate every time
  • Quick Access: Things to Pray For card now tappable

🎯 Features

Core Prayer Tracking

  • ✍️ Daily Prayer Composer — Write prayers with date and optional "Pray For" categories
  • 📊 Today's Prayers Dashboard — See unique prayers and total taps for the day
  • 🙏 Things to Pray For — Track active prayer requests with tap-to-mark functionality
  • ✅ Answered Prayers — Mark prayers as answered with celebration details
  • 📅 Calendar View — Visual timeline of your prayer journey
  • 📖 Reflections List — Search and filter all past prayers

Smart Features

  • 🎯 Quick Navigation — Tap stat cards to jump to relevant sections
  • 💾 Cross-Device Sync — All data stored in Firebase, accessible anywhere
  • 📱 Offline Support — IndexedDB persistence for reliable offline use
  • 🔔 Reminder Notifications — Set custom reminder times
  • 🌙 Dark Theme — Beautiful gradient design optimized for focus
  • 📲 PWA Installable — Install as standalone app on any device

Analytics & Insights

  • 📈 Prayer Statistics — Track total prayers, days prayed, answered percentage
  • 🔥 Prayer Streak — See consecutive days of prayer activity
  • 📊 Most Prayed For — Identify your top prayer focus areas
  • 📏 Average Prayer Length — Monitor your prayer depth

🚀 Getting Started

Prerequisites

  • Node.js 20+
  • Firebase account
  • npm or yarn

Installation

  1. Clone the repository
git clone https://github.com/nmemmert/prayer-app.git
cd prayer-app
  1. Install dependencies
npm install
  1. Configure Firebase

    • Create a Firebase project at console.firebase.google.com
    • Enable Authentication (Email/Password)
    • Enable Firestore Database
    • Copy your Firebase config to src/lib/firebase.ts
  2. Deploy Firestore Rules

firebase deploy --only firestore:rules
  1. Start development server
npm run dev
  1. Open http://localhost:3000

📖 How to Use

1. Dashboard (Home)

The dashboard is your prayer command center:

  • Today's Prayers card shows:
    • Unique prayers you've marked today
    • Total taps/prayer sessions today
    • List of top 3 prayed items
  • Tap any stat card to navigate:
    • Total Prayers → Reflections
    • Days Prayed → Calendar
    • Answered → Answered Prayers
  • Things to Pray For shows active requests (tap to view all)

2. Compose a Prayer

Create new prayer entries:

  1. Tap the "Start New Prayer" button or compose tab
  2. Select a date (defaults to today)
  3. Write your prayer in the text area
  4. (Optional) Add a "Pray For" category (person/topic)
  5. Tap "Save Prayer"

Pro tip: Use "Pray For" categories to organize requests by person or topic

3. Things to Pray For

Manage active prayer requests:

  • View all non-answered prayers
  • Tap "Mark as Prayed" when you pray for an item
  • Multiple taps per day are tracked for Today's Prayers stats
  • Tap any prayer to edit or mark as answered

4. Calendar View

Visual timeline of your prayer journey:

  • See which days you created prayers (blue indicators)
  • See which days you prayed for requests (dot intensity)
  • Tap any date to view/edit that day's prayers

5. Answered Prayers

Celebrate God's faithfulness:

  • View all prayers marked as answered
  • Add answer details to remember how prayers were answered
  • Review past testimonies to boost your faith

6. Reflections

Search and review your prayer history:

  • Browse all prayers chronologically
  • Search by text or "Pray For" category
  • Filter by answered/unanswered
  • Edit or update any prayer

7. Settings (About)

Customize your experience:

  • Set reminder notification time
  • Test notifications
  • View app version and changelog
  • Manage account settings

🏗️ Development

Available Scripts

npm run dev          # Start development server
npm run build        # Production build
npm run start        # Start production server
npm run lint         # Lint code
npm run version:minor # Bump minor version
npm run version:major # Bump major version

Project Structure

prayer-app/
├── src/
│   ├── app/                 # Next.js app directory
│   │   ├── page.tsx         # Main app logic
│   │   ├── layout.tsx       # Root layout
│   │   └── globals.css      # Global styles
│   ├── components/          # React components
│   │   ├── HomePage.tsx     # Dashboard
│   │   ├── DailyEntry.tsx   # Compose form
│   │   ├── CalendarView.tsx # Calendar
│   │   ├── ThingsToPrayFor.tsx
│   │   ├── AnsweredPrayers.tsx
│   │   ├── ReflectionsList.tsx
│   │   ├── AboutPage.tsx
│   │   └── ...
│   ├── context/
│   │   └── AuthContext.tsx  # Firebase auth
│   └── lib/
│       ├── firebase.ts      # Firebase config
│       └── version.ts       # App version
├── public/                  # Static assets
├── firestore.rules          # Firestore security rules
└── Dockerfile              # Docker container

🐳 Docker Deployment

Build Image

docker build -t prayer-app:latest .

Run Container

docker run -p 3000:3000 prayer-app:latest

Deploy to GitHub Container Registry

docker tag prayer-app:latest ghcr.io/YOUR_USERNAME/prayer-app:latest
docker push ghcr.io/YOUR_USERNAME/prayer-app:latest

🔒 Firebase Security

The app uses Firestore security rules to protect user data. Key rules:

  • Users can only read/write their own prayers
  • Authentication required for all operations
  • Subcollections for statistics, settings, and drafts

Deploy rules:

firebase deploy --only firestore:rules

🎨 Customization

Theme Colors

Edit tailwind.config.ts to customize the color palette.

Components

All components use Tailwind CSS utility classes for easy styling modifications.


📱 PWA Features

  • Offline Support: Works without internet after first load
  • Install Prompt: Add to home screen on mobile/desktop
  • Push Notifications: Daily prayer reminders (requires permission)
  • Fast Loading: Optimized for performance

🗺️ Roadmap

Phase 1: Calendar Integration (Q1 2026)

  • 📅 Google Calendar Sync — Automatically add prayer reminders to Google Calendar
  • 📅 Outlook Calendar Sync — Sync with Microsoft Outlook
  • 🔔 Smart Reminders — Calendar events trigger app notifications
  • ⏰ Recurring Prayers — Set prayers to repeat daily/weekly on calendar

Phase 2: Prayer Sharing & Community (Q2 2026)

  • 🤝 Share Prayer Requests — Generate shareable links for prayer requests
  • 👥 Prayer Partners — Invite friends to pray for specific requests
  • 📧 Email Sharing — Send prayer requests via email to contacts
  • 🔐 Private Groups — Create closed prayer groups with invite-only access
  • 💬 Prayer Updates — Notify prayer partners when requests are answered

🐛 Troubleshooting

Common Issues

Firebase Connection Errors

  • Verify Firebase config in src/lib/firebase.ts
  • Check Firestore security rules are deployed
  • Ensure Authentication is enabled in Firebase Console

Offline Warnings

  • "Could not reach backend" warnings are normal with offline persistence enabled
  • Data will sync when connection is restored

Notifications Not Working

  • Grant notification permission in browser settings
  • Test using the "Test Notification" button in About tab

PWA Not Installing

  • Clear browser cache
  • Ensure you're using HTTPS (or localhost)
  • Check browser supports PWA

📄 License

MIT License - feel free to use this project for personal or commercial purposes.


🙏 Acknowledgments


📞 Support

Having issues? Check the Troubleshooting section or open an issue on GitHub.


Made with ❤️ and ✝️ for daily prayer practice