Mobile App (iOS & Android)

The MyWarranties mobile app is a cross-platform application built with React, Capacitor, and TypeScript, providing native iOS and Android experiences.

Overview

The mobile app allows customers to:

Track product warranties
Create and manage warranty claims
Chat in real-time with suppliers
Upload and manage receipts
Receive push notifications
Scan receipts with AI-powered OCR

Technology Stack

Core Technologies

React 18 - Modern React with hooks
TypeScript - Type safety and better DX
Capacitor - Native iOS and Android bridge
Vite - Fast build tool and dev server
Mantine UI - Beautiful component library

Native Capabilities

iOS: Swift plugins via Capacitor
Android: Kotlin plugins via Capacitor
Camera access for receipt scanning
Push notifications via APNs/FCM
File system access for offline storage

Features

Real-Time Chat

For All Platforms (Web, iOS, Android):

Uses Mercure (Server-Sent Events)
Instant message delivery
Automatic reconnection with exponential backoff
No polling - messages appear instantly
Works seamlessly in mobile WebViews

Native Push Notifications (Background):

Used only when app is in background or closed
Brings user back to app
Battery optimized
Mercure handles all updates when app is active

Product Management

Add Products:

Manual entry or receipt scanning
Product details: name, brand, category
Purchase date and store
Warranty period calculation
Serial number tracking
Product photos

Receipt Scanning:

Camera capture or gallery upload
AI-powered OCR extraction
Automatic date and store detection
Receipt image storage

Warranty Tracking

Visual timeline of warranty status
Days remaining until expiration
Warranty expiration notifications
Automatic warranty end date calculation
Filter by active/expired warranties

Claims Management

Create Claims:

Select product
Describe issue
Upload photos of defect
Submit to supplier

Chat with Suppliers:

Real-time messaging
Photo/document attachments
Email integration (can reply via email)
Read receipts
Typing indicators

Track Claim Status:

Open, In Progress, Resolved, Closed
Status change notifications
Claim history

User Profile

View and edit profile information
Contact details
Address management
Notification preferences
Dark mode toggle

Project Structure

mywarranties/
├── android/                 # Android native project
│   ├── app/
│   └── build.gradle
├── ios/                     # iOS native project
│   ├── App/
│   └── App.xcworkspace
├── src/
│   ├── pages/              # Page components
│   │   ├── LoginPage.tsx
│   │   ├── ProductsPage.tsx
│   │   ├── ClaimsPage.tsx
│   │   └── ProfilePage.tsx
│   ├── components/         # Reusable components
│   │   ├── ProductCard.tsx
│   │   ├── ClaimCard.tsx
│   │   └── ChatMessage.tsx
│   ├── services/           # API and native services
│   │   ├── api.ts
│   │   ├── push-notifications.ts
│   │   └── mercure.ts
│   ├── hooks/              # Custom React hooks
│   │   ├── useAuth.ts
│   │   ├── useProducts.ts
│   │   └── useClaims.ts
│   ├── utils/              # Utility functions
│   └── App.tsx             # Main app component
├── capacitor.config.ts     # Capacitor configuration
├── vite.config.ts          # Vite build configuration
└── package.json

Setup & Development

Prerequisites

Node.js 18+
npm or yarn
For iOS: macOS with Xcode 14+
For Android: Android Studio with SDK 33+

Installation

Install Dependencies:
bash
```
npm install
```
1

Configure Environment: Create .env.local:

env

VITE_API_BASE_URL=https://api.my-warranties.nl
VITE_MERCURE_URL=https://mercure.api.my-warranties.nl/.well-known/mercure

Build for Web:

bash

npm run dev        # Development server
npm run build      # Production build
npm run preview    # Preview build

iOS Development

Sync Capacitor:
bash
```
npx cap sync ios
```
1
Open in Xcode:
bash
```
npx cap open ios
```
1
Configure Signing:
- Open ios/App/App.xcworkspace in Xcode
- Select project → Signing & Capabilities
- Choose your development team
- Configure bundle identifier
Run on Device/Simulator:
- Select target device in Xcode
- Click Run button (⌘+R)
Push Notifications Setup:
- Enable Push Notifications capability
- Add APNs certificate to Apple Developer account
- Configure in Firebase Console

