Maquetado App Movil EcoHabita 🏡

Proyecto desarrollado para Construhack 2025

Muestra con react native de app para solución integral de gestión inteligente para viviendas y comunidades sostenibles.

📋 Sobre el Proyecto

EcoHabita es una aplicación móvil desarrollada durante el Construhack 2025, un hackathon de construcción sostenible celebrado del 21 al 23 de noviembre de 2025 en Viladecans, Cataluña, España.

La aplicación permite a los residentes gestionar y optimizar sus recursos personales y comunitarios de manera ecológica, promoviendo la vida sostenible y el compromiso comunitario.

✨ Características Principales

EcoHabita ofrece seis módulos principales accesibles tanto desde el área personal como comunitaria:

🎥 1. Seguridad y Cámaras

• Área Personal: Monitorización de cámaras en areas del hogar.
• Área Comunitaria: Vigilancia de áreas comunes.
• Control de activación/desactivación de cámaras
• Indicadores de estado (Online/Grabando/Offline)
• Visualización de instantáneas en tiempo real

♻️ 2. Gestión de Residuos

• Calendario integrado para programación de recogida de residuos.
• Funcionalidad de llave NFC para contenedores
• Seguimiento de clasificación de residuos: por tipo de residuo y cantidad mensual.
• Estadísticas y gráficos de reciclaje.

📅 3. Reservas

• Calendario de reservas integrado para facilitar la organización de eventos y actividades.

💬 4. Comunicaciones

• Interfaz de chat comunitario
• Diferenciación entre mensajes de usuarios y bot
• Gestión de estado de mensajes en tiempo real.

💰 5. Gestión de Pagos

Ahorro Personal:

• Desglose de gastos por categorías (Comida, Transporte, Entretenimiento, Vivienda y otros)
• Visualización de montos y fechas.
• Gráficos de tendencia de gastos.

Ahorro Comunitario:

• Seguimiento de gastos compartidos (Electricidad, Agua, Limpieza, Mantenimiento y otros).
• Distribución de costos entre residentes.
• Análisis de tendencias con gráficos.

⚡ 6. Gestión Eléctrica

Consumo Personal:

• Monitorización de 8 dispositivos con datos de kWh y costos
• Ejemplos: Frigorífico (45 kWh, €12.50), Aire Acondicionado (120 kWh, €35.00)
• Identificación de electrodomésticos con mayor consumo.

Gestión Comunitaria:

• Gráfico de consumo energético de la red.
• Gráfico de generación de paneles solares.
• Sistema dual de seguimiento energético.

🛠️ Tecnologías Utilizadas

Core

• React Native (v0.81.5) - Desarrollo multiplataforma
• Expo (v54.0.25) - Plataforma de desarrollo y build
• Expo Router (v6.0.15) - Enrutamiento basado en archivos
• React (v19.1.0) - Biblioteca UI
• TypeScript (v5.9.2) - Tipado estático

Navegación

• @react-navigation/native
• @react-navigation/bottom-tabs
• expo-router

UI & Visualización

• react-native-chart-kit - Gráficos de consumo y ahorros
• react-native-calendars - Widget de calendario
• expo-symbols - Sistema de iconos SF Symbols
• react-native-svg - Soporte SVG

Multimedia

• expo-av - Manejo de audio/video para feeds de cámaras
• expo-image - Carga optimizada de imágenes
• react-native-webview - Componente WebView

Animaciones & Gestos

• react-native-reanimated - Animaciones avanzadas
• react-native-gesture-handler - Soporte de gestos
• expo-haptics - Feedback háptico

📱 Estructura de la Aplicación

EcoHabita
│
├── Área Personal (🏠)
│   ├── Gestión Eléctrica
│   ├── Cámaras de Seguridad
│   ├── Reservas
│   ├── Gestión de Residuos
│   ├── Comunicaciones
│   └── Pagos Personales
│
└── Área Comunitaria (👥)
    ├── Gestión Eléctrica Comunitaria
    ├── Cámaras Comunitarias
    ├── Reservas de Espacios Comunes
    ├── Gestión de Residuos
    ├── Comunicaciones
    └── Pagos Comunitarios

🚀 Instalación y Ejecución

Prerrequisitos

• Node.js (versión 18 o superior)
• npm o yarn
• Expo CLI
• Expo Go app (para pruebas en dispositivo físico)

Instalación

1. Clona el repositorio:

git clone <repository-url>
cd construhack2025

2. Instala las dependencias:

npm install

Ejecución

Iniciar el servidor de desarrollo:

npm start

Ejecutar en plataformas específicas:

# Android
npm run android

# iOS
npm run ios

# Web
npm run web

Linting:

npm run lint

🎨 Diseño

Paleta de Colores

• Verde Principal: #628d78
• Amarillo Acento: #cfcf5a
• Teal Oscuro: #1D3D47

Iconografía

• Iconos SVG personalizados: candado, papelera, calendario, teléfono, cartera, bombilla
• Imágenes de habitaciones para feeds de cámaras

Temas

• Soporte completo para modo claro y oscuro
• Componentes temáticos (ThemedView, ThemedText)

📦 Componentes Personalizados

• HomeHeader: Encabezado con efecto parallax
• HomeButtonOption: Botones de navegación en grid
• Grafic: Wrapper para gráficos LineChart
• CameraFeed: Componente de reproducción de video
• ParallaxScrollView: Vista scroll con header parallax
• HapticTab: Navegación por tabs con feedback háptico

🔧 Configuración

App Configuration (app.json)

• Nombre de la App: EcoHabita
• Bundle ID: com.ecohabita.app (iOS & Android)
• Nueva Arquitectura: Habilitada
• React Compiler: Habilitado (experimental)
• EAS Project: Configurado para publicación

🏗️ Arquitectura del Proyecto

construhack2025/
├── app/
│   ├── (tabs)/
│   │   ├── _layout.tsx          # Layout de tabs
│   │   ├── index.jsx            # Área Personal
│   │   └── comunity.jsx         # Área Comunitaria
│   ├── Calendar.tsx
│   ├── ComunityCash.tsx
│   ├── PersonalCash.tsx
│   ├── cam-comunity.tsx
│   ├── cam-personal.tsx
│   ├── communications.tsx
│   ├── energy-comunity.tsx
│   ├── energy-personal.tsx
│   └── waste.tsx
├── assets/
│   └── images/                  # Iconos e imágenes
├── components/
│   ├── CameraFeed.tsx
│   ├── HomeButtonOption.jsx
│   ├── HomeHeader.tsx
│   ├── grafic.tsx
│   └── ui/
└── package.json

👥 Equipo

Proyecto desarrollado para Construhack 2025 por el equipo de EcoHabita.

📄 Licencia

Este proyecto fue desarrollado como parte del hackathon Construhack 2025.

🙏 Agradecimientos

• Organizadores de Construhack 2025
• Ayuntamiento de Viladecans
• Todos los mentores y participantes del evento

---

Construhack 2025 - Reimaginando el futuro de la construcción sostenible 🌱