Workflow base en Next.js + TypeScript: de la historia de usuario al listado funcional

Acá te dejo mi workflow para crear un listado de productos en una app con Next.js + TypeScript:

---

🧩 Workflow: Crear un listado de productos

🧠 1. Definí la historia de usuario

“Como cliente, quiero ver un listado de productos con nombre y precio para poder elegir qué comprar.”

---

📦 2. Creá los datos simulados (mock)

📄 src/data/products.ts

export const products = [
  { id: "1", name: "Manzana", price: 500 },
  { id: "2", name: "Banana", price: 450 },
  { id: "3", name: "Zanahoria", price: 300 },
];

---

🧾 3. Definí el tipo o interface

📄 src/types/product.ts

export interface Product {
  id: string;
  name: string;
  price: number;
}

---

🧩 4. Creá el componente ProductCard

📄 src/components/ProductCard.tsx

import { Product } from "@/types/product";

type Props = { product: Product };

export default function ProductCard({ product }: Props) {
  return (
    <div className="border p-4 rounded shadow">
      <h2>{product.name}</h2>
      <p>${product.price}</p>
    </div>
  );
}

---

🖼️ 5. Mostralos en la página

📄 app/page.tsx

"use client";

import { products } from "@/data/products";
import ProductCard from "@/components/ProductCard";

export default function Home() {
  return (
    <main className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </main>
  );
}

---

✅ 6. Commit

git checkout -b feat/product-listing
git add .
git commit -m "feat: implement product listing with ProductCard component"

---

📘 Patrón mental que estás aplicando

Historia → Datos → Tipo → Componente → Página → Commit