# alexander2523/aplicacionforaneos architecture

> Architecture diagram of the GitHub repository alexander2523/aplicacionforaneos, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/alexander2523/aplicacionforaneos
- Repository: https://github.com/alexander2523/aplicacionforaneos

## Overview

1. This is a single mobile client app, built with Expo/React Native and TypeScript, organized with Expo Router. There is no separate backend code in the repo; the app integrates with external services from the client side.

2. The top-level application shell lives in `app/_layout.tsx`, with a tab-based navigation area under `app/(tabs)` and several standalone screens outside the tabs. The route structure suggests a stack of feature screens layered over a main tab shell.

3. The main product domain is a “rooms” marketplace / housing-for-people-on-the-move app: `home`, `add-room`, `room-detail`, `map`, `chat`, `chats`, `settings`, `edit-profile`, and `change-password` cover discovery, publishing listings, viewing details, messaging, and account management. The Spanish-named routes `detalle/[id].tsx` and `chat/[id].tsx` are dynamic detail pages.

4. Authentication and user session state are centralized in `utils/session.tsx`. That module is the likely boundary for sign-in state, current user info, and app-wide auth gating, which then influences navigation into the main tabs and profile/settings screens.

5. Data access and external integration are isolated in `services/` and `firebase/`. `firebase/config.js` initializes Firebase; `services/cloudinary.ts` handles image uploads; `services/storage.ts` handles device/local persistence; and `services/favorito.ts` encapsulates favorite-room behavior. This keeps screens thin and pushes infrastructure concerns into dedicated modules.

6. There is also a `database/database.js` layer, indicating some local or embedded persistence abstraction separate from Firebase. In the architecture diagram, this should be shown as a second data store/service boundary alongside Firebase and Cloudinary, not as part of the UI.

7. The UI is split into reusable presentational components under `components/`, including themed text/view wrappers, a collapsible UI primitive, haptic tab behavior, and small utility visuals. These components are shared across routes to keep screen logic and styling consistent.

8. Theme and platform adaptation are handled in `constants/theme.ts` plus the `hooks/use-color-scheme*` and `hooks/use-theme-color.ts` hooks. This suggests the app supports light/dark mode and platform-specific rendering differences, including iOS-specific icon handling in `components/ui/icon-symbol.ios.tsx`.

9. The dominant data flows are:
   - user auth/session -> route access and profile screens,
   - room creation/editing -> image upload via Cloudinary -> persistence through Firebase/local database,
   - room browsing -> detail/map screens -> favorite/chat actions,
   - chat list/detail screens -> messaging tied to selected room/user context.
   These flows all converge back into the screen layer through the service abstractions.

10. Tooling and project scaffolding are standard Expo app concerns: `app.json`, ESLint config, TypeScript config, and a reset script for project cleanup. The repo’s architecture is therefore best drawn as a client app with a router-driven screen layer on top, shared UI/theme utilities in the middle, and service adapters to Firebase, Cloudinary, storage, and local database at the bottom.

Main entry points: [`cuartos-app/app/_layout.tsx`](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/_layout.tsx) (App shell), [`cuartos-app/app/(tabs)/_layout.tsx`](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/(tabs)/_layout.tsx) (Tabs layout), [`cuartos-app/app/home.tsx`](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/home.tsx) (Home), [`cuartos-app/utils/session.tsx`](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/utils/session.tsx) (Session)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing & screens"]
  node_app_layout["App shell<br/>expo-router layout<br/>[_layout.tsx]"]
  node_tabs_layout["Tabs layout<br/>tab router<br/>[_layout.tsx]"]
  node_home_screen["Home<br/>discovery screen<br/>[home.tsx]"]
  node_add_room_screen["Add room<br/>listing screen<br/>[add-room.tsx]"]
  node_room_detail_screen["Room detail<br/>detail screen<br/>[room-detail.tsx]"]
  node_map_screen["Map<br/>browse screen<br/>[map.tsx]"]
  node_chat_list_screen["Chats<br/>inbox screen<br/>[index.tsx]"]
  node_chat_screen["Chat<br/>message screen<br/>[[id].tsx]"]
  node_detalle_screen["Detalle<br/>detail screen<br/>[[id].tsx]"]
  node_settings_screen["Settings<br/>account screen<br/>[settings.tsx]"]
  node_edit_profile_screen["Edit profile<br/>profile screen<br/>[edit-profile.tsx]"]
  node_change_password_screen["Change password<br/>security screen"]
end

subgraph group_shared["Shared UI"]
  node_ui_components["UI kit<br/>shared components<br/>[themed-text.tsx]"]
  node_ui_primitives["UI primitives<br/>ui helpers<br/>[collapsible.tsx]"]
end

subgraph group_state["State & theme"]
  node_session_state[("Session<br/>auth state<br/>[session.tsx]")]
  node_theme_constants["Theme<br/>design tokens<br/>[theme.ts]"]
  node_theme_hooks["Theme hooks<br/>hook layer<br/>[use-theme-color.ts]"]
