📱 Roadmap · React Native + Expo

User Stories por Phases

37 user stories en 6 fases. Cada fase incluye los módulos de arquitectura que deben estar listos antes de empezar.

P0
Bootstrap primero
6
Phases
37
User Stories
7
🆕 Stories nuevas
Matriz de prerequisitos por fase
Módulo de arquitectura P0 P1 P2 P3 P4 P5 P6
Expo project + Expo Router
EAS account + eas.json
Variables de entorno (.env)
API Client (Axios + JWT interceptors)
SecureStore (token storage)
Zustand auth store
TanStack Query (QueryClient)
AuthGuard + Navigation shell
React Hook Form + Zod
Query hooks: budgets / categories / prefs
BottomSheet / Modal component
Query hooks: transactions
FlatList infinita + FAB
Swipe-to-delete (Reanimated)
expo-auth-session + Deep links
Query hooks: gmail accounts
Development Build (EAS)
expo-notifications + push token flow
expo-local-authentication
Backend: 4 endpoints push + Prisma migration
FCM credentials + APNs (EAS Secrets)
MMKV + Offline queue (Zustand)
NetInfo listener
Draggable FlatList (Reanimated)
Debe construirse en esta fase
Ya existe (fase anterior)
No aplica todavía
P0

Bootstrap — Configuración inicial

No hay user stories aquí. Es el andamiaje necesario antes de escribir la primera pantalla.

0 user stories · prerequisito de todo
🔧 Módulos a construir en P0
Proyecto & tooling
📦 npx create-expo-app finpal --template 🗂️ Expo Router v4 configurado ☁️ EAS account + proyecto vinculado 🔑 eas.json (dev / preview / prod)
Variables de entorno
⚙️ .env.local con EXPO_PUBLIC_API_URL 🔐 EAS Secrets para producción
Verificar
🌐 Backend accesible vía HTTPS 📱 Expo Go instalado en el teléfono de prueba 🔗 Repo Git inicializado
P1

Foundation — Auth & Dashboard Base

El usuario puede crear cuenta, iniciar sesión y ver el dashboard con sus datos.

7 user stories
🧱 Prerequisitos — construir antes de empezar P1
P0 completo +
🌐 API Client — Axios + interceptor JWT 🔁 Interceptor de refresh token (401 → retry) 🔐 Expo SecureStore — guardar / leer accessToken y refreshToken 🐻 Zustand auth store (user, tokens, isAuthenticated) TanStack Query — QueryClientProvider en _layout.tsx 🛡️ AuthGuard — redirige a /auth si no hay token 🗂️ Navigation shell — tab bar con 4 tabs
Herramienta de prueba
📱 Expo Go — suficiente para toda esta fase
🔐 Autenticación 🏠 Dashboard
US-AUTH-01Registro con email y contraseñaAuth

Como usuario nuevo, quiero crear una cuenta con mi email y contraseña para acceder a la app.

  • Email único validado en servidor
  • Contraseña con requisitos mínimos de seguridad
  • Redirige al dashboard al completar
US-AUTH-02Login con email y contraseñaAuth

Como usuario registrado, quiero iniciar sesión con mis credenciales.

  • JWT con refresh token automático
  • Token expirado → logout automático + redirect a login
US-AUTH-03Login con Google (OAuth)Auth

Como usuario, quiero iniciar sesión con mi cuenta de Google.

  • Google OAuth 2.0 via WebView en mobile (P1 usa WebView temporal; P4 lo migra a PKCE)
US-AUTH-04Recuperar contraseña por emailAuth

Como usuario, quiero recibir un link por email para restablecer mi contraseña.

  • Link temporizado enviado al email
  • Deep link básico para abrir el formulario en la app
US-AUTH-05Cerrar sesiónAuth

Como usuario, quiero cerrar sesión para proteger mi cuenta.

  • Limpia tokens locales y regresa a la pantalla de login
US-DASH-01Ver resumen financiero del períodoDashboard

