feat: add app icon branding to all remaining page headers
- CalendarView header now displays icon - ReflectionsList header now displays icon - AnsweredPrayers header now displays icon - ThingsToPrayFor header now displays icon Completes visual identity unification across all main screens
This commit is contained in:
nmemmert committed
1 parent
74686cece1
commit
aa3a35bc4a
17 files changed
+234
-330
No files matched your search
@@ -1,118 +1,48 @@
|
||||
# Prayer App
|
||||
# Haver — Prayer App
|
||||
|
||||
A Progressive Web App (PWA) for journaling prayers and praises, organized by date, with journaling functionality and email reminders.
|
||||
A minimalist PWA for journaling prayers and tracking answered prayers. Built with Next.js, Firebase, and Tailwind.
|
||||
|
||||
Current Version: 0.2.0
|
||||
|
||||
## 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
|
||||
|
||||
## 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
|
||||
|
||||
- User authentication with Firebase (login and signup)
|
||||
- Add prayers and praises with date organization
|
||||
- Journal entries for each prayer
|
||||
- "Pray For" field to specify a person for each prayer
|
||||
- Email field auto-populated with user's email for reminders
|
||||
- Archive prayers instead of deleting them
|
||||
- View archived prayers with dedicated tab
|
||||
- Search prayers by content, type, or journal (dedicated Search tab)
|
||||
- Pagination for large numbers of entries
|
||||
- Share prayers on social media, email, and text
|
||||
- Prominent share buttons with visual feedback
|
||||
- Admin panel for SMTP configuration and user management
|
||||
- Email notifications (requires configuration)
|
||||
- Reminder frequency options (daily, weekly, monthly, or never)
|
||||
- Option to include active prayers summary in reminder emails
|
||||
- Beautiful HTML-formatted emails with prayer cards and visual styling
|
||||
- PWA for offline access and installation
|
||||
- Dark mode theme
|
||||
- Bottom navigation tabs for easy switching (Add Entry, Active, Archived, Search)
|
||||
- Engaging loading screen with animations and inspirational content (minimum 5-second display)
|
||||
- Enhanced bottom navigation with gradients, shadows, and improved touch targets
|
||||
|
||||
## API Endpoints
|
||||
|
||||
- `GET/POST /api/send-email` - Send a single email reminder
|
||||
- `GET/POST /api/send-scheduled-emails` - Send scheduled email reminders to all users
|
||||
## 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
|
||||
|
||||
1. Create a Firebase project at https://console.firebase.google.com/
|
||||
2. Enable Authentication with Email/Password provider
|
||||
3. Enable Firestore Database
|
||||
4. Get your Firebase config and replace the placeholder in `src/lib/firebase.ts`
|
||||
## Notes
|
||||
- Email sending routes have been removed in the redesign.
|
||||
- Email verification remains available via Firebase.
|
||||
|
||||
Users can now register accounts directly in the app!
|
||||
## Firestore Rules
|
||||
Deploy [firestore.rules](firestore.rules) to secure user data.
|
||||
|
||||
## Admin Setup
|
||||
|
||||
Admin access is restricted to specific email addresses. Admins can manage the admin email list directly in the app through the Admin panel.
|
||||
|
||||
**To add/remove admin emails:**
|
||||
1. Log in as an existing admin
|
||||
2. Click the "Admin" button
|
||||
3. Scroll to "Admin Email Management" section
|
||||
4. Add new admin emails or remove existing ones
|
||||
5. Changes are saved automatically to Firestore
|
||||
|
||||
Admin users can access the admin panel by clicking the "Admin" button in the header. From there, they can configure:
|
||||
|
||||
- SMTP settings for email sending
|
||||
- Admin email management
|
||||
- Other server configurations
|
||||
|
||||
The admin panel saves settings to Firestore for persistent configuration.
|
||||
|
||||
## Firestore Security Rules
|
||||
|
||||
To enable SMTP configuration saving and other admin features, you need to deploy Firestore security rules:
|
||||
|
||||
1. Install Firebase CLI if you haven't already:
|
||||
```bash
|
||||
npm install -g firebase-tools
|
||||
```
|
||||
|
||||
2. Login to Firebase:
|
||||
```bash
|
||||
firebase login
|
||||
```
|
||||
|
||||
3. Initialize or connect to your Firebase project:
|
||||
```bash
|
||||
firebase use --add
|
||||
```
|
||||
Select your prayer-app project.
|
||||
|
||||
4. Deploy the security rules using the provided script:
|
||||
```bash
|
||||
# On Linux/Mac
|
||||
./deploy-firestore-rules.sh
|
||||
|
||||
# On Windows
|
||||
deploy-firestore-rules.bat
|
||||
```
|
||||
|
||||
Or deploy manually:
|
||||
```bash
|
||||
firebase deploy --only firestore:rules
|
||||
```
|
||||
|
||||
The `firestore.rules` file in this repository allows authenticated users to read/write configuration data needed for the admin panel.
|
||||
|
||||
## SMTP Configuration
|
||||
|
||||
After deploying Firestore rules, you can configure SMTP settings through the admin panel:
|
||||
|
||||
1. Log in as an admin user
|
||||
2. Click the "Admin" button
|
||||
3. Fill in your SMTP provider details (Gmail, Outlook, etc.)
|
||||
4. Save the configuration
|
||||
|
||||
**Gmail Setup:**
|
||||
- Host: `smtp.gmail.com`
|
||||
- Port: `587` (or `465` for SSL)
|
||||
- Username: Your Gmail address
|
||||
- Password: App password (not your regular password)
|
||||
- From: Your Gmail address
|
||||
- Use SSL/TLS: Checked for port 465, unchecked for port 587
|
||||
|
||||
**Note:** For Gmail, you'll need to generate an "App Password" in your Google Account settings.
|
||||
## Development
|
||||
- `npm run dev` — start dev server
|
||||
- `npm run build` — production build
|
||||
- `npm run lint` — lint code
|
||||
- `npm test` — run tests
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
@@ -133,76 +63,21 @@ After deploying Firestore rules, you can configure SMTP settings through the adm
|
||||
- Run `npm run lint` for code linting
|
||||
- Run `npm test` for running tests
|
||||
|
||||
## User Guides
|
||||
|
||||
### Adding Prayers
|
||||
|
||||
1. Click the "Add" tab
|
||||
2. Fill in the date, type (prayer/praise), text, and optional journal
|
||||
3. Set reminder frequency
|
||||
4. Click "Add Prayer"
|
||||
|
||||
### Managing Prayers
|
||||
|
||||
- **Active**: View current prayers
|
||||
- **Archived**: View archived prayers
|
||||
- **Search**: Search by content
|
||||
- **Community**: View shared prayers
|
||||
|
||||
### Profile Customization
|
||||
|
||||
- Click "Profile" to update avatar, theme, and categories
|
||||
|
||||
### Admin Features
|
||||
|
||||
- Configure SMTP for emails
|
||||
- Manage admin users
|
||||
- View analytics
|
||||
## 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
|
||||
|
||||
## Email Configuration
|
||||
|
||||
### Option 1: EmailJS (Free, Recommended)
|
||||
|
||||
EmailJS provides free email sending without server-side SMTP configuration:
|
||||
|
||||
1. **Sign up at [emailjs.com](https://www.emailjs.com/)**
|
||||
2. **Create an Email Service** (Gmail, Outlook, etc.)
|
||||
3. **Create an Email Template** with these variables:
|
||||
```
|
||||
Subject: New {{prayer_type}} added - {{reminder_frequency}} reminders enabled
|
||||
|
||||
Hi {{to_name}},
|
||||
|
||||
A new prayer has been added to your Prayer App:
|
||||
|
||||
Date: {{prayer_date}}
|
||||
Type: {{prayer_type}}
|
||||
Text: {{prayer_text}}
|
||||
Journal: {{prayer_journal}}
|
||||
Praying for: {{praying_for}}
|
||||
|
||||
Reminder Frequency: {{reminder_frequency}}
|
||||
|
||||
Best regards,
|
||||
Prayer App
|
||||
```
|
||||
4. **Get your credentials**:
|
||||
- Service ID
|
||||
- Template ID
|
||||
- Public Key
|
||||
|
||||
5. **Add to `.env.local`**:
|
||||
```
|
||||
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
|
||||
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
|
||||
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
|
||||
```
|
||||
|
||||
### Option 2: SMTP (Advanced)
|
||||
|
||||
For custom SMTP servers, configure settings in the admin panel after deploying Firestore rules.
|
||||
## Build & Deploy
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Deploy to Vercel or your preferred platform.
|
||||
|
||||
## Getting Started
|
||||
|
||||
@@ -244,103 +119,10 @@ npm run build
|
||||
|
||||
Deploy to Vercel or any platform supporting Next.js PWAs.
|
||||
|
||||
## Docker Deployment
|
||||
|
||||
The app includes Docker support for containerized deployment with automated email scheduling.
|
||||
|
||||
### Build and Push Docker Image
|
||||
|
||||
1. **Using the automated script (Windows):**
|
||||
```powershell
|
||||
.\build-and-push-docker.ps1
|
||||
```
|
||||
This script will:
|
||||
- Build the Docker image
|
||||
- Prompt for your GitHub Personal Access Token
|
||||
- Login to GitHub Container Registry
|
||||
- Push the image
|
||||
|
||||
2. **Manual build and push:**
|
||||
```bash
|
||||
# Build the image
|
||||
docker build -t ghcr.io/nmemmert/prayer-app:latest .
|
||||
|
||||
# Login to GitHub Container Registry
|
||||
echo $GITHUB_TOKEN | docker login ghcr.io -u nmemmert --password-stdin
|
||||
|
||||
# Push the image
|
||||
docker push ghcr.io/nmemmert/prayer-app:latest
|
||||
```
|
||||
|
||||
### Run with Docker Compose
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
The container includes:
|
||||
- Automated email scheduling (runs every 5 minutes)
|
||||
- Health checks
|
||||
- Production-optimized Next.js build
|
||||
- Cron jobs for scheduled tasks
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Set these environment variables for the container:
|
||||
|
||||
```bash
|
||||
# Firebase Admin SDK (required for server-side operations)
|
||||
FIREBASE_PROJECT_ID=your_project_id
|
||||
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n..."
|
||||
FIREBASE_CLIENT_EMAIL=your_service_account_email
|
||||
|
||||
# EmailJS (for client-side emails)
|
||||
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
|
||||
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
|
||||
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
|
||||
```
|
||||
## Docker (optional)
|
||||
Basic containerization is available. Remove or adapt scripts as needed.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
|
||||
## Docker Support
|
||||
|
||||
This application is fully containerized and ready for deployment.
|
||||
|
||||
### Building Locally
|
||||
|
||||
```bash
|
||||
# Build the Docker image
|
||||
docker build -t prayer-app .
|
||||
|
||||
# Run the container
|
||||
docker run -p 3000:3000 prayer-app
|
||||
- [Next.js Documentation](https://nextjs.org/docs)
|
||||
- [Tailwind CSS](https://tailwindcss.com/docs)
|
||||
```
|
||||
|
||||
### Using Docker Compose
|
||||
|
||||
```bash
|
||||
# Start the application
|
||||
docker-compose up -d
|
||||
|
||||
# Stop the application
|
||||
docker-compose down
|
||||
```
|
||||
|
||||
### GitHub Container Registry
|
||||
|
||||
The application includes GitHub Actions CI/CD that automatically builds and pushes Docker images to GitHub Container Registry on every push to the main branch.
|
||||
|
||||
Images are available at: `ghcr.io/[your-username]/prayer-app:latest`
|
||||
Reference in new issue
Block a user