Android Development

Sync Capacitor:
bash
```
npx cap sync android
```
1
Open in Android Studio:
bash
```
npx cap open android
```
1
Configure Package:
- Edit android/app/build.gradle
- Update applicationId if needed
- Set versionCode and versionName
Run on Device/Emulator:
- Select target device in Android Studio
- Click Run button (Shift+F10)
Push Notifications Setup:
- Add google-services.json to android/app/
- Configure FCM in Firebase Console

Native Features

Push Notifications

iOS (APNs):

typescript

import { PushNotifications } from '@capacitor/push-notifications';

// Request permission
await PushNotifications.requestPermissions();

// Register for push
await PushNotifications.register();

// Listen for registration
PushNotifications.addListener('registration', (token) => {
  console.log('APNs token:', token.value);
  // Send to backend
});

Android (FCM):

typescript

// Same API as iOS - Capacitor handles platform differences
PushNotifications.addListener('pushNotificationReceived', (notification) => {
  console.log('Received:', notification);
});

Camera & Photos

typescript

import { Camera, CameraResultType } from '@capacitor/camera';

const takePhoto = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Base64
  });

  return image.base64String;
};

File System

typescript

import { Filesystem, Directory } from '@capacitor/filesystem';

const saveReceipt = async (base64: string) => {
  const fileName = `receipt-${Date.now()}.jpg`;

  await Filesystem.writeFile({
    path: fileName,
    data: base64,
    directory: Directory.Documents
  });

  return fileName;
};

Real-Time Features

Mercure Integration

typescript

// Connect to Mercure hub
const eventSource = new EventSource(
  `${MERCURE_URL}?topic=${topicUrl}`,
  { withCredentials: true }
);

// Listen for messages
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // Update UI with new message
};

// Auto-reconnect on disconnect
eventSource.onerror = () => {
  setTimeout(() => {
    // Reconnect with exponential backoff
  }, retryDelay);
};

Chat Implementation

typescript

// Send message
const sendMessage = async (claimId: number, text: string) => {
  await api.post(`/api/claims/messages/${claimId}`, {
    message: text,
    attachments: []
  });
  // Mercure will broadcast to all connected clients
};

// Receive via Mercure
eventSource.onmessage = (event) => {
  const message = JSON.parse(event.data);
  setMessages(prev => [...prev, message]);
};

API Integration

Authentication

typescript

// Login with verification code
const login = async (email: string, code: string) => {
  const response = await api.post('/api/verify-code', {
    email,
    code
  });

  const { token, user } = response.data;

  // Store JWT token
  await Preferences.set({
    key: 'auth_token',
    value: token
  });

  return user;
};

// Auto-inject token in requests
api.interceptors.request.use((config) => {
  const token = await Preferences.get({ key: 'auth_token' });
  if (token.value) {
    config.headers.Authorization = `Bearer ${token.value}`;
  }
  return config;
});

API Endpoints Used

Endpoint	Method	Purpose
`/api/send-code`	POST	Send verification code
`/api/verify-code`	POST	Verify code and login
`/api/products`	GET	List user's products
`/api/products`	POST	Create new product
`/api/products/{id}`	GET	Get product details
`/api/products/{id}`	PUT	Update product
`/api/products/{id}`	DELETE	Delete product
`/api/claims`	GET	List claims
`/api/claims`	POST	Create claim
`/api/claims/messages/{id}`	GET	Get claim messages
`/api/claims/messages/{id}`	POST	Send message
`/api/claims/{id}/close`	POST	Close claim
`/api/me`	GET	Get user profile
`/api/me`	PUT	Update profile

Building for Production

iOS App Store

Archive Build:
- Open in Xcode
- Select "Any iOS Device" as target
- Product → Archive
- Wait for archive to complete
Upload to App Store Connect:
- Organizer window appears
- Click "Distribute App"
- Select "App Store Connect"
- Upload
Submit for Review:
- Go to App Store Connect
- Fill in app metadata
- Add screenshots
- Submit for review

