# 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.
