frontend-app/README.md

Notifier app

A React Native mobile application for receiving push notifications.

Features

• Secure API Authentication - API key-based authentication to connect to the backend-api
• Notification Storage - Notifications are saved locally and deleted after 60 days
• Category Organization - Notifications are organized into categories and a complete history is displayed in Home
• Drawer Navigation - Easy navigation between different notification categories
• Interactive Links - Tap on notification links to open them in your device's browser
• Logout Functionality - Securely unregister your device and clear all local data

Prerequisites

• Node.js (v22)
• Firebase account with google-services.json
• Expo account with Firebase Admin SDK private key imported
• Installed eas-cli
• Android SDK 36
• Physical Android device (push notifications don't work on simulators/emulators)
• API key

Building from scratch

1. Clone the repository:

git clone <repository-url>
cd <project-directory>

2. Install dependencies:

npm install

3. Copy google-services.json to root directory and delete .gitignore file (or comment out google-services.json)

4. Use EAS to build and follow along

eas build --profile release --local --platform android

Building from scratch via Docker

1. Clone the repository:

git clone <repository-url>
cd <project-directory>

2. Build the Docker image

docker build -t expo-android-builder .

3. Copy google-services.json to root directory and comment out google-services.json in .gitignore (or delete the entry)

sed -i '/google-services\.json/d' .gitignore

4. Use EAS to build

docker run --rm \
  -v "$PWD":/workspace \
  -v gradle-cache:/home/node/.gradle \
  -e EXPO_TOKEN="$EXPO_TOKEN" \
  expo-android-builder \
  bash -c 'npm ci && eas build --profile release --local --platform android --non-interactive --output /workspace/notifier.apk'

Configuration

Backend URL

The app connects to the notification backend at:

https://notifier.gansejunge.com

To change this, modify the API_URL constant in index.tsx.

Categories

Categories are defined in types/Category.ts. Special categories:

• Home - View all notifications
• Utility - Default category for uncategorized notifications

Technical Details

Notification Data Structure

Notifications should include the following data fields from your backend:

{
  "title": "Notification Title",
  "body": "Notification message text",
  "data": {
    "category": "utility",
    "link": "https://example.com",
    "timestamp": 1760734800
  }
}

• category - Optional. Defaults to "utility" if not provided
• link - Optional. Set to "#" if no link should be shown
• timestamp - Optional. Defaults to when the notification was received when empty

Project Structure

├── index.tsx                      # Main app component
├── hooks/
│   ├── usePushNotifications.ts    # Push notification registration
│   └── useNotificationListener.ts # Notification receiving and storage
├── types/
│   ├── Category.ts                # Category definitions
│   └── Item.ts                    # Notification item type
└── styles/
    └── styles.ts                  # App styling

API Endpoints

The app communicates with these backend endpoints:

• POST /register-token - Register device for push notifications

  • Headers: X-API-Key: <your-api-key>
  • Body: { token, platform, app_ver, locale, topics }

• POST /unregister-token - Unregister device

  • Headers: X-API-Key: <your-api-key>
  • Body: { token, platform, app_ver, locale, topics }