Mars Gallery es una SPA que muestra fotos de los rovers de la NASA, permite filtrar por modo y rover, paginar resultados y marcar favoritos persistentes en localStorage. Diseñado para cumplir la rúbrica de evaluación del proyecto.
- Node.js (>=16)
- pnpm
- Instalar dependencias:
pnpm install- Crear archivo de entorno:
cp .env.example .env
# editar .env y añadir VITE_NASA_API_KEY- Ejecutar en desarrollo:
pnpm devEjecutar la suite:
pnpm test- Filtro por modo: elemento con id
mode-select. - Selección de rover: elemento con id
rover-select. - Paginación: botones
#pagination-prev,#pagination-next; indicador#pagination-info. - Favoritos: botones con clase
.fav-toggle, contador en#favorites-count, lista en#favorites-list. - Estados UI gestionados con la clase
hidden:#loader,#error-banner,#empty-state. - Cada tarjeta debe mostrar imagen, rover, cámara y fecha; incluir atributos
data-*y clases requeridas por los tests.
- Favoritos se guardan en
localStorage; tras marcar favoritos, recargar la página debe mantenerlos. - Al marcar/desmarcar se actualiza en tiempo real: contador y lista deben reflejar el estado sin recargar.
- Verificar que la paginación y el contador son coherentes en cualquier página.
- src/controllers/UiController.js
- src/services/MarsPhotoService.js
- src/stores/FavoritesStore.js
- src/models/Photo.js
- src/main.js
- public/mock-latest.json
- tests/ (Vitest)