Dogs SPA
Aplicación Web para Explorar Razas Caninas
Dogs SPA es una Single Page Application que consume TheDogApi para explorar, filtrar y gestionar información de razas caninas. Desarrollada como proyecto de práctica intensiva, la aplicación demuestra dominio de tecnologías del stack PERN con especial énfasis en diseño UI/UX y arquitectura de estado con Redux.
STACK TECNOLÓGICO
CAPTURAS DE PANTALLA
CARACTERÍSTICAS PRINCIPALES
Búsqueda Inteligente
Sistema de búsqueda en tiempo real que permite encontrar razas específicas con resultados instantáneos y sugerencias dinámicas.
Filtros Avanzados
Múltiples criterios de filtrado por temperamento, grupo de raza y origen, con combinaciones flexibles para exploración personalizada.
Ordenamiento Dinámico
Capacidad de ordenar resultados alfabéticamente o por características físicas, facilitando comparaciones y navegación intuitiva.
Creación de Razas
Formulario completo para registrar nuevas razas en la base de datos local con validaciones y preview en tiempo real.
Vistas Detalladas
Páginas individuales por raza mostrando características completas, temperamento, métricas físicas y datos de origen.
Interfaz Cuidada
Diseño visual limpio y atractivo desarrollado con CSS vanilla, priorizando experiencia de usuario y estética moderna.
ARQUITECTURA
Frontend
React con arquitectura de componentes funcionales, hooks personalizados y CSS modular vanilla
Estado Global
Redux para gestión centralizada de razas, filtros activos y estado de búsqueda
Backend
Express.js con arquitectura RESTful, endpoints para CRUD y proxy de TheDogApi
Base de Datos
PostgreSQL con Sequelize ORM para modelado de razas creadas por usuarios
Integración API
Consumo de TheDogApi con manejo de rate limits y cache de respuestas
Testing
Suite de pruebas para componentes críticos y flujos principales de la aplicación
PROCESO
Planificación & Diseño
Definición de funcionalidades core, wireframing de vistas principales y diseño del modelo de datos para integración API + DB local.
Setup & Arquitectura
Configuración del stack PERN, estructura de carpetas escalable y definición de flujo de datos entre frontend y backend.
Desarrollo de Features
Implementación iterativa de búsqueda, filtros, ordenamiento, vistas detalladas y formulario de creación con validaciones.
Diseño UI/UX
Desarrollo de estilos personalizados en CSS vanilla, focus en jerarquía visual, microinteracciones y responsive design.
Testing & Refinamiento
Pruebas funcionales de flujos completos, optimización de performance y ajustes finales de usabilidad.
MI ROL COMO
Proyecto Individual de Práctica Intensiva
Este proyecto representa un hito personal en mi desarrollo como programadora fullstack, siendo una práctica integral donde consolidé conocimientos de arquitectura web moderna mientras desarrollaba mis habilidades de diseño UI/UX.
DESAFÍOS & SOLUCIONES
DESAFÍO
Integración API Externa + DB Local - Combinar datos de TheDogApi con razas creadas localmente manteniendo una experiencia unificada
SOLUCIÓN
Implementación de capa de normalización de datos en el backend que unifica estructura de respuestas de ambas fuentes, con flag de origen para diferenciar fuente cuando sea necesario.
DESAFÍO
Gestión de Estado Complejo - Sincronizar múltiples filtros, búsqueda y ordenamiento sin perder performance ni causar renders innecesarios
SOLUCIÓN
Arquitectura Redux con slices específicos para filtros, reducers que componen lógica de filtrado/ordenamiento y selectors memoizados para computación eficiente.
DESAFÍO
Diseño Visual sin Frameworks CSS - Crear interfaz atractiva y responsive usando únicamente CSS vanilla sin dependencias externas
SOLUCIÓN
Sistema de variables CSS custom para theming consistente, arquitectura BEM para nomenclatura escalable y uso estratégico de Grid/Flexbox para layouts responsivos.
DESAFÍO
Validación de Formularios - Asegurar integridad de datos al crear nuevas razas con feedback claro al usuario
SOLUCIÓN
Validaciones en frontend con mensajes contextuales en tiempo real y validaciones adicionales en backend antes de persistir en DB.
IMPACTO
Aunque es un proyecto académico, lo conservo con especial cariño porque representa el momento donde la programación y el diseño convergieron en mi proceso creativo. La interfaz resultante refleja mi visión de que las aplicaciones funcionales también pueden ser visualmente hermosas, y me siento genuinamente orgullosa del resultado estético logrado sin herramientas de diseño preestablecidas. Este proyecto fortaleció mi confianza para abordar desafíos técnicos complejos mientras mantengo un estándar alto en experiencia de usuario y presentación visual.