50 lines
2.7 KiB
Markdown
50 lines
2.7 KiB
Markdown
# 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.
|