end

subgraph group_services["Services & data"]
  node_cloudinary_service[("Cloudinary<br/>upload service<br/>[cloudinary.ts]")]
  node_favorite_service["Favorites<br/>domain service<br/>[favorito.ts]"]
  node_storage_service[("Storage<br/>local persistence<br/>[storage.ts]")]
  node_firebase_config[("Firebase<br/>backend adapter<br/>[config.js]")]
  node_local_db[("Local DB<br/>data store<br/>[database.js]")]
end

subgraph group_infra["Infrastructure"]
  node_app_config["App config<br/>expo config<br/>[app.json]"]
  node_project_scripts["Reset script<br/>tooling<br/>[reset-project.js]"]
end

node_app_layout -->|"hosts"| node_tabs_layout
node_app_layout -->|"routes to"| node_home_screen
node_app_layout -->|"routes to"| node_room_detail_screen
node_app_layout -->|"routes to"| node_chat_screen
node_app_layout -->|"routes to"| node_detalle_screen
node_tabs_layout -->|"tab"| node_home_screen
node_tabs_layout -->|"tab"| node_add_room_screen
node_tabs_layout -->|"tab"| node_chat_list_screen
node_tabs_layout -->|"tab"| node_settings_screen
node_home_screen -->|"opens"| node_room_detail_screen
node_home_screen -->|"switches"| node_map_screen
node_add_room_screen -->|"uploads"| node_cloudinary_service
node_add_room_screen -->|"persists"| node_firebase_config
node_add_room_screen -->|"caches"| node_local_db
node_room_detail_screen -->|"favorites"| node_favorite_service
node_room_detail_screen -->|"messages"| node_chat_screen
node_chat_list_screen -->|"opens"| node_chat_screen
node_session_state -->|"gates"| node_app_layout
node_session_state -->|"drives"| node_settings_screen
node_session_state -->|"drives"| node_edit_profile_screen
node_session_state -->|"drives"| node_change_password_screen
node_theme_hooks -->|"reads"| node_theme_constants
node_ui_components -->|"uses"| node_theme_hooks
node_ui_primitives -->|"uses"| node_theme_hooks
node_ui_components -->|"renders"| node_tabs_layout
node_ui_primitives -->|"renders"| node_home_screen
node_firebase_config -->|"coordinates"| node_storage_service
node_firebase_config -->|"backs"| node_local_db
node_project_scripts -->|"supports"| node_app_config

