# Quick Setup Guide - Notification System
## Prerequisites
- Supabase project with PostgreSQL database
- App deployed with expo
- Android device or emulator for testing
## Automatic Setup (Done!)
The following have already been configured:
✅ Database migrations applied:
- `device_info` table created with proper indexes
- `notification_read_status` table created
- Helper functions created in database
- RLS policies configured
✅ Frontend hooks created:
- `[Link]` - Device tracking and registration
- `[Link]` - Notification sending via edge function
✅ Components created:
- `[Link]` - Badge display component
- `[Link]` - Notification screen
✅ Edge function deployed:
- `send-notifications` - Server-side notification management
✅ Admin panel updated:
- Enhanced to use new notification system
## Usage
### 1. For Users (Automatic)
No setup needed! When users:
1. Install and open the app for the first time → Device is auto-registered
2. Receive a notification → Appears in app with badge count
3. Mark as read → Badge updates automatically
4. Go offline → Notifications cached, synced when online
### 2. For Admins
**Send Notifications:**
1. Navigate to Admin → Notifications
2. Enter title and message
3. Select target (All users, Coaches, Users, or Specific)
4. Click Send
5. Notifications appear on all user devices
**Features:**
- Real-time device tracking
- Offline queuing
- Delivery confirmation
- Per-device tracking
### 3. For Developers
**Initialize notification tracking in your component:**
```typescript
import { useDeviceInfo } from '@/hooks/useDeviceInfo';
function MyComponent() {
const { unreadCount, markNotificationsAsRead } = useDeviceInfo();
return (
<View>
<Text>Unread: {unreadCount}</Text>
<TouchableOpacity onPress={() => markNotificationsAsRead()}>
<Text>Mark All Read</Text>
</TouchableOpacity>
</View>
);
}
```
**Send notification from code:**
```typescript
import { useSendNotification } from '@/hooks/useSendNotification';
function AdminComponent() {
const { sendNotificationToUser } = useSendNotification();
const sendAlert = async () => {
await sendNotificationToUser(
'user-id-here',
'This is the message',
'Notification Title',
'admin-id-here'
);
};
return <TouchableOpacity onPress={sendAlert}>Send</TouchableOpacity>;
}
```
## Database Operations
### Check device registrations:
```sql
SELECT device_id, user_id, is_anonymous, unread_count, last_seen_at
FROM device_info
ORDER BY last_seen_at DESC;
```
### Check unread notifications for a device:
```sql
SELECT COUNT(*) as unread
FROM notification_read_status
WHERE device_id = 'device-uuid' AND is_read = false;
```
### View all notifications:
```sql
SELECT [Link], [Link], n.is_read, n.created_at,
COALESCE([Link], 'Anonymous') as recipient
FROM notifications n
LEFT JOIN profiles p ON n.user_id = [Link]
ORDER BY n.created_at DESC;
```
### Manually mark notifications as read:
```sql
SELECT mark_device_notifications_read(
(SELECT id FROM device_info WHERE device_id = 'your-device-id')
);
```
## Testing
### Test Scenario 1: New User
1. Fresh app install
2. Check `device_info` table - should have new entry with `is_anonymous=true`
3. Admin sends notification
4. Notification appears with badge
5. Check `notification_read_status` - should show `is_read=false`
6. Mark as read
7. Check `notification_read_status` - should show `is_read=true`
8. Badge should clear
### Test Scenario 2: Offline User
1. Open app and ensure registered
2. Disable network
3. Admin sends notification
4. Enable network
5. Notification should sync and appear (may take few seconds)
6. Mark as read (works offline)
7. Verify sync when online
### Test Scenario 3: Multiple Devices
1. Log in on Device A
2. Admin sends notification
3. Verify appears on Device A
4. Log in on Device B (same user)
5. Log back into Device A
6. Verify notification appears on Device A independently
7. Mark as read on Device A
8. Verify still unread on Device B
## Monitoring
### Key Metrics to Monitor
- `device_info.unread_count` - Should accurately reflect unread notifications
- `device_info.last_seen_at` - Should update on each app open
- `notification_read_status.is_read` - Should track read status per device
- Edge function response times - Should be < 1 second
### Logs to Check
- Browser console for frontend errors
- Supabase Edge Function logs for backend errors
- Database query performance
## Troubleshooting
### Notifications Not Appearing
1. Check `device_info` has entry for device
2. Verify `notification_read_status` exists for notification
3. Check `fcm_token` is set (for Android FCM)
4. Verify RLS policies allow access
5. Check network connectivity
### Badge Not Updating
1. Verify `unread_count` updated in `device_info`
2. Check `mark_device_notifications_read()` executed
3. Try calling `loadUnreadCount()` manually
4. Check for JavaScript errors in console
### Offline Sync Not Working
1. Check `pendingOperations` in AsyncStorage
2. Verify network listener is active
3. Check Supabase connection
4. Manually call `syncPendingOperations()`
## Performance Tips
1. **For Large User Base:**
- Use batch sending for admin notifications
- Monitor database query performance
- Consider read replicas for high-volume reads
2. **For Mobile Optimization:**
- Limit unread count queries (cache in local state)
- Lazy load notification history
- Compress notification payloads
3. **For Offline Users:**
- Implement notification sync on foreground
- Limit cached notification count (e.g., last 100)
- Clean up old read notifications regularly
## Security Checklist
✅ RLS policies enabled on all tables
✅ Device IDs are unique and non-predictable
✅ User authentication required for authenticated users
✅ Anonymous users cannot access other users' data
✅ Admin can only send notifications (proper permissions)
✅ Edge function validates input parameters
✅ Sensitive data not logged or cached
## Next Steps
1. **Test the system**: Follow testing scenarios above
2. **Configure FCM (Optional)**: For actual Android push notifications
3. **Monitor in production**: Check logs and metrics regularly
4. **Collect feedback**: From users on notification experience
5. **Optimize**: Based on usage patterns and performance data
## Support Resources
- See `NOTIFICATION_SYSTEM.md` for complete technical documentation
- Check source code comments in:
- `hooks/[Link]`
- `hooks/[Link]`
- `supabase/functions/send-notifications/[Link]`
- `app/(tabs)/[Link]`
- `components/[Link]`