Android Play Store

Generate Signed APK:
bash
```
cd android
./gradlew bundleRelease
```
1
2
Upload to Play Console:
- Go to Google Play Console
- Create new release
- Upload AAB file
- Complete store listing
- Submit for review

Voor Testers: Test de App (Nederlands)

Hoe test je een app met TestFlight (iOS) - Stap voor stap

TestFlight is een app van Apple waarmee je apps kunt testen voordat ze officieel in de App Store staan. Je gebruikt TestFlight alleen als een ontwikkelaar je daarvoor uitnodigt.

Wat heb je nodig?

Een iPhone of iPad
Een Apple ID (hetzelfde account als voor de App Store)
Een uitnodiging van de ontwikkelaar

Stap 1: TestFlight installeren

Open de App Store
Zoek naar TestFlight
Installeer de app (gratis)

Stap 2: Uitnodiging van de ontwikkelaar accepteren

Je kunt één of twee uitnodigingen krijgen.

A. Uitnodiging voor het developer team (optioneel)

Soms word je toegevoegd aan het team van de ontwikkelaar.

Je ontvangt een e-mail van Apple
Klik op Accept Invitation
Log in met je Apple ID
Accepteer de uitnodiging

Na het accepteren hoef je meestal niets extra's te doen.

B. Uitnodiging om de app te testen

Je krijgt een e-mail of link van de ontwikkelaar
Open die link op je iPhone of iPad
De TestFlight-app opent automatisch
Tik op Accepteer of Installeren

Stap 3: De test-app installeren

Open TestFlight
Je ziet de app die je mag testen
Tik op Installeren
De app wordt op je apparaat geïnstalleerd, net als een normale app

Stap 4: De app gebruiken

Open de app
Gebruik hem zoals je normaal zou doen
Let op:
- dingen die niet werken
- foutmeldingen
- onduidelijke knoppen of teksten

Stap 5: Feedback geven

Feedback geven helpt de ontwikkelaar de app te verbeteren.

Open TestFlight
Tik op de app
Kies Feedback geven
Beschrijf wat je hebt gemerkt (bijvoorbeeld: "De app sluit af als ik op knop X druk")

Je kunt ook screenshots meesturen.

Goed om te weten (iOS)

Test-apps zijn tijdelijk beschikbaar (meestal maximaal 90 dagen)
De app kan bugs of fouten bevatten
Updates van de test-app komen via TestFlight, niet via de App Store
Je ziet een oranje stip op het app-icoon (dat betekent dat het een test-app is)
De app verdwijnt automatisch na 90 dagen (je krijgt dan een melding)

Hoe test je een app via Google Play (Android) - Stap voor stap

Met Google Play kun je ook apps testen voordat ze voor iedereen beschikbaar zijn. Je hebt hiervoor een uitnodiging van de ontwikkelaar nodig.

Wat heb je nodig?

Een Android telefoon of tablet
Een Google account (hetzelfde account als voor de Play Store)
Een uitnodiging van de ontwikkelaar

Stap 1: Uitnodiging accepteren

Je ontvangt een e-mail of link van de ontwikkelaar
Open die link op je Android apparaat
Log in met je Google account
Tik op Word tester of Become a tester

Je ziet nu een bevestiging dat je bent aangemeld als tester.

Stap 2: De test-app installeren

Open de Google Play Store
Zoek naar MyWarranties (of de naam van de app)
Je ziet een melding dat je een beta-tester bent
Tik op Installeren
De app wordt geïnstalleerd zoals een normale app

Let op: Soms duurt het een paar minuten voordat de test-versie beschikbaar is na het accepteren van de uitnodiging. Wacht even en probeer het opnieuw als je de app niet ziet.

Stap 3: De app gebruiken

Open de app
Gebruik hem zoals je normaal zou doen
Let op:
- dingen die niet werken
- foutmeldingen
- onduidelijke knoppen of teksten
- traagheid of crashes

Stap 4: Feedback geven

