Una aplicación web moderna construida con React 18, TypeScript y Vite que permite a los usuarios monitorear su consumo de energía, gestionar alertas de presupuesto y administrar su cartera de criptomonedas (BSV).
Esta es una aplicación frontend para un sistema de monitoreo de energía integrado con tecnología blockchain. Los usuarios pueden:
- 📊 Visualizar gráficos interactivos de consumo de energía y precios
- 🔔 Crear y gestionar alertas de presupuesto y consumo
- 💰 Ver su balance en euros y satoshis (BSV)
- 👤 Administrar su perfil de usuario
- 📱 Acceder a un historial de alertas disparadas
- React 18 - Librería de UI basada en componentes
- TypeScript - Tipado estático para JavaScript
- Vite - Bundler y dev server ultrarrápido
- React Router DOM - Enrutamiento del lado del cliente
- Tailwind CSS - Framework de CSS utility-first
- shadcn/ui - Componentes de UI accesibles y personalizables
- Lucide React - Iconos SVG de alta calidad
- Recharts - Librería de gráficos reactivos para React
- Chart.js compatible - Visualización de datos de consumo
- React Context API - Manejo de estado global
- Custom Hooks - Lógica reutilizable en componentes
- ESLint - Linter para código JavaScript/TypeScript
- PostCSS - Procesamiento de CSS
- Tailwind Merge - Manejo inteligente de clases CSS
- clsx - Utilidad para construcción de clases CSS condicionales
- Node.js 16.x o superior
- npm o yarn como gestor de paquetes
- Clonar el repositorio
git clone https://github.com/olixva/hackaton_web3_frontend.git
cd frontend-app-hackaton- Instalar dependencias
npm install- Configurar variables de entorno
Crea un archivo
.enven la raíz del proyecto:
VITE_API_URL=https://hackaton-web3-backend.vercel.app
VITE_USER_ID=692b9e2c0c45d7f4031812c4- Iniciar el servidor de desarrollo
npm run devLa aplicación estará disponible en http://localhost:5173
# Iniciar servidor de desarrollo con HMR
npm run dev
# Compilar para producción
npm run build
# Previsualizar la compilación de producción
npm run preview
# Ejecutar linter
npm run lint
# Ejecutar linter con --fix
npm run lint:fixsrc/
├── components/ # Componentes reutilizables
│ ├── alarmCard.tsx # Tarjeta individual de alarma
│ ├── balance-cards.tsx # Tarjetas de balance y consumo
│ ├── chart.tsx # Gráfico interactivo
│ ├── createAlarmModal.tsx # Modal para crear alertas
│ ├── menu.tsx # Menú de navegación
│ ├── welcome.tsx # Componente de bienvenida
│ └── ui/ # Componentes base de UI
├── contexts/ # React Context
│ └── UserContext.tsx # Contexto global de usuario
├── pages/ # Páginas de la aplicación
│ ├── home.tsx # Página principal
│ ├── alerts.tsx # Página de alertas
│ └── profile.tsx # Página de perfil
├── services/ # Servicios API
│ ├── userService.service.tsx
│ ├── chartService.service.tsx
│ └── alertService.service.tsx
├── lib/ # Utilidades
│ └── utils.ts # Funciones auxiliares
├── enums/ # Enumeraciones
│ └── steps.enum.ts # Enum de intervalos de tiempo
├── constants.ts # Constantes de la aplicación
├── layout.tsx # Layout principal
├── router.tsx # Configuración de rutas
├── main.tsx # Punto de entrada
├── index.css # Estilos globales
└── App.tsx # Componente raíz
La aplicación se conecta a un backend en https://hackaton-web3-backend.vercel.app
GET /user/{id}- Obtener datos del usuarioGET /meter/chart?user_id={id}&step={interval}- Obtener datos del gráficoGET /alarm/user/{id}- Obtener alarmas del usuarioPOST /alarm- Crear nueva alarmaPATCH /alarm/{id}/toggle- Activar/desactivar alarmaGET /alarm/history/{id}- Obtener historial de alertas
- Bienvenida personalizada con avatar del usuario
- Tarjetas mostrando balance en euros y satoshis
- Consumo mensual y promedio diario de energía
- Gráfico interactivo con selector de intervalos (hora, día, semana, mes)
- Crear alertas para presupuesto (euros) o consumo (kWh)
- Ajustar umbrales con controles +/-
- Activar/desactivar alarmas existentes
- Visualizar historial de alertas disparadas
- Estado de carga optimista en la UI
- Información personal (nombre, email)
- Detalles de billetera BSV
- Balance actual en múltiples monedas
- Copiar dirección BSV al portapapeles
- Opción para añadir saldo
- Menú inferior con acceso rápido a todas las páginas
- Indicadores visuales de página activa
- Smooth transitions entre rutas
El proyecto utiliza un ID de usuario de prueba. Para usar tu propio usuario, modifica la constante en src/constants.ts:
export class Constants {
static userId = "TU_USER_ID_AQUI";
static API_URL = "https://tu-api-url.com";
}La aplicación implementa prefetching de datos en la página principal usando Promise.all() para cargar datos de forma paralela:
- Datos de usuario
- Datos del gráfico
- Alarmas activas
- Diseño completamente responsive
- Optimizado para dispositivos móviles
- Tailwind CSS para breakpoints adaptativos
- Touch-friendly interactions
Los comentarios del código están disponibles en:
- Español (comentarios originales)
- Inglés (traducidos para documentación)
npm install -g vercel
vercelnpm run build
# Arrastra la carpeta 'dist' a NetlifyFROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]npm run dev -- --port 3000Verifica que la variable de entorno VITE_API_URL apunta a la URL correcta del backend.
rm -rf node_modules package-lock.json
npm install
npm run build- Documentación de React
- Documentación de TypeScript
- Tailwind CSS Docs
- Vite Guide
- React Router Documentation
Hackathon Web3 - 2024
Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.
Las contribuciones son bienvenidas. Por favor:
- Fork el repositorio
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Para reportar bugs o solicitar features, abre un issue en el repositorio.
Última actualización: Diciembre 2024 Versión: 1.0.0