Estoy desarrollando una aplicación institucional para mi universidad. Es una aplicación que harás con React Native, con expo y con JAVASCRIPT, y la estructura debe seguir la arquitectura de Atomic Design. Puedes apoyarte en un framework de estilos moderno (como NativeWind o Styled Components) para lograr una interfaz atractiva e impactante que genere atracción visual y por lo tanto tenga una buena User Experience.

Necesito que la app en la parte superior izquierda donde va ubicado el logo y el nombre de la interfaz en la que uno está sirva para devolverse al home

Quiero que en el apartado de los filtros de búsqueda específicamente en el de Hora quiero que la selección sea por horas, por ejemplo: 10-11AM o 3-4pm, o sea no habrá un tema de minutos sino que las horas se seleccionarán con Horas enteras.

Paleta de colores institucional Naranja: #fea852 Blanco: #ffffff Verde: #41a219 Usar Gradient de estos colores para secciones y efectos

Estos colores no necesariamente deben de estar mezclados todo el tiempo, para algunas tarjetas o componentes pueden usarse colores que referencian a la paleta, pero no siempre tienen que ir mezclados, lo importante es que a nivel visual el aspecto sea muy agradable y NO MONÓTONO, que sea INTERESANTE, LLAMATIVO, MODERNO E IMPACTANTE.

Elementos UI: Botones con esquinas ligeramente redondeada Las tarjetas tendrán un efecto de elevación (sombras suaves) Iconos vectoriales modernos Animaciones suaves pero llamativas en botones y elementos interactivos como tarjetas, inputs y demás Al iniciar la aplicación desde el móvil, ver una pantalla de carga de la aplicación en la que esté el logo de la Universidad en el centro y cuyos colores de fondo correspondan a los de la paleta de colores usada por la Universidad (que anteriormente especifique) y que no sea dañino para la interfaz, sino que se vea como algo cautivador mientras carga la app inicialmente Rendimiento Tiempo de carga <2 Accesibilidad WCAG AA como mínimo

Funcionalidades principales

La aplicación se enfoca en la gestión de aulas universitarias, y tendrá dos módulos principales: 1. Reservar aulas 2. Monitorear aulas en tiempo real

Autenticación y Registro Pantalla de Registro con: Campos: "nombre":, "apellido", "email", "contraseña", "rol" Botón: “Registrarse” Enlace: ¿Ya tienes una cuenta? Clic

Pantalla de inicio de sesión con: Campos: documento, contraseña Botón: “Iniciar sesión” Enlaces: “¿Olvidaste tu contraseña?”, “¿No tienes una cuenta aún? registrar cuenta”

Pantalla principal (después del login) • Saludo personalizado: “Hola, [nombre del usuario]” • Acciones rápidas (en fila): • Buscar aulas • Nueva reserva • Ver reservas • Resumen de próximas reservas (máx. 3) • Aulas recomendadas o recientemente utilizadas (2 o 3) • Botón: “Ver aulas sin movimiento” • Últimas notificaciones

Menú lateral (hamburguesa)

Disponible en todo momento: • Ver perfil • Reservar aula • Mis reservas • Monitoreo en tiempo real • Cerrar sesión • Volver al menú

Pantalla de perfil Esta pantalla será un dashboard donde el usuario podrá ver su información, o sea la información que puso al registrarse en la pantalla de registro, podrá ver todo menos su contraseña. Además habrá una pequeña sección que diga “¿Quieres ver tus reservas?” y lo lleve a la pantalla de “Mis reservas”

Reservar aula (pantalla principal) • Filtros para búsqueda: • Fecha • Hora • Bloque • Tipo de aula • Piso • Botón “Aplicar filtros” • Tarjetas con aulas disponibles: • Imagen • Nombre completo • Capacidad • Al tocar una tarjeta: • Modal ampliado con más detalles • Botón “Reservar” • Mensaje de confirmación/cancelación

Mis reservas Esta interfaz será un dashboard personal con: • Tabla con historial • Filtros: • Activas • Canceladas • Vencidas

Monitoreo en tiempo real Esta interfaz tendrá una comunicación vía Socket con el backend y sera • Igual a la vista de reserva, pero: • Cada aula mostrará: • Ocupado (en rojo) • Libre (en verde)

Requisitos Tecnicos Utilizar un Framework de estilos modernos que sirva para React Native y que brinde un rendimiento óptimo, además de UI/UX Carga Lazy de imágenes o recursos pesados Preloading de componentes críticos REACT NATIVE Socket.io (tecnologia websocket para comunicarse con el backend) Tiempos de carga mínimos

Requisitos específicos Idioma y tono: Español, tono cercano e inspirador pero además formal Flujo intuitivo desde el registro hasta la reserva o aulas en Real Time. Tener en cuenta lo especificado de WCAG Restricciones Evitar: Páginas sobresaturadas con exceso de información Animaciones intrusivas Navegación compleja Colores diferentes a la paleta establecida Jerga técnica Tiempos de carga lentos o experiencias frustrantes