2023Desarrollo completo — API y frontend
Arithmetic Calculator — API + SPA en Vue
Una API de calculadora con JWT y créditos por operación, con una SPA Vue 3 encima.
- Node.js
- Express
- PostgreSQL
- Sequelize
- JWT
- Zod
- Vue 3
- Vite
- Pinia
- PrimeVue
Problema
La mayoría de las demos de calculadoras son stateless y nunca responden la pregunta difícil: ¿cómo hacer un servicio de cómputo multiusuario, medido y auditable? Quería un ejercicio que forzara la maquinaria real — autenticación, contabilidad por usuario e historial — no solo aritmética.
El resultado es una API donde cada operación tiene un costo en créditos que se descuenta del saldo del usuario, y cada cálculo queda registrado como un record con paginación, búsqueda e historial completo.
Enfoque
API basada en créditos, no cómputo gratis
Express + Sequelize + PostgreSQL. Un catálogo de operaciones (suma, resta, multiplicación, división, raíz cuadrada, string aleatorio) declara el costo en créditos de cada una. Crear un record ejecuta la operación, cobra el costo y guarda el saldo resultante. Los records soportan paginación, orden, búsqueda de texto y borrado lógico — porque destruir una pista de auditoría casi nunca es el default correcto.
Descarté endpoints de cómputo stateless: hacen el uso innombrable e incontable por diseño, exactamente el problema que el ejercicio apuntaba a resolver.
Contrato OpenAPI primero
El contrato completo vive en `api_services_v1.yml` (OpenAPI 3.0). Zod valida cada request en el borde, `bcryptjs` hashea las contraseñas y los JWT autorizan las rutas protegidas. Jest + ts-jest cubren la API.
Descarté validación ad hoc repartida en los handlers: con el contrato escrito, la UI Vue se construye contra el YAML y no contra detalles de implementación.
SPA Vue 3 contra el mismo contrato
Vue 3 (Options API) + Vite + Pinia + PrimeVue + Axios. El login guarda el JWT localmente; un dashboard muestra las operaciones disponibles y el saldo; un DataTable de PrimeVue renderiza los records con paginación, búsqueda y borrado lógico; una respuesta 401 cierra la sesión y limpia el token. Vitest cubre la UI.
Descarté decisiones de auth dentro de los componentes: un único interceptor de Axios posee el manejo del 401, por lo que todas las pantallas se comportan igual sin saber nada de sesiones.
Resultados
- Ambas mitades son públicas y con CI (GitHub Actions): la API (contrato OpenAPI 3.0, Jest) y la SPA Vue (Vitest + @vue/test-utils).
- Referencia OSS completa de REST medido y multiusuario: auth, precios de catálogo, records de auditoría y borrado lógico en un codebase pequeño.