readme
This commit is contained in:
nmemmert committed
1 parent
5da449e6ef
commit
b7c9593c13
1 file changed
+271
-82
@@ -1,128 +1,317 @@
|
|||||||
# Haver — Prayer App
|
# Haver — Prayer App
|
||||||
|
|
||||||
A minimalist PWA for journaling prayers and tracking answered prayers. Built with Next.js, Firebase, and Tailwind.
|
> A beautiful, minimalist PWA for journaling prayers, tracking prayer requests, and celebrating answered prayers.
|
||||||
|
|
||||||
Current Version: 0.2.0
|
Built with Next.js, Firebase, and Tailwind CSS.
|
||||||
|
|
||||||
## What's New (0.2.0)
|
**Current Version: 0.4.0**
|
||||||
- Redesign: unified dark theme and gradients
|
|
||||||
- Icons: lucide-react across headings and nav
|
|
||||||
- Cleanup: removed legacy email routes and pages
|
|
||||||
- UX: Pray For suggestions in compose tab
|
|
||||||
|
|
||||||
## Features
|
[](https://github.com/nmemmert/prayer-app)
|
||||||
- Firebase auth (login)
|
[](https://firebase.google.com)
|
||||||
- Compose daily prayer with date and optional "Pray For"
|
[](LICENSE)
|
||||||
- Suggested "Pray For" names via dropdown (type to add new)
|
|
||||||
- Mark prayers as answered with details
|
|
||||||
- Calendar view of entries
|
|
||||||
- Reflections list with search and filters
|
|
||||||
- Answered prayers gallery
|
|
||||||
- Reminder banner + notification time settings
|
|
||||||
- PWA installable; dark theme by default
|
|
||||||
|
|
||||||
## Versioning Policy
|
---
|
||||||
- Uses semantic versioning: major.minor
|
|
||||||
- Minor: UI/UX tweaks, non-breaking features
|
|
||||||
- Major: structural changes or breaking updates
|
|
||||||
|
|
||||||
## Setup
|
## 📸 Screenshots
|
||||||
1. Create a Firebase project (Authentication + Firestore)
|
|
||||||
2. Add your Firebase config to [src/lib/firebase.ts](src/lib/firebase.ts)
|
|
||||||
3. Start the dev server
|
|
||||||
|
|
||||||
## Notes
|
<!-- Add screenshots here after taking them -->
|
||||||
- Email sending routes have been removed in the redesign.
|
> *Dashboard showing Today's Prayers and quick stats*
|
||||||
- Email verification remains available via Firebase.
|
|
||||||
|
|
||||||
## Firestore Rules
|
> *Compose tab for creating new prayer entries*
|
||||||
Deploy [firestore.rules](firestore.rules) to secure user data.
|
|
||||||
|
|
||||||
## Development
|
> *Calendar view of prayer activity*
|
||||||
- `npm run dev` — start dev server
|
|
||||||
- `npm run build` — production build
|
|
||||||
- `npm run lint` — lint code
|
|
||||||
- `npm test` — run tests
|
|
||||||
|
|
||||||
## Troubleshooting
|
> *Things to Pray For - active requests*
|
||||||
|
|
||||||
### Common Issues
|
---
|
||||||
|
|
||||||
1. **Firebase Configuration**: Ensure all Firebase config values are correctly set in `src/lib/firebase.ts`.
|
## ✨ 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
|
||||||
|
|
||||||
2. **SMTP Settings**: Verify SMTP credentials in the Admin panel. Use app passwords for Gmail.
|
---
|
||||||
|
|
||||||
3. **PWA Installation**: Clear browser cache if PWA doesn't install properly.
|
## 🎯 Features
|
||||||
|
|
||||||
4. **Email Reminders**: Check Firestore security rules and ensure SMTP is configured.
|
### 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
|
||||||
|
|
||||||
### Development
|
### 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
|
||||||
|
|
||||||
- Run `npm run dev` for development server
|
### Analytics & Insights
|
||||||
- Run `npm run build` for production build
|
- 📈 **Prayer Statistics** — Track total prayers, days prayed, answered percentage
|
||||||
- Run `npm run lint` for code linting
|
- 🔥 **Prayer Streak** — See consecutive days of prayer activity
|
||||||
- Run `npm test` for running tests
|
- 📊 **Most Prayed For** — Identify your top prayer focus areas
|
||||||
|
- 📏 **Average Prayer Length** — Monitor your prayer depth
|
||||||
|
|
||||||
## Usage
|
---
|
||||||
- Compose: write your prayer, pick a date, and optionally select or type a "Pray For" name.
|
|
||||||
- Praying: mark prayers as prayed today.
|
|
||||||
- Calendar: click a day to view/edit its entry.
|
|
||||||
- Reflections: search and filter past prayers.
|
|
||||||
- Answered: review answered prayers with details.
|
|
||||||
- About: set reminder time, test notifications, and read "What's New".
|
|
||||||
|
|
||||||
## Getting Started
|
## 🚀 Getting Started
|
||||||
|
|
||||||
## Build & Deploy
|
### Prerequisites
|
||||||
|
- Node.js 20+
|
||||||
|
- Firebase account
|
||||||
|
- npm or yarn
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. **Clone the repository**
|
||||||
```bash
|
```bash
|
||||||
npm run build
|
git clone https://github.com/nmemmert/prayer-app.git
|
||||||
|
cd prayer-app
|
||||||
```
|
```
|
||||||
Deploy to Vercel or your preferred platform.
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
First, install dependencies:
|
|
||||||
|
|
||||||
|
2. **Install dependencies**
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, run the development server:
|
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
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
6. **Open** [http://localhost:3000](http://localhost:3000)
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
---
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
## 📖 How to Use
|
||||||
|
|
||||||
## Configuration
|
### 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)
|
||||||
|
|
||||||
For email reminders, configure SMTP settings in `src/app/api/send-email/route.ts`.
|
### 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"**
|
||||||
|
|
||||||
## Build
|
*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
|
```bash
|
||||||
npm run build
|
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
|
||||||
```
|
```
|
||||||
|
|
||||||
## Deploy
|
### 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
|
||||||
|
```
|
||||||
|
|
||||||
Deploy to Vercel or any platform supporting Next.js PWAs.
|
---
|
||||||
|
|
||||||
## Docker (optional)
|
## 🐳 Docker Deployment
|
||||||
Basic containerization is available. Remove or adapt scripts as needed.
|
|
||||||
|
|
||||||
## Learn More
|
### Build Image
|
||||||
- [Next.js Documentation](https://nextjs.org/docs)
|
```bash
|
||||||
- [Tailwind CSS](https://tailwindcss.com/docs)
|
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**
|
||||||
```
|
```
|
||||||
Reference in new issue
Block a user