Como usuario, quiero ver cuánto he gastado vs mi presupuesto en el período actual.

  • Cards por categoría con barra de progreso
  • Monto gastado, restante y porcentaje
US-DASH-02Navegar entre períodosDashboard

Como usuario, quiero poder ver los datos de meses anteriores o futuros.

  • Swipe horizontal o botones ← → para cambiar período
  • Botón para volver al período actual
P2

Budgets Core

El usuario puede crear, editar y configurar sus presupuestos. El wizard guía el primer uso.

8 user stories
🧱 Prerequisitos — construir antes de empezar P2
P1 completo +
📝 React Hook Form + Zod — validación de formularios Query hooks: useBudgets, useCategories, usePreferences 🧮 Period calculation utilities (calcular inicio/fin de período) 🪟 BottomSheet / Modal component reutilizable
Herramienta de prueba
📱 Expo Go — sigue siendo suficiente
🎯 Presupuestos📆 Períodos⚙️ Preferencias
US-BUDGET-01Crear presupuestos con el wizard (primer uso)Budgets

Como usuario nuevo, quiero que la app me guíe para crear mis primeros presupuestos.

  • Aparece cuando no hay presupuestos en el período
  • Selección de perfil de gasto y categorías personalizables
  • Configura el tipo de período en el mismo flujo
US-BUDGET-02Agregar presupuesto individualBudgets

Como usuario, quiero agregar un presupuesto para una categoría específica.

  • Nombre de categoría + monto + moneda
US-BUDGET-03Editar monto de presupuestoBudgets

Como usuario, quiero editar el monto de un presupuesto existente.

  • Edición inline en la card del presupuesto
US-BUDGET-04Editar nombre de categoríaBudgets

Como usuario, quiero renombrar una categoría de presupuesto.

  • Afecta al presupuesto y a todas las transacciones de esa categoría
US-BUDGET-05Eliminar presupuestoBudgets

Como usuario, quiero eliminar un presupuesto cuando ya no aplica.

  • Confirmación via BottomSheet (construido en P2)
  • Elimina también las transacciones de esa categoría
US-PERIOD-01Configurar tipo de período presupuestalPeríodo

Como usuario, quiero definir si mi período es por mes calendario o inicia un día específico del mes.

  • Modal de selección de período (usa BottomSheet de P2)
US-PERIOD-02Ver período actual con fechas exactasPeríodo

Como usuario, quiero ver las fechas exactas de inicio y fin de mi período actual.

  • Usa las period utils construidas en P2
US-PREF-02Cambiar moneda predeterminadaPreferencias

Como usuario, quiero definir la moneda en la que veo mis presupuestos y transacciones.

  • Guardado en servidor via PUT /preferences
P3

Transactions Core

El usuario puede registrar, buscar, editar y categorizar transacciones — incluyendo las capturadas por Penny.

8 user stories
🧱 Prerequisitos — construir antes de empezar P3
P2 completo +
Query hooks: useTransactions, useAddTransaction, useEditTransaction, useDeleteTransaction 📜 FlatList con infinite scroll (paginación automática) FAB component (Floating Action Button) 👆 Swipe-to-delete con React Native Reanimated
Herramienta de prueba
📱 Expo Go — sigue siendo suficiente
🧾 Transacciones🏠 Dashboard
US-TXN-01Agregar gasto manualTransacciones

Como usuario, quiero registrar un gasto manualmente cuando no llega por email.

  • Monto, descripción, categoría, fecha, moneda
  • FAB (construido en P3) en la pantalla de transacciones
US-TXN-02Ver lista de transacciones recientesTransacciones

Como usuario, quiero ver mis transacciones con paginación.

  • Infinite scroll via FlatList (construido en P3)
US-TXN-03Buscar transaccionesTransacciones

Como usuario, quiero buscar entre mis transacciones por descripción.

  • Búsqueda en tiempo real, reset a página 1 al cambiar búsqueda
US-TXN-04Editar transacciónTransacciones

