CasaDoc — mobile app

Mobile client for the CasaDoc property-document platform, for iOS and Android from a single codebase.

Stack: Expo SDK 52 · React Native 0.76 · expo-router · TypeScript · React Query · expo-secure-store · i18n-js.

The app can run against the PHP backend or against in-memory demo data; the choice is one constant in src/api/config.ts.

Features

Account

Login with email and password, bearer token kept in SecureStore, auto-login on next launch.
Registration with e-mail code verification.
Password recovery (request a code, set a new password) and password change from inside the app.
Profile editing, avatar, account deletion.
Interface in Italian and English, following the device language, with a manual override in the profile.

Properties

List with cover image, address and document counters.
Detail screen with document categories as folders and recent documents.
Create and edit, including a map picker for the address (react-native-maps).

Documents

Per-property list, filtered by category and by status.
Search across every document of every property.
Expiry tracking: valid, expiring and expired badges, warning banners, and a dedicated tab listing everything that needs attention.
Detail screen with an inline preview for images and a card that hands PDFs to the phone's own viewer; sharing and deletion.
Editing of name, category and expiry date.

Adding a document

From the file picker, from the photo library, or with the built-in scanner.
The scanner uses the native document scanner (ML Kit on Android, VisionKit on iOS) with edge detection and perspective correction, captures several pages and combines them into one PDF (src/scanner/scanToPdf.ts).

Offline

Responses are cached and persisted, so a previously opened screen still shows its content without a connection; a banner appears while the device is offline and the data refreshes as soon as it is back.

Getting started

npm install

The scanner, the maps and the file viewer are native modules, so the app needs a development build rather than Expo Go:

npx expo run:ios        # or: npx expo run:android
npm start               # subsequent runs

With EAS instead of a local build:

npx eas build --profile development --platform ios   # or android

npm run prebuild regenerates the native projects (expo prebuild --clean); ios/ and android/ are not kept in the repository because everything native is declared by config plugins in app.json, and npm install applies patches/ through patch-package.

When the phone is connected over USB, npm run reverse forwards the Metro and backend ports to it.

Pointing the app at a backend

Everything goes through src/api/config.ts:

export const USE_MOCK = false;   // true -> in-memory demo data, no server

USE_MOCK = true uses src/api/mock.ts: every flow works offline on demo data, and any credentials are accepted at login.
USE_MOCK = false uses src/api/real.ts, mapped to the endpoints in openapi.yaml.

The address of the server comes from two places: DEV_HOST in the same file for development builds, and expo.extra.apiUrl in app.json for release builds. A release build must use https, because both platforms block plain HTTP traffic outside development.

The screens import api from @/api and never know which of the two is active.

How documents map to the backend

The screens work with a flat model: a property owns documents, each with a category and an optional expiry date. The backend nests the same data one level deeper, as page (slug) → section → document requirement → uploaded files. src/api/real.ts holds that mapping. Reads flatten the structure for display; writes stay faithful, because the upload screen has the user pick a real requirement and sends its id.

Two consequences are worth knowing:

A property's documents are gathered with one request per category page, since the endpoint serves a single page at a time. The properties list does not pay that cost — it uses the counters homes.php returns.
There is no endpoint for a single file's metadata, so document screens read from the list they were opened from.

Project structure

app/                            expo-router routes
  _layout.tsx                   providers, auth gate
  (auth)/                       login, register, verify, forgot, reset
  (tabs)/                       properties · search · expiring · profile
  property/[id].tsx             property detail
  property/add.tsx              new property
  property/edit/[id].tsx        edit property
  property/location.tsx         map picker for the address
  documents/[propertyId].tsx    documents of a property
  document/[id].tsx             document detail and viewer
  document/edit/[id].tsx        edit a document
  profile/edit.tsx              profile
  profile/password.tsx          change password
  upload.tsx                    add a document: file, gallery or scan

src/
  api/          config.ts (backend switch), http.ts, types.ts, mock.ts, real.ts
  auth/         AuthContext, token in SecureStore
  i18n/         en.ts, it.ts, locale detection and override
  scanner/      scanToPdf.ts
  theme/        design tokens (colours, spacing, radii, typography)
  components/   ui.tsx, domain.tsx, forms, AppBar, PdfView, OfflineBanner
  lib/          formatting, permissions, files, network, query client

Scripts


`npm start`	Metro for a development build
`npm run ios` / `npm run android`	build and install on device or simulator
`npm run prebuild`	regenerate `ios/` and `android/`
`npm run typecheck`	TypeScript, no emit
`npm run lint`	ESLint
`npm run reverse`	forward ports 8081 and 8080 to a USB-connected Android device

Notes

Design tokens live in src/theme/tokens.ts and are the single source for colours, spacing, radii and typography. Typography currently maps to the system font; loading Space Grotesk and Inter through expo-font is a change in that one file.
Sharing between owners, ownership transfer and reports exist in the backend contract but are outside the scope of this app.

6.2 KiB Raw Permalink Blame History