click node_app_layout "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/_layout.tsx"
click node_tabs_layout "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/(tabs)/_layout.tsx"
click node_home_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/home.tsx"
click node_add_room_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/add-room.tsx"
click node_room_detail_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/room-detail.tsx"
click node_map_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/map.tsx"
click node_chat_list_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/chats/index.tsx"
click node_chat_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/chat/[id].tsx"
click node_detalle_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/detalle/[id].tsx"
click node_settings_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/settings.tsx"
click node_edit_profile_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/edit-profile.tsx"
click node_change_password_screen "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/change-password.tsx"
click node_session_state "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/utils/session.tsx"
click node_theme_constants "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/constants/theme.ts"
click node_theme_hooks "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/hooks/use-theme-color.ts"
click node_ui_components "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/components/themed-text.tsx"
click node_ui_primitives "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/components/ui/collapsible.tsx"
click node_cloudinary_service "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/cloudinary.ts"
click node_favorite_service "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/favorito.ts"
click node_storage_service "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/storage.ts"
click node_firebase_config "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/firebase/config.js"
click node_local_db "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/database/database.js"
click node_app_config "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app.json"
click node_project_scripts "https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/scripts/reset-project.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_layout,node_tabs_layout,node_home_screen,node_add_room_screen,node_room_detail_screen,node_map_screen,node_chat_list_screen,node_chat_screen,node_detalle_screen,node_settings_screen,node_edit_profile_screen,node_change_password_screen toneBlue
class node_ui_components,node_ui_primitives toneAmber
class node_session_state,node_theme_constants,node_theme_hooks toneMint
class node_cloudinary_service,node_favorite_service,node_storage_service,node_firebase_config,node_local_db toneRose
class node_app_config,node_project_scripts toneIndigo
```

## Components

### Routing & screens

Expo Router app shell, tab layout, and feature screens.

- [App shell](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/_layout.tsx): expo-router layout · Root navigation stack and app-wide shell. · `cuartos-app/app/_layout.tsx`
- [Tabs layout](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/(tabs)/_layout.tsx): tab router · Bottom tab navigation container. · `cuartos-app/app/(tabs)/_layout.tsx`
- [Home](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/home.tsx): discovery screen · Main room browsing entry point. · `cuartos-app/app/home.tsx`
- [Add room](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/add-room.tsx): listing screen · Create and publish a room listing. · `cuartos-app/app/add-room.tsx`
- [Room detail](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/room-detail.tsx): detail screen · Primary room detail and actions view. · `cuartos-app/app/room-detail.tsx`
- [Map](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/map.tsx): browse screen · Location-based room discovery view. · `cuartos-app/map.tsx`
- [Chats](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/chats/index.tsx): inbox screen · Conversation list and entry point to messages. · `cuartos-app/chats/index.tsx`
- [Chat](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/chat/[id].tsx): message screen · Conversation thread for a selected chat. · `cuartos-app/chat/[id].tsx`
- [Detalle](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/detalle/[id].tsx): detail screen · Spanish dynamic room detail route. · `cuartos-app/detalle/[id].tsx`
- [Settings](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/settings.tsx): account screen · User settings and app preferences. · `cuartos-app/app/settings.tsx`
- [Edit profile](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/edit-profile.tsx): profile screen · Edit personal account information. · `cuartos-app/app/edit-profile.tsx`
- [Change password](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app/change-password.tsx): security screen · Credential update flow. · `cuartos-app/app/change-password.tsx`

### Shared UI

Reusable visual components used across routes.

- [UI kit](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/components/themed-text.tsx): shared components · Reusable themed text, view, and helper components. · `cuartos-app/components/themed-text.tsx`
- [UI primitives](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/components/ui/collapsible.tsx): ui helpers · Small shared UI building blocks and platform-specific icon support. · `cuartos-app/components/ui/collapsible.tsx`

### State & theme

Session state and theme hooks/constants.

- [Session](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/utils/session.tsx): auth state · Centralized user session and auth gating. · `cuartos-app/utils/session.tsx`
- [Theme](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/constants/theme.ts): design tokens · Shared color and theme constants. · `cuartos-app/constants/theme.ts`
- [Theme hooks](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/hooks/use-theme-color.ts): hook layer · Color-scheme and theme selection hooks. · `cuartos-app/hooks/use-theme-color.ts`

### Services & data

Adapters for external services and local persistence.

- [Cloudinary](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/cloudinary.ts): upload service · Image upload integration for room listings. · `cuartos-app/services/cloudinary.ts`
- [Favorites](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/favorito.ts): domain service · Favorite-room behavior and lookup logic. · `cuartos-app/services/favorito.ts`
- [Storage](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/services/storage.ts): local persistence · Device or local storage abstraction. · `cuartos-app/services/storage.ts`
- [Firebase](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/firebase/config.js): backend adapter · Firebase initialization and client configuration. · `cuartos-app/firebase/config.js`
- [Local DB](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/database/database.js): data store · Embedded or local database layer. · `cuartos-app/database/database.js`

### Infrastructure

App-level config and project scaffolding.

- [App config](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/app.json): expo config · Expo application configuration. · `cuartos-app/app.json`
- [Reset script](https://github.com/alexander2523/aplicacionforaneos/blob/main/cuartos-app/scripts/reset-project.js): tooling · Project cleanup and reset utility. · `cuartos-app/scripts/reset-project.js`

## Connections

- App shell → Tabs layout: hosts · Root shell contains the tab navigator.
- App shell → Home: routes to · Stack-level routes overlay the main app shell.
- App shell → Room detail: routes to · Standalone feature screens live above the shell.
- App shell → Chat: routes to · Dynamic detail routes are mounted by the root stack.
- App shell → Detalle: routes to · Localized dynamic detail route.
- Tabs layout → Home: tab · Primary tab entry to discovery.
- Tabs layout → Add room: tab · Publishing flow from the tab shell.
- Tabs layout → Chats: tab · Inbox entry from the tab shell.
- Tabs layout → Settings: tab · Account/settings area from the tab shell.
- Home → Room detail: opens · Browsing leads into room details.
- Home → Map: switches · Discovery can pivot to map view.
- Add room → Cloudinary: uploads · Listing creation sends images to Cloudinary.
- Add room → Firebase: persists · Room data is stored through Firebase-backed services.
- Add room → Local DB: caches · Local persistence supports offline or auxiliary storage.
- Room detail → Favorites: favorites · Detail actions use the favorites service.
- Room detail → Chat: messages · Room detail can launch a conversation.
- Chats → Chat: opens · Conversation list drills into a thread.
- Session → App shell: gates · Auth/session state influences route access.
- Session → Settings: drives · Session data powers profile and account screens.
- Session → Edit profile: drives · Current user context is required for editing profile.
- Session → Change password: drives · Password changes are tied to the active session.
- Theme hooks → Theme: reads · Hooks resolve colors from shared tokens.
- UI kit → Theme hooks: uses · Shared components adapt to theme hooks.
- UI primitives → Theme hooks: uses · Primitive UI pieces follow the active color scheme.
- UI kit → Tabs layout: renders · Tab chrome and screens reuse the shared UI kit.
- UI primitives → Home: renders · Screens compose reusable UI primitives.
- Firebase → Storage: coordinates · App data flows through client-side persistence layers.
- Firebase → Local DB: backs · Firebase sits alongside local data storage.
- Reset script → App config: supports · Scaffolding and reset tooling support the Expo project.