Como usuario, quiero editar el monto, descripción, categoría, fecha o tipo de una transacción.

  • BottomSheet de edición (construido en P2)
US-TXN-05Categorizar transacciónTransacciones

Como usuario, quiero asignar una categoría a una transacción para que impacte en el presupuesto correcto.

  • Opción para crear presupuesto nuevo si la categoría no existe
US-TXN-06Eliminar transacciónTransacciones

Como usuario, quiero eliminar una transacción incorrecta o duplicada.

  • Swipe-to-delete (construido en P3) + confirmación
US-TXN-08Ver y resolver transacciones sin categoríaTransacciones

Como usuario, quiero ver las transacciones auto-detectadas por Penny que aún no clasifiqué.

  • Sección prioritaria en la parte superior del dashboard
US-DASH-03Alerta de transacciones sin categoríaDashboard

Como usuario, quiero ver un banner cuando haya transacciones pendientes de categorizar.

  • Banner al tope con contador de pendientes
P4

Gmail / Penny Integration

El usuario conecta su Gmail para que Penny detecte transacciones automáticamente. El diferenciador del producto.

6 user stories
🧱 Prerequisitos — construir antes de empezar P4
P3 completo +
🔗 Deep link scheme en app.json — "finpal://" 🔐 expo-auth-session instalado + PKCE configurado 📧 Google OAuth credentials para app nativa (Google Cloud Console) 🔀 Gmail callback screen — handler del deep link finpal://gmail/callback Query hooks: useGmailAccounts, useGmailStatus
Herramienta de prueba
⚠️ Expo Go ya no funciona para OAuth nativo 🔨 Development Build via EAS — primer build de desarrollo
📧 Gmail🤖 Penny
US-GMAIL-01Conectar cuenta GmailGmail

Como usuario, quiero conectar mi Gmail para que Penny monitoree mis correos bancarios automáticamente.

  • expo-auth-session con PKCE (no WebView genérico)
  • Se registra en Penny vía POST /api/external/register-account
US-GMAIL-02Ver estado de conexión GmailGmail

Como usuario, quiero ver si mi Gmail está conectado y activo.

  • Indicador en el header: conectado / sincronizando / error
US-GMAIL-03Pausar monitoreo de GmailGmail

Como usuario, quiero pausar temporalmente el monitoreo sin desconectar la cuenta.

US-GMAIL-04Reanudar monitoreo de GmailGmail

Como usuario, quiero reanudar el monitoreo después de haberlo pausado.

US-GMAIL-05Desconectar cuenta GmailGmail

Como usuario, quiero desconectar mi cuenta Gmail.

  • Confirmación via BottomSheet
US-GMAIL-06Gestionar cuentas Gmail desde configuraciónGmail

Como usuario, quiero ver y gestionar todas mis cuentas Gmail desde un lugar dedicado.

P5

Push Notifications & Mobile Native

Lo que justifica hacer la app nativa: notificaciones de límites de gasto, biometría y preferencias.

9 user stories · 7 nuevas 🆕
🧱 Prerequisitos — construir antes de empezar P5
P4 completo + módulos nativos
🔔 expo-notifications instalado en Development Build 🔐 expo-local-authentication instalado en Development Build 🆔 EAS Project ID en app.json (para Expo Push Tokens)
Credenciales nativas (obligatorio antes de push)
🤖 FCM Server Key — Google Cloud Console → Firebase 🍎 APNs Key + Certificate — Apple Developer Account ☁️ Ambos cargados en EAS Credentials
Backend — deploy antes de empezar P5
🆕 POST /notifications/push-token 🆕 DELETE /notifications/push-token 🆕 GET /notifications/settings 🆕 PUT /notifications/settings 🗄️ Prisma migration: PushToken + NotificationSetting checkBudgetAlerts() integrado en el webhook de Penny
Herramienta de prueba
🔨 Development Build actualizado con los nuevos módulos nativos
🔔 Push🔐 Biometría⚙️ Preferencias
US-PUSH-01Recibir notificación al acercarse al límite nuevoPush

