Angular 21 de Cero a Experto / Proyecto final

Reto: de demo a producto — extiende el tablero

Reto40 min100 XP

Tu tablero funciona, pero una demo no es un producto. Lo que separa un ejercicio de una app que la gente usaría son los detalles: que sobreviva a una recarga, que el optimismo se REVIERTA si el servidor rechaza, y que avise de la actividad que no has visto. Este reto añade esas tres capas —persistencia, optimismo con rollback y contador de no vistos—, todo con la lógica corriendo en vivo. El salto final del curso.

Reto

Persistencia, optimismo con rollback y actividad no vista

Difícil40 min100 XP(×2 sin mirar la solución)

Qué debes construir

Amplía el motor del tablero con tres capas de "producto":

Persistencia: el estado del tablero se guarda (en un almacén simulado) y se restaura al "recargar", para que la sesión no se pierda.
Optimismo con rollback: al crear/mover un gasto, la UI se actualiza YA (optimista); si el servidor RECHAZA la operación (validación, permiso), se REVIERTE al estado anterior y se avisa.
Actividad no vista: cuenta los cambios que hicieron OTROS usuarios desde tu última "revisión" (un badge de "3 nuevos"), y se resetea cuando marcas como visto.

Reglas

El optimismo debe aplicar el cambio inmediatamente y revertirlo exacto si el servidor rechaza.
El contador de no vistos solo cuenta cambios de OTROS, no los tuyos.
La persistencia debe restaurar el estado tal cual estaba.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento. Tres detalles convierten la demo en producto, y cada uno resuelve una frustración real del usuario. La PERSISTENCIA respeta su trabajo: recargar no debería borrar nada. El OPTIMISMO CON ROLLBACK equilibra velocidad y honestidad: la UI responde al instante (no esperas al servidor), pero si el servidor dice "no", no le mientes al usuario —reviertes y avisas—. El CONTADOR DE NO VISTOS respeta su atención: en una app colaborativa, saber "pasaron 3 cosas mientras no mirabas" es la diferencia entre sentirse en control o perdido. Los tres son lógica pura que puedes construir y testear sin Angular.

Qué observar:

Persistencia: cada cambio se guarda; al "recargar" (nuevo store al final), el estado se restaura tal cual —la sesión sobrevive—.
Optimismo con rollback: mover el Café a "aprobado" se aplica YA y el servidor confirma; mover el Taxi a "pagado" se aplica YA pero el servidor RECHAZA → se revierte exacto al estado anterior. El usuario ve velocidad cuando todo va bien, y honestidad cuando no.
No vistos: los gastos de Ana y Luis suman al contador (2 nuevos); el tuyo (Café) no. marcarVisto() lo resetea.

Estas tres capas son las que hacen que una app se sienta profesional. En Angular real, el estado serían señales, la persistencia pasaría por un servicio (nunca localStorage directo desde el componente), y el rollback restauraría la señal. Pero la lógica —la que acabas de construir— es idéntica. Acabas de llevar tu tablero de demo a producto.

Qué sigue

Tu tablero es un producto: colaborativo, persistente, optimista y consciente de la actividad. Has construido, de punta a punta, una app Angular moderna de nivel profesional. Solo queda una cosa: mirar atrás y ver todo lo que ahora sabes hacer. La última lección cierra el curso —el recap de tu viaje de cero a experto en Angular, y hacia dónde seguir—.