Quiero que construyas una aplicación web FULL-STACK completamente funcional y lista para producción. NO quiero solamente un diseño visual o una maqueta. Quiero que todas las funciones principales funcionen realmente, que los botones tengan acciones reales, que los formularios validen los datos y que la aplicación pueda ejecutarse sin errores. OBJETIVO Crear una plataforma web moderna llamada "Nova Hub". Debe sentirse como una aplicación profesional, moderna, rápida y premium, con una estética futurista/gaming/cósmica, pero sin copiar exactamente ninguna página existente. La aplicación debe estar optimizada principalmente para teléfonos Android, pero también debe funcionar perfectamente en computadora, tablet y pantallas grandes. TECNOLOGÍAS Utiliza: - React - TypeScript - Vite si es compatible con el entorno - Node.js para las funciones del servidor - CSS moderno - Componentes reutilizables - Firebase Authentication - Firebase Firestore para datos persistentes - Firebase Storage cuando sea necesario para imágenes - Gemini API únicamente desde el servidor - Variables de entorno para secretos - Lucide React o una biblioteca de iconos moderna - Google Fonts NO expongas ninguna API KEY en el frontend. Si necesitas una API de Gemini, realiza las llamadas desde el backend/server y utiliza GEMINI_API_KEY como secreto. DISEÑO Crear una interfaz: - Fondo oscuro elegante. - Gradientes azul eléctrico, violeta y cian. - Efectos de iluminación suaves. - Glassmorphism moderado. - Tarjetas con bordes luminosos. - Animaciones suaves. - Microinteracciones. - Botones con estados hover, active y disabled. - Skeleton loaders. - Toast notifications. - Diseño responsive. - Excelente legibilidad. - Contraste suficiente. - Animaciones reducidas automáticamente cuando el usuario tenga activado "prefers-reduced-motion". No abuses de las animaciones. La página debe verse profesional, no como una plantilla genérica generada por IA. PÁGINA PRINCIPAL Crear: HEADER Logo "Nova Hub". Menú: - Inicio - Herramientas - IA - Comunidad - Acerca de Botones: - Iniciar sesión - Crear cuenta En móvil utilizar un menú hamburguesa funcional. HERO Crear una sección principal espectacular: Título: "Tu espacio digital. Más rápido. Más inteligente." Subtítulo: "Una plataforma moderna para descubrir herramientas, crear contenido y aprovechar la inteligencia artificial." Botones: "Comenzar ahora" "Explorar herramientas" Agregar una animación visual futurista en el fondo, pero optimizada para móviles. SECCIÓN DE HERRAMIENTAS Crear tarjetas para: 1. Asistente IA 2. Generador de ideas 3. Generador de textos 4. Resumidor 5. Traductor 6. Generador de imágenes 7. Generador de códigos 8. Analizador de textos Cada tarjeta debe abrir una herramienta funcional. NO crear botones que no hagan nada. ASISTENTE IA Crear un chat funcional. Debe incluir: - Campo de mensaje. - Botón enviar. - Enter para enviar. - Shift + Enter para salto de línea. - Indicador "IA está escribiendo..." - Historial de conversación. - Botón para copiar respuestas. - Botón para borrar conversación. - Manejo de errores. - Estado de carga. - Scroll automático. - Diseño parecido a una aplicación de chat moderna. La llamada a Gemini debe realizarse mediante el backend. Nunca colocar GEMINI_API_KEY dentro del código React. AUTENTICACIÓN Implementar Firebase Authentication. Permitir: - Crear cuenta con correo y contraseña. - Iniciar sesión. - Cerrar sesión. - Recuperar contraseña. - Mantener sesión iniciada. - Mostrar usuario autenticado. - Proteger las páginas privadas. Validar: - correo válido; - contraseña mínima; - campos obligatorios; - errores de Firebase. Mostrar mensajes de error comprensibles en español. PERFIL DEL USUARIO Crear una página /perfil. Debe permitir: - Cambiar nombre. - Cambiar foto de perfil. - Ver correo. - Ver fecha de registro. - Guardar preferencias. - Activar/desactivar modo oscuro. - Cerrar sesión. Los datos deben guardarse en Firestore. DASHBOARD Después de iniciar sesión, mostrar: "Bienvenido, [nombre]" Y tarjetas con: - Herramientas utilizadas. - Conversaciones. - Favoritos. - Actividad reciente. Crear una sección de actividad reciente. Los datos deben venir realmente de Firestore. FAVORITOS El usuario debe poder marcar herramientas como favoritas. Guardar favoritos en Firestore. Crear una página: /favoritos que muestre únicamente las herramientas guardadas. HISTORIAL Guardar en Firestore: - herramienta utilizada; - fecha; - usuario; - título; - tipo de actividad. Crear página: /historial con filtros por tipo. Permitir borrar elementos individuales y borrar todo el historial. Pedir confirmación antes de eliminar datos. GENERADOR DE TEXTOS Crear una herramienta donde el usuario pueda seleccionar: - TikTok - Instagram - Facebook - YouTube - WhatsApp - Descripción de producto - Correo - Texto profesional Campos: - Tema - Tono - Longitud Botón: "Generar" La IA debe generar el contenido. Agregar botón: "Copiar" y: "Guardar" GENERADOR DE IDEAS Crear una herramienta que permita introducir un tema. Ejemplo: "Quiero ideas para TikTok sobre tecnología." La IA debe devolver 10 ideas. Cada idea debe incluir: - título; - descripción; - gancho; - llamada a la acción. Permitir guardar una idea en favoritos. RESUMIDOR Crear un campo donde el usuario pueda pegar texto. Botones: - Resumen corto - Resumen medio - Resumen detallado Mostrar el resultado de manera limpia. Agregar copiar y guardar. TRADUCTOR Crear una herramienta con: - idioma original; - idioma destino; - texto; - botón traducir. Agregar intercambio de idiomas. GENERADOR DE CÓDIGO Crear una herramienta para describir lo que el usuario quiere programar. Ejemplo: "Créame una calculadora en HTML." Mostrar: - código; - lenguaje; - explicación. Agregar botón: "Copiar código". Usar bloques de código con syntax highlighting. COMUNIDAD Crear una sección donde usuarios autenticados puedan publicar pequeños mensajes. Cada publicación debe tener: - nombre; - avatar; - fecha; - contenido; - botón Me gusta; - contador de Me gusta. Guardar publicaciones en Firestore. Los usuarios solamente pueden editar/eliminar sus propias publicaciones. Crear reglas de seguridad adecuadas en Firestore. ADMINISTRACIÓN Crear un panel /admin. IMPORTANTE: No permitir acceso solamente ocultando un botón. El acceso administrativo debe verificarse mediante permisos/claims o una estrategia segura del backend. El administrador debe poder: - ver usuarios; - ver publicaciones; - eliminar publicaciones; - ver estadísticas básicas; - bloquear contenido inapropiado. Nunca confiar únicamente en datos enviados desde el navegador. SEGURIDAD Implementar: - validación frontend; - validación backend; - sanitización de entradas; - reglas de Firestore; - control de permisos; - protección de rutas; - manejo seguro de errores; - rate limiting cuando sea posible; - no exponer secretos; - no guardar contraseñas manualmente; - no confiar en roles enviados desde el cliente. No mostrar errores internos del servidor al usuario. BASE DE DATOS Diseñar correctamente Firestore. Colecciones sugeridas: users profiles conversations messages favorites history posts likes Utilizar documentos relacionados con userId. Crear índices necesarios. Crear reglas de seguridad apropiadas. EXPERIENCIA DE USUARIO Todos los botones deben tener estados: - normal; - hover; - presionado; - cargando; - deshabilitado; - error; - éxito. Nunca dejar un botón que aparentemente funcione pero no tenga acción. Si una función todavía no puede implementarse, NO crear un botón falso. RESPONSIVE Optimizar especialmente para: - Android 360px - Android 390px - Android 412px - tablet - laptop - escritorio No permitir scroll horizontal accidental. Los botones deben ser cómodos para tocar con los dedos. PWA Convertir la aplicación en una Progressive Web App. Agregar: - manifest.json - iconos - splash - theme-color - service worker si es compatible Permitir que el usuario pueda instalarla en Android desde el navegador. SEO Agregar: - title; - meta description; - Open Graph; - favicon; - robots.txt; - sitemap cuando corresponda. RENDIMIENTO Optimizar: - imágenes; - lazy loading; - componentes; - consultas Firestore; - animaciones; - bundle. No descargar recursos pesados innecesariamente. ACCESIBILIDAD Implementar: - etiquetas aria cuando sean necesarias; - navegación por teclado; - foco visible; - contraste adecuado; - botones accesibles; - textos alternativos; - estructura semántica. MANEJO DE ERRORES Crear una estrategia global de errores. Si falla Gemini: "Ha ocurrido un problema al comunicarnos con la IA. Inténtalo nuevamente." Si falla Firestore: "No pudimos guardar los datos. Comprueba tu conexión e inténtalo otra vez." Si falla autenticación: Mostrar un mensaje claro y específico. Agregar Error Boundary para errores inesperados del frontend. ESTRUCTURA DEL PROYECTO No pongas toda la aplicación en un solo archivo. Organiza el proyecto en: src/ components/ pages/ layouts/ hooks/ services/ lib/ types/ utils/ Crear componentes reutilizables. Separar frontend y backend. CALIDAD DEL CÓDIGO Quiero: - TypeScript bien tipado. - No utilizar any innecesariamente. - No duplicar código. - Componentes pequeños. - Funciones reutilizables. - Variables con nombres claros. - Comentarios únicamente donde aporten valor. PRUEBAS Después de crear la aplicación: 1. Ejecuta la aplicación. 2. Comprueba que compile. 3. Comprueba todas las rutas. 4. Comprueba los botones. 5. Comprueba el registro. 6. Comprueba login. 7. Comprueba logout. 8. Comprueba recuperación de contraseña. 9. Comprueba Firestore. 10. Comprueba el chat con Gemini. 11. Comprueba responsive. 12. Comprueba que no existan errores de consola. 13. Comprueba que no existan enlaces rotos. 14. Comprueba que no existan botones sin funcionalidad. Si encuentras errores, corrígelos automáticamente antes de terminar. IMPORTANTE No quiero una demo falsa. No quiero datos simulados cuando una función debería usar una base de datos real. No quiero botones decorativos que aparenten funcionar. No quiero API keys en el frontend. No quiero código incompleto. Primero crea la arquitectura completa. Después implementa las funciones. Después ejecuta pruebas. Finalmente revisa todo el proyecto y corrige cualquier error de compilación, TypeScript, Firebase, rutas, API o UI que encuentres. Cuando termines, dame un resumen de: - archivos creados; - funciones implementadas; - servicios utilizados; - variables de entorno necesarias; - pasos para ejecutar; - pasos para desplegar; - posibles limitaciones. La aplicación completa debe estar en español.