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
|
||||
|
||||
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)
|
||||
- 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
|
||||
**Current Version: 0.4.0**
|
||||
|
||||
## Features
|
||||
- Firebase auth (login)
|
||||
- Compose daily prayer with date and optional "Pray For"
|
||||
- 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
|
||||
[](https://github.com/nmemmert/prayer-app)
|
||||
[](https://firebase.google.com)
|
||||
[](LICENSE)
|
||||
|
||||
## Versioning Policy
|
||||
- Uses semantic versioning: major.minor
|
||||
- Minor: UI/UX tweaks, non-breaking features
|
||||
- Major: structural changes or breaking updates
|
||||
---
|
||||
|
||||
## Setup
|
||||
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
|
||||
## 📸 Screenshots
|
||||
|
||||
## Notes
|
||||
- Email sending routes have been removed in the redesign.
|
||||
- Email verification remains available via Firebase.
|
||||
<!-- Add screenshots here after taking them -->
|
||||
> *Dashboard showing Today's Prayers and quick stats*
|
||||
|
||||
## Firestore Rules
|
||||
Deploy [firestore.rules](firestore.rules) to secure user data.
|
||||
> *Compose tab for creating new prayer entries*
|
||||
|
||||
## Development
|
||||
- `npm run dev` — start dev server
|
||||
- `npm run build` — production build
|
||||
- `npm run lint` — lint code
|
||||
- `npm test` — run tests
|
||||
> *Calendar view of prayer activity*
|
||||
|
||||
## 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
|
||||
- Run `npm run build` for production build
|
||||
- Run `npm run lint` for code linting
|
||||
- Run `npm test` for running tests
|
||||
### 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
|
||||
|
||||
## 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
|
||||
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
|
||||
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
|
||||
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
|
||||
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)
|
||||
Basic containerization is available. Remove or adapt scripts as needed.
|
||||
## 🐳 Docker Deployment
|
||||
|
||||
## Learn More
|
||||
- [Next.js Documentation](https://nextjs.org/docs)
|
||||
- [Tailwind CSS](https://tailwindcss.com/docs)
|
||||
### 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**
|
||||
```
|
||||
Reference in new issue
Block a user