Skip to content

README.md

Latest commit

 

History

History
169 lines (119 loc) · 3.41 KB

README.md

File metadata and controls

169 lines (119 loc) · 3.41 KB

Order Management Dashboard

Aplicación web para gestión de órdenes, con historial de acciones, filtros, paginación, arquitectura escalable y diseño 100% responsive.

El proyecto simula un entorno real de trabajo frontend, aplicando buenas prácticas, separación por features y manejo de estado con React.

Demo en producción: https://operations-dashboard-psi.vercel.app/

¿Qué problema resuelve?

Este dashboard permite:

  • Crear, editar y eliminar órdenes
  • Registrar y consultar el historial de acciones realizadas
  • Filtrar el historial por tarea específica o por fecha
  • Navegar grandes volúmenes de información mediante paginación
  • Utilizar una interfaz clara, responsive y escalable

Está diseñado como una base sólida para sistemas administrativos.

Funcionalidades principales

CRUD de Órdenes

  • Crear nuevas órdenes
  • Editar órdenes existentes
  • Eliminar órdenes
  • Listado dinámico de órdenes

Historial de Acciones

  • Registro de acciones realizadas sobre las órdenes
  • Filtro por tarea específica
  • Filtro por fecha
  • Paginación para grandes volúmenes de datos

Sección de Filtros

  • Select dinámico para filtrar por tarea
  • Combinación de filtros optimizada

Diseño Responsive

  • Adaptado a desktop, tablet y mobile
  • Layout flexible
  • Enfoque en usabilidad

Arquitectura del Proyecto

El proyecto sigue una arquitectura basada en features, facilitando la escalabilidad y el mantenimiento.

src/
│
├── features/
│   ├── history/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   └── services/
│   │
│   └── orders/
│       ├── components/
│       ├── hooks/
│       ├── pages/
│       └── services/
│
├── shared/
│   ├── components/
│   ├── hooks/
│   └── config/
│
├── Layout/
├── api/
├── data/
├── App.jsx
├── main.jsx
└── index.css

Principios Aplicados

  • Separación por dominio (feature-based)
  • Componentes reutilizables
  • Custom Hooks
  • Configuración centralizada
  • Código mantenible y escalable

Tecnologías Utilizadas

  • React
  • JavaScript (ES6+)
  • React Router
  • CSS / Responsive Design
  • Vite
  • LocalStorage (simulación de API)
  • Vercel (deploy)

Simulación de API

El proyecto simula llamadas a una API para:

  • Carga inicial de órdenes
  • Eliminación de órdenes

Esto permite trabajar con:

  • Estados de carga
  • Flujo realista de datos
  • Comportamiento similar a producción

Testing

  • Arquitectura preparada para pruebas
  • Próximo paso: implementar tests unitarios y de integración

Instalación y Uso Local

# Clonar repositorio
git clone https://github.com/Sebas0412-18/operations-dashboard.git

# Entrar al proyecto
cd operations-dashboard

# Instalar dependencias
npm install

# Ejecutar en desarrollo
npm run dev

Deploy

El proyecto está desplegado en Vercel con integración continua:

  • Cada push a GitHub genera un nuevo deploy automáticamente
  • Build optimizado para producción

Próximas mejoras

  • Implementación de tests (unitarios e integración)
  • Persistencia con backend real
  • Autenticación de usuarios
  • Mejoras adicionales de UI/UX

Autor

Sebas
Frontend Developer en formación
Especial enfoque en React y arquitectura escalable