Como usuario, quiero recibir una push cuando lleve 80% del presupuesto de una categoría gastado.

  • Trigger: webhook de Penny → backend calcula % → Expo Push Service
US-PUSH-02Recibir notificación al exceder presupuesto nuevoPush

Como usuario, quiero recibir una notificación urgente cuando supere el 100% del presupuesto.

US-PUSH-03Activar / desactivar notificaciones push nuevoPush

Como usuario, quiero controlar si recibo o no notificaciones push.

  • Solicitar permiso en onboarding
  • Toggle en configuración → PUT /notifications/settings
US-PUSH-04Configurar umbral de alerta por categoría nuevoPush

Como usuario, quiero personalizar el porcentaje a partir del cual recibo alertas por categoría.

  • Default 80%, configurable por categoría
US-BIO-01Autenticarse con biometría nuevoAuth

Como usuario, quiero usar Face ID / Touch ID para entrar rápido a la app.

  • Usa expo-local-authentication
  • Solo desbloquea sesión local — el JWT sigue siendo el auth real
US-BIO-02Configurar PIN como alternativa nuevoAuth

Como usuario, quiero configurar un PIN de 4-6 dígitos si no tengo biometría disponible.

  • Almacenado en Expo SecureStore (cifrado)
US-PUSH-05Recibir notificación de nueva transacción detectada nuevoPush

Como usuario, quiero recibir una push cada vez que Penny detecta una nueva transacción.

  • Notificación informativa (no urgente)
  • Tap abre directamente la pantalla de "sin categoría"
US-PREF-01Cambiar idioma de la interfazPreferencias

Como usuario, quiero que mi preferencia de idioma se guarde y persista entre sesiones.

US-PREF-03Eliminar cuentaPreferencias

Como usuario, quiero poder eliminar mi cuenta y todos mis datos.

  • DELETE /auth/profile con confirmación explícita
P6

Polish & Advanced Features

Funcionalidades avanzadas de organización, gestión masiva y capacidades nativas adicionales.

7 user stories · 1 nueva 🆕
🧱 Prerequisitos — construir antes de empezar P6
P5 completo +
react-native-mmkv instalado 🐻 Zustand offline queue store (persiste en MMKV) 🌐 @react-native-community/netinfo — detecta cambios de conectividad ↕️ react-native-draggable-flatlist — drag & drop para reordenar
Herramienta de prueba
🔨 Development Build actualizado con MMKV + NetInfo + DraggableFlatList
🎯 Budgets🧾 Transacciones🏠 Dashboard🔄 Offline
US-BUDGET-06Reordenar presupuestosBudgets

Como usuario, quiero ordenar las categorías de presupuesto según mis prioridades.

  • Drag & drop via react-native-draggable-flatlist (construido en P6)
US-BUDGET-07Copiar presupuestos del período anteriorBudgets

Como usuario, quiero replicar los presupuestos del mes pasado al mes actual con un toque.

US-BUDGET-08Borrar todos los presupuestosBudgets

Como usuario, quiero limpiar todos los presupuestos del período para empezar de cero.

US-TXN-07Borrar todas las transaccionesTransacciones

Como usuario, quiero limpiar todas las transacciones para reiniciar el período.

US-DASH-04Cambiar tema claro / oscuroDashboard

Como usuario, quiero alternar entre tema claro y oscuro.

  • Respeta el tema del sistema operativo por defecto
US-DASH-06Exportar datos financierosDashboard

Como usuario, quiero exportar todos mis datos en JSON para tener un respaldo.

  • Share Sheet nativo de iOS/Android
US-OFFLINE-01Registrar transacciones sin conexión nuevoTransacciones

Como usuario, quiero poder agregar gastos aunque no tenga internet, y que se sincronicen al reconectar.

  • Cola local en MMKV (construido en P6)
  • Sync automático via NetInfo listener (construido en P6)
  • Indicador visual "pendiente de sync"