Feedback geven helpt de ontwikkelaar de app te verbeteren.

Open de Google Play Store
Zoek naar de app
Scroll naar beneden naar het Beta-gedeelte
Tik op Feedback geven
Beschrijf wat je hebt gemerkt (bijvoorbeeld: "De app loopt vast bij het uploaden van foto's")

Je kunt ook screenshots toevoegen om het probleem te verduidelijken.

Goed om te weten (Android)

Test-apps kunnen bugs of fouten bevatten
Updates komen automatisch via de Play Store
Je ontvangt dezelfde updates als andere testers
De app heeft hetzelfde icoon als de normale versie
Je kunt op elk moment stoppen met testen:
1. Open de uitnodigingslink opnieuw
2. Tik op Stop met testen of Leave the program
3. Verwijder de app van je apparaat
4. Installeer de normale versie (als beschikbaar)

Veelgestelde vragen (FAQ)

Q: Moet ik betalen om te testen? A: Nee, het testen van apps via TestFlight of Google Play is altijd gratis.

Q: Kan ik de app blijven gebruiken na de testperiode? A: Bij iOS vervalt de test-versie na 90 dagen. Bij Android kun je meestal overstappen naar de normale versie wanneer die uitkomt.

Q: Zijn mijn gegevens veilig? A: Ja, test-apps gebruiken dezelfde beveiligingsmaatregelen als normale apps. Lees altijd de privacyverklaring van de app.

Q: Wat als ik een bug vind? A: Geef zo snel mogelijk feedback via TestFlight of de Play Store. Hoe meer details je geeft, hoe beter de ontwikkelaar het kan oplossen.

Q: Kan ik de test-app op meerdere apparaten installeren? A: Ja, je kunt dezelfde test-app installeren op alle apparaten die aan je account gekoppeld zijn.

Q: Ik zie de app niet in TestFlight/Play Store, wat nu? A:

Controleer of je de uitnodiging hebt geaccepteerd
Controleer of je bent ingelogd met het juiste account
Wacht een paar minuten en probeer het opnieuw
Neem contact op met de ontwikkelaar als het probleem blijft

Q: Verdwijnen mijn gegevens als de test-app vervalt? A: Dat hangt af van de app. Sommige apps slaan gegevens in de cloud op, andere lokaal. Vraag dit aan de ontwikkelaar.

Installing the Test App (Technical Guide)

iOS TestFlight

TestFlight allows beta testers to install and test the app before it's publicly available on the App Store.

For Testers:

Install TestFlight:
- Download TestFlight from the App Store
- TestFlight is Apple's official beta testing app
Accept the Invitation:
- You'll receive an email invitation to test MyWarranties
- Open the email on your iOS device
- Tap "View in TestFlight" or "Start Testing"
Install the App:
- TestFlight will open automatically
- Tap "Accept" to accept the invitation
- Tap "Install" to download the app
- The app will appear on your home screen with an orange dot
Provide Feedback:
- Open TestFlight app
- Select MyWarranties
- Tap "Send Beta Feedback" to report issues
- Include screenshots if possible

TestFlight Limitations:

Test builds expire after 90 days
Must update to new build when available
Limited to 10,000 external testers
Requires iOS 13.0 or later

For Developers - Joining Apple Developer Program:

Enroll in Apple Developer Program:
- Visit developer.apple.com
- Sign in with your Apple ID
- Enroll ($99/year for individuals, $299/year for organizations)
- Complete identity verification
Add Team Members:
- Go to App Store Connect
- Users and Access → Add new user
- Assign roles: Admin, Developer, App Manager, etc.

Upload Test Build:

bash

# In Xcode
# Product → Archive
# Distribute App → TestFlight & App Store

Add Testers:
- App Store Connect → TestFlight
- Add internal testers (team members, up to 100)
- Add external testers (public beta, up to 10,000)
- External testing requires App Review

Android Internal Testing

Google Play Console offers internal testing tracks for quick distribution to testers.

For Testers:

