diff --git a/README.md b/README.md index 3eba617..a17cbe8 100644 --- a/README.md +++ b/README.md @@ -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 +[![PWA](https://img.shields.io/badge/PWA-Enabled-blue)](https://github.com/nmemmert/prayer-app) +[![Firebase](https://img.shields.io/badge/Firebase-Ready-orange)](https://firebase.google.com) +[![License](https://img.shields.io/badge/License-MIT-green)](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. + +> *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** ```