318 lines
9.2 KiB
Markdown
318 lines
9.2 KiB
Markdown
# 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**
|
|
|
|
[](https://github.com/nmemmert/prayer-app)
|
|
[](https://firebase.google.com)
|
|
[](LICENSE)
|
|
|
|
---
|
|
|
|
## 📸 Screenshots
|
|
|
|
<!-- Add screenshots here after taking them -->
|
|
> *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**
|
|
```bash
|
|
git clone https://github.com/nmemmert/prayer-app.git
|
|
cd prayer-app
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Configure Firebase**
|
|
- Create a Firebase project at [console.firebase.google.com](https://console.firebase.google.com)
|
|
- Enable Authentication (Email/Password)
|
|
- Enable Firestore Database
|
|
- Copy your Firebase config to `src/lib/firebase.ts`
|
|
|
|
4. **Deploy Firestore Rules**
|
|
```bash
|
|
firebase deploy --only firestore:rules
|
|
```
|
|
|
|
5. **Start development server**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
6. **Open** [http://localhost:3000](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
|
|
|
|
```bash
|
|
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
|
|
```bash
|
|
docker build -t prayer-app:latest .
|
|
```
|
|
|
|
### Run Container
|
|
```bash
|
|
docker run -p 3000:3000 prayer-app:latest
|
|
```
|
|
|
|
### Deploy to GitHub Container Registry
|
|
```bash
|
|
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:
|
|
```bash
|
|
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
|
|
|
|
- Built with [Next.js](https://nextjs.org)
|
|
- Powered by [Firebase](https://firebase.google.com)
|
|
- Styled with [Tailwind CSS](https://tailwindcss.com)
|
|
- Icons by [Lucide React](https://lucide.dev)
|
|
|
|
---
|
|
|
|
## 📞 Support
|
|
|
|
Having issues? Check the [Troubleshooting](#-troubleshooting) section or open an issue on GitHub.
|
|
|
|
---
|
|
|
|
**Made with ❤️ and ✝️ for daily prayer practice**
|
|
```
|