Join the Testing Program:
- You'll receive an invitation link via email
- Open the link on your Android device
- Sign in with your Google account
- Tap "Become a tester"
Install from Play Store:
- Open the Google Play Store
- Search for "MyWarranties"
- You'll see a note that you're a beta tester
- Tap "Install" to download the app
Provide Feedback:
- Open Play Store → MyWarranties
- Scroll to "Beta" section
- Tap "Send feedback"
- Describe issues or suggestions

Testing Track Options:

Internal Testing: Up to 100 testers, instant updates, no review
Closed Testing: Up to 1,000 testers, requires opt-in
Open Testing: Unlimited testers, public link, may require review

For Developers - Joining Google Play Developer Program:

Create Developer Account:
- Visit play.google.com/console
- Sign in with Google account
- Pay one-time $25 registration fee
- Complete account details
Create App:
- Create new app in Play Console
- Fill in store listing details
- Set up content rating
- Complete app content questionnaire

Upload Test Build:

bash

cd android
./gradlew bundleRelease

# Upload to Play Console
# Testing → Internal testing
# Create new release → Upload AAB

Add Testers:
- Testing → Internal testing
- Create email list of testers
- Add testers to the list
- Share the opt-in link with testers

Internal Testing Features:

No app review required
Instant updates (within minutes)
Up to 100 testers
Full access to all app features
Same signing key as production

Distribution Best Practices

Version Management:

Use semantic versioning (e.g., 1.2.3)
Increment build number for each upload
Include changelog in release notes

Communication with Testers:

Send email when new build is available
Include what's new and what to test
Request specific feedback on new features
Set expectations for response time

Feedback Collection:

Create feedback form (Google Forms/Typeform)
Include screenshots/video in bug reports
Track issues in GitHub/Jira
Acknowledge and respond to feedback

Testing Checklist:

Test on multiple device sizes
Test on different OS versions
Verify push notifications work
Check offline functionality
Test camera and file access
Verify API integration
Test real-time chat features

Deployment

Web Version (Kubernetes)

Build for Production:
bash
```
npm run build
```
1

Docker Image:

bash

docker build -t mywarranties-app:latest .
docker push registry.digitalocean.com/delaparra-services-private-registry/mywarranties-app:latest

Deploy to Kubernetes:
bash
```
kubectl apply -f k8s/
```
1

Access at: https://app.my-warranties.nl

Testing

Unit Tests

bash

npm run test

E2E Tests

bash

npm run test:e2e

Device Testing

iOS Simulator (included with Xcode)
Android Emulator (included with Android Studio)
Physical devices via USB

Troubleshooting

iOS Build Issues

Problem: "Unable to load contents of file list"

bash

cd ios/App
pod deintegrate
pod install

Problem: Signing errors

Check Apple Developer account
Verify bundle identifier
Check provisioning profiles

Android Build Issues

Problem: Gradle build fails

bash

cd android
./gradlew clean
./gradlew build

Problem: SDK not found

Open Android Studio
SDK Manager → Install required SDK versions
Update local.properties with SDK path

Push Notifications Not Working

iOS:

Ensure APNs certificate is valid
Check entitlements in Xcode
Verify device token sent to backend

Android:

Confirm google-services.json is present
Check FCM configuration in Firebase
Verify server key in backend

Performance Optimization

Bundle Size Reduction

Code splitting for routes
Lazy loading of components
Image optimization
Remove unused dependencies

Startup Performance

Minimize initial bundle size
Optimize images
Use React.lazy for heavy components
Cache API responses

Battery Optimization

Efficient Mercure reconnection
Debounce API calls
Background task limits
Optimize image uploads

App Store Metadata

Screenshots Required

iPhone (6.5" and 5.5")
iPad (12.9" and 11")
Android Phone
Android Tablet

App Description

Manage all your product warranties in one place. Track warranty expiration dates, create claims, and chat with suppliers in real-time.

Keywords

warranty, warranty tracking, product management, claims, customer service, receipts, OCR

Security

JWT tokens stored in secure storage (Keychain/Keystore)
HTTPS for all API calls
Certificate pinning
Biometric authentication support
Secure handling of sensitive data

Next Steps

