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