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

2.7 KiB
Raw Blame History

Implementer — F-013 Storefront shell (Next.js)

Summary

Implemented a dedicated Next.js storefront shell under project/storefront/ with TypeScript, React, Tailwind CSS, server-rendered home layout/navigation, and a typed public API client for backend catalog endpoints.

Code changes

  • Added standalone frontend package: project/storefront/package.json and package-lock.json.
  • Added Next.js config and TypeScript config:
    • project/storefront/next.config.ts
    • project/storefront/tsconfig.json
    • project/storefront/postcss.config.mjs
    • project/storefront/next-env.d.ts
  • Added App Router shell:
    • project/storefront/src/app/layout.tsx
    • project/storefront/src/app/page.tsx
    • project/storefront/src/app/globals.css
    • project/storefront/src/components/site-header.tsx
    • project/storefront/src/components/site-footer.tsx
  • Added typed backend public API client:
    • project/storefront/src/lib/api.ts
    • Defines DTOs for public product/image payloads.
    • Uses GET /products/search and GET /productos/:slug.
    • Uses API_BASE_URL or NEXT_PUBLIC_API_BASE_URL, defaulting to http://localhost:3000.
    • Imports server-only so the API client cannot be accidentally bundled into client components.
    • Does not import backend internals.
  • Updated formatting/lint boundaries:
    • project/eslint.config.mjs ignores storefront/** for backend lint.
    • project/.prettierignore ignores storefront/ for backend formatting; storefront has its own quality scripts.
    • project/storefront/.prettierignore ignores generated Next files such as next-env.d.ts and .next/.

UI behavior

  • Home is a server component (async page, no use client).
  • Layout includes navigation and footer.
  • Home fetches a small product preview via the typed API client when backend is available.
  • If backend is unavailable, home renders a graceful ready-state instead of failing build/runtime rendering.

Evidence

  • cd project/storefront && npm run lint — PASS.
  • cd project/storefront && npm run typecheck — PASS.
  • cd project/storefront && npm run 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.
  • QA correction run with set -e: storefront lint/typecheck/build, storefront lint after build, backend lint/typecheck/test, and verify all PASS.

Notes

  • New frontend dependencies are isolated to project/storefront/package.json, including server-only to enforce server-side API access.
  • No catalog detail pages, category pages, cart UI, checkout UI, auth UI, or ISR catalog pages added.