Getting Started - Set up development environment
Architecture - Understand the full system
API Reference - Explore API endpoints
ERP System - Learn about the web management interface

Mobile App (iOS & Android) ​

Overview ​

Technology Stack ​

Core Technologies ​

Native Capabilities ​

Features ​

Real-Time Chat ​

Product Management ​

Warranty Tracking ​

Claims Management ​

User Profile ​

Project Structure ​

Setup & Development ​

Prerequisites ​

Installation ​

iOS Development ​

Android Development ​

Native Features ​

Push Notifications ​

Camera & Photos ​

File System ​

Real-Time Features ​

Mercure Integration ​

Chat Implementation ​

API Integration ​

Authentication ​

API Endpoints Used ​

Building for Production ​

iOS App Store ​

Android Play Store ​

Voor Testers: Test de App (Nederlands) ​

Hoe test je een app met TestFlight (iOS) - Stap voor stap ​

Wat heb je nodig? ​

Stap 1: TestFlight installeren ​

Stap 2: Uitnodiging van de ontwikkelaar accepteren ​

A. Uitnodiging voor het developer team (optioneel) ​

B. Uitnodiging om de app te testen ​

Stap 3: De test-app installeren ​

Stap 4: De app gebruiken ​

Stap 5: Feedback geven ​

Goed om te weten (iOS) ​

Hoe test je een app via Google Play (Android) - Stap voor stap ​

Wat heb je nodig? ​

Stap 1: Uitnodiging accepteren ​

Stap 2: De test-app installeren ​

Stap 3: De app gebruiken ​

Stap 4: Feedback geven ​

Goed om te weten (Android) ​

Veelgestelde vragen (FAQ) ​

Installing the Test App (Technical Guide) ​

iOS TestFlight ​

Android Internal Testing ​

Distribution Best Practices ​

Deployment ​

Web Version (Kubernetes) ​

Testing ​

Unit Tests ​

E2E Tests ​

Device Testing ​

Troubleshooting ​

iOS Build Issues ​

Android Build Issues ​

Push Notifications Not Working ​

Performance Optimization ​

Bundle Size Reduction ​

Startup Performance ​

Battery Optimization ​

App Store Metadata ​

Screenshots Required ​

App Description ​

Keywords ​

Security ​

Next Steps ​

Mobile App (iOS & Android)

Overview

Technology Stack

Core Technologies

Native Capabilities

Features

Real-Time Chat

Product Management

Warranty Tracking

Claims Management

User Profile

Project Structure

Setup & Development

Prerequisites

Installation

iOS Development

Android Development

Native Features

Push Notifications

Camera & Photos

File System

Real-Time Features

Mercure Integration

Chat Implementation

API Integration

Authentication

API Endpoints Used

Building for Production

iOS App Store

Android Play Store

Voor Testers: Test de App (Nederlands)

Hoe test je een app met TestFlight (iOS) - Stap voor stap

Wat heb je nodig?

Stap 1: TestFlight installeren

Stap 2: Uitnodiging van de ontwikkelaar accepteren

A. Uitnodiging voor het developer team (optioneel)

B. Uitnodiging om de app te testen

Stap 3: De test-app installeren

Stap 4: De app gebruiken

Stap 5: Feedback geven

Goed om te weten (iOS)

Hoe test je een app via Google Play (Android) - Stap voor stap

Wat heb je nodig?

Stap 1: Uitnodiging accepteren

Stap 2: De test-app installeren

Stap 3: De app gebruiken

Stap 4: Feedback geven

Goed om te weten (Android)

Veelgestelde vragen (FAQ)

Installing the Test App (Technical Guide)

iOS TestFlight

Android Internal Testing

Distribution Best Practices

Deployment

Web Version (Kubernetes)

Testing

Unit Tests

E2E Tests

Device Testing

Troubleshooting

iOS Build Issues

Android Build Issues

Push Notifications Not Working

Performance Optimization

Bundle Size Reduction

Startup Performance

Battery Optimization

App Store Metadata

Screenshots Required

App Description

Keywords

Security

Next Steps