Task Tracker Dashboard
A production-grade, fully-tested React + TypeScript task tracker dashboard with comprehensive functional coverage and performance validation. Features interactive charts for status and category distribution, advanced OR/AND filter logic across charts, sortable paginated table, localStorage state persistence, MSW mock backend with 200 tasks, and over 75% test coverage. Built with React 18, TypeScript, Tailwind CSS, Redux Toolkit, Recharts, Jest, and Vite following Atomic Design principles.
Gestionar tareas a gran escala presenta un desafío de ingeniería real: los equipos necesitan visibilidad en tiempo real de la distribución de trabajo, filtros flexibles para mostrar los datos relevantes y una interfaz de usuario que mantenga su rendimiento a medida que aumenta el conjunto de datos. El panel de control Task Tracker se creó precisamente para abordar estas preocupaciones, ofreciendo una aplicación web de calidad profesional que gestiona 200 tareas sintéticas al tiempo que mantiene las interacciones rápidas, predecibles y rigurosamente probadas.
Características principales.
El panel se centra en dos visualizaciones interactivas de Recharts: un gráfico de distribución de estado y un gráfico de desglose por categoría, que se actualizan en tiempo real a medida que se aplican los filtros. Una capa distintiva de lógica de filtro OR/AND permite a los usuarios componer consultas en ambos gráficos simultáneamente, alternando entre coincidencias inclusivas (OR) y estrictas (AND) para profundizar en los segmentos de tareas que les interesan. Debajo de los gráficos, una tabla paginada y ordenable presenta la lista completa de tareas con opciones de ordenación a nivel de columna y tamaños de página configurables, lo que garantiza que la interfaz se adapte bien independientemente del volumen de datos. Todos los estados de filtro y ordenación se guardan en el almacenamiento local, por lo que los usuarios regresan exactamente al punto donde lo dejaron después de actualizar la página.
Pila tecnológica.
React 18 y utiliza TypeScript en todo el código, lo que proporciona seguridad de tipos de extremo a extremo, desde las secciones del almacén Redux hasta las propiedades de los componentes.React 18y utilizaTypeScriptutilizado en todo el código, lo que proporciona seguridad de tipos integral desde las secciones del almacén Redux hasta las propiedades de los componentes.Redux Toolkitgestiona el estado global, incluyendo los filtros activos, la configuración de ordenación y la paginación, manteniendo las transiciones de estado explícitas y fáciles de probar.Tailwind CSSimpulsa la capa de estilos, permitiendo un diseño consistente y adaptable sin la sobrecarga de CSS-in-JS en tiempo de ejecución.Rechartses el motor que impulsa las visualizaciones de datos, yRápido.Sirve como herramienta de construcción, proporcionando reemplazo casi instantáneo de módulos durante el desarrollo y paquetes optimizados para la producción.
Backend de simulación MSW y arquitectura de diseño atómico.
En lugar de depender de una API en tiempo real, la aplicación utiliza...Servidor de simulación (MSW).Para interceptar las solicitudes de red a nivel de service worker y devolver un conjunto de datos de 200 tareas generadas sintéticamente. Este enfoque imita el comportamiento real de las API, incluyendo la simulación de latencia y escenarios de error, sin requerir una implementación en el servidor, lo que hace que el proyecto sea completamente autónomo y portátil. El código fuente sigue...Diseño atómico.Principios que organizan los componentes en átomos, moléculas, organismos y páginas. Esta jerarquía impone una clara separación de responsabilidades, simplifica la reutilización de componentes y facilita la navegación y ampliación del código fuente.
Estrategia de pruebas.
La garantía de calidad es una prioridad fundamental. El conjunto de pruebas se ha creado con...Está.y logra una cobertura de más del 75% en declaraciones, ramas, funciones y líneas. Las pruebas abarcan la cobertura unitaria de los selectores y la lógica del reductor de Redux, pruebas de integración para la composición de filtros y el comportamiento de la paginación, y pruebas de renderizado a nivel de componente que validan la salida de gráficos y las interacciones con tablas. Los manejadores de MSW se reutilizan en el entorno de prueba, lo que garantiza que la lógica de obtención de datos se ejecute contra respuestas simuladas realistas en lugar de "stubs" triviales. Esta cobertura exhaustiva brinda confianza para introducir refactorizaciones y nuevas funciones sin causar regresiones silenciosas.
¿Qué hace realmente la lógica de filtro "O/Y"?
El gráfico de estado y el gráfico de categoría no solo filtran la misma lista de dos maneras diferentes; cada uno se calcula a partir de un selector que deliberadamente excluye el filtro de su propia dimensión. `selectStatusDistribution` lee datos de `selectTasksExcludingStatusFilter`, que aún aplica los filtros de categoría, rango de fechas y búsqueda, pero no el filtro de estado; `selectCategoryDistribution` hace lo mismo para la categoría. Por lo tanto, seleccionar "bloqueado" en el gráfico de estado no solo filtra el gráfico de categoría a las tareas bloqueadas; continúa mostrando la distribución de categorías para cada estado, permitiéndole comparar lo que está bloqueado con lo que está en otro lugar sin perder la vista del conjunto. Ambos selectores están almacenados en caché mediante `createSelector` de Reselect, por lo que un cambio de filtro no relacionado con la dimensión propia de un gráfico determinado no obliga a recalcularlo.