rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b5ea8f2617821907e1b0e2da7da7709faa9c4d4
mercadodevida/work/artifacts/F-014/implementer.md
chattie d595b4871f feat(ADM-018): completed feature
2026-08-17 22:23:10 +02:00

3.6 KiB
Raw Blame History

Implementer — F-014 Storefront catalog pages (SSG/ISR)

Summary

Implemented storefront catalog pages for product detail, category listing, brand listing and search results using Next.js App Router server components, ISR, per-page metadata/OpenGraph, typed public API client functions and on-demand revalidation.

Code changes

  • Extended backend public search filter:
    • project/src/modules/catalog/domain/product.ts adds categorySlug to search criteria.
    • project/src/modules/catalog/application/product-use-cases.ts forwards categorySlug.
    • project/src/modules/catalog/api/catalog.routes.ts accepts/logs categorySlug on /products/search.
    • project/src/modules/catalog/infrastructure/pg-product-search-repository.ts filters products by category slug through public catalog/category tables.
    • project/src/modules/catalog/tests/product-use-cases.test.ts covers forwarding brandSlug and categorySlug through the search port.
  • Extended storefront API client:
    • project/storefront/src/lib/api.ts adds CategoryDto, BrandDto, getCategoryBySlug, getBrandBySlug, listCategoryTree, and categorySlug search input.
    • project/storefront/src/lib/seo.ts centralizes site URL/title helpers.
  • Added catalog UI:
    • project/storefront/src/components/product-card.tsx.
    • project/storefront/src/app/productos/[slug]/page.tsx product detail route.
    • project/storefront/src/app/categoria/[slug]/page.tsx category listing route.
    • project/storefront/src/app/marca/[slug]/page.tsx brand listing route.
    • project/storefront/src/app/products/search/page.tsx search results route.
  • Added on-demand revalidation:
    • project/storefront/src/app/api/revalidate/route.ts validates REVALIDATE_SECRET with timingSafeEqual, accepts supported catalog paths only, and calls revalidatePath.

Rendering/SEO behavior

  • Product/category/brand pages export revalidate = 300 and generateStaticParams() { return []; }, allowing SSG/ISR generation without requiring a live backend at build time.
  • Search page exports revalidate = 120.
  • Search page bounds displayed/metadata query text to 200 characters before rendering or metadata generation.
  • Product/category/brand/search pages export generateMetadata with title, description, canonical URL and OpenGraph data.
  • Product page uses /productos/<slug> and never exposes internal ids in the URL.
  • All pages are server components; no client components added.

Evidence

  • cd project/storefront && npm run lint — PASS.
  • cd project/storefront && npm run typecheck — PASS.
  • cd project/storefront && npm run build — PASS; Next output shows SSG routes for /productos/[slug], /categoria/[slug], /marca/[slug] and dynamic /products/search plus /api/revalidate.
  • cd project/storefront && npm run lint after build — PASS.
  • cd project && npm run lint — PASS.
  • cd project && npm run typecheck — PASS.
  • cd project && npm test — PASS: 17 files passed, 7 skipped; 64 passed, 33 skipped.
  • ./scripts/verify.sh — PASS.
  • Internal review correction run: bounded search query text in search page, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.
  • Security correction run: revalidation secret comparison changed to timing-safe comparison, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.

Notes

  • Lighthouse tooling is not installed; SEO score criterion is evidenced structurally: SSR/SSG pages, semantic content, metadata/OpenGraph, canonical URLs and no client JavaScript added for these pages.
  • No cart or checkout UI added.