Aplicación móvil para organizar tareas y materias de estudio.
StudyFlow es una app móvil desarrollada con React Native y Expo que permite a estudiantes registrar sus tareas, asignarles prioridad y fecha de vencimiento, y hacer seguimiento de su progreso académico.
| Pantalla | Descripción |
|---|---|
| 🏠 Inicio | Resumen de tareas pendientes y completadas, accesos directos |
| 📋 Listado | Todas las tareas con filtros por estado y prioridad visual |
| 🔎 Detalle | Información completa, marcar como completada o eliminar |
| ✍️ Nueva tarea | Formulario controlado con validación de campos |
- Persistencia de datos con AsyncStorage
- Navegación por tabs con Expo Router
- Interfaz adaptada al formato de fechas argentino (DD/MM/AAAA)
# Instalar dependencias
npm install
# Iniciar servidor
npx expo start --tunnelPresionar w en la terminal para abrir en el navegador.
studyflow/ ├── app/ │ ├── _layout.tsx # Navegación por tabs │ ├── index.tsx # Pantalla de inicio │ └── tasks/ │ ├── index.tsx # Listado de tareas │ ├── [id].tsx # Detalle de tarea │ └── form.tsx # Formulario nueva tarea │ └── src/ ├── components/ │ ├── AppButton.tsx # Botón reutilizable con variantes │ ├── TaskCard.tsx # Tarjeta de tarea con prioridad visual │ └── EmptyState.tsx # Estado vacío o error ├── constants/ │ └── theme.ts # Colores, espaciados y tipografía ├── hooks/ │ └── useTaskForm.ts # Hook para formulario controlado ├── services/ │ └── tasks.service.ts # Acceso a datos con AsyncStorage └── types/ └── task.ts # Tipos e interfaces del dominio
Expo Router — navegación basada en archivos dentro de app/. Cada archivo es una ruta. Las rutas dinámicas como tasks/[id].tsx reciben el id por parámetro de URL.
Service de datos — toda la lógica de acceso a datos vive en tasks.service.ts. Las pantallas nunca manejan datos directamente, siempre llaman al service. Esto separa responsabilidades y facilita el mantenimiento.
AsyncStorage — persiste las tareas en el dispositivo. Al iniciar se cargan las tareas guardadas. Si no hay ninguna, se inicializa con datos de ejemplo.
useTaskForm — hook personalizado que centraliza el estado del formulario, las validaciones y el submit. La pantalla solo renderiza, toda la lógica vive en el hook.
theme.ts — archivo centralizado con colores, espaciados, radios y tamaños de fuente. Garantiza consistencia visual en toda la app.
Componentes reutilizables — TaskCard renderiza el color del borde según la prioridad. AppButton acepta variantes (primary, secondary, danger). EmptyState maneja los estados vacío y error.
useFocusEffect — recarga los datos cada vez que el usuario vuelve a una pantalla. Así los contadores del inicio y el listado siempre están actualizados.
- React Native
- Expo SDK 54
- Expo Router
- AsyncStorage
- TypeScript
Braian Vidal
Tecnicatura Superior en Desarrollo de Software Full Stack
Materia: Aplicaciones Móviles