Implement product page with cart functionality

fullstack/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

fullstack/README.md

@@ -0,0 +1,23 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+> **Tip:** We recommend using [Bun](https://bun.sh) as your package manager — it's incredibly fast for installs and script execution. Install it with `curl -fsSL https://bun.sh/install | bash`, then use `bun install` and `bun run dev`.
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

fullstack/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

fullstack/next.config.ts

@@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

fullstack/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "fullstack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "ignoreScripts": [
+    "sharp",
+    "unrs-resolver"
+  ],
+  "trustedDependencies": [
+    "sharp",
+    "unrs-resolver"
+  ]
+}

fullstack/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

fullstack/src/app/api/cart/route.ts

@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getProductById } from "@/lib/products";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { productId, quantity } = body;
+
+    if (!productId || typeof quantity !== "number" || quantity < 1) {
+      return NextResponse.json(
+        { error: "Invalid request. Provide productId and a positive quantity." },
+        { status: 400 }
+      );
+    }
+
+    const product = getProductById(productId);
+    if (!product) {
+      return NextResponse.json({ error: "Product not found" }, { status: 404 });
+    }
+
+    if (quantity > product.stock) {
+      return NextResponse.json(
+        { error: `Only ${product.stock} items available in stock` },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      item: { product, quantity },
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 }
+    );
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { productId } = body;
+
+    if (!productId) {
+      return NextResponse.json(
+        { error: "productId is required" },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json({ success: true, removedProductId: productId });
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 }
+    );
+  }
+}

fullstack/src/app/api/products/[id]/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getProductById } from "@/lib/products";
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const product = getProductById(id);
+
+  if (!product) {
+    return NextResponse.json({ error: "Product not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(product);
+}

fullstack/src/app/api/products/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+import { products } from "@/lib/products";
+
+export async function GET() {
+  return NextResponse.json(products);
+}

fullstack/src/app/checkout/confirmation/page.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+export default function ConfirmationPage() {
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="mb-6 h-16 w-16 text-green-500"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+          />
+        </svg>
+        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+          Order Confirmed!
+        </h1>
+        <p className="mt-3 text-zinc-600 dark:text-zinc-400">
+          Thank you for your purchase. Your order has been placed successfully.
+        </p>
+        <Link
+          href="/"
+          className="mt-8 rounded-lg bg-black px-8 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+        >
+          Continue Shopping
+        </Link>
+      </div>
+    </div>
+  );
+}

fullstack/src/app/checkout/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import { useCart } from "@/context/cart-context";
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  const { items, totalPrice, clearCart } = useCart();
+
+  useEffect(() => {
+    if (items.length === 0) {
+      router.replace("/");
+    }
+  }, [items.length, router]);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  function handlePlaceOrder() {
+    clearCart();
+    router.push("/checkout/confirmation");
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+        Checkout
+      </h1>
+      <p className="mt-2 text-zinc-600 dark:text-zinc-400">
+        Review your order before placing it.
+      </p>
+
+      <div className="mt-8 grid gap-8 lg:grid-cols-3">
+        {/* Order items */}
+        <div className="lg:col-span-2">
+          <ul className="divide-y divide-zinc-200 dark:divide-zinc-700">
+            {items.map((item) => (
+              <li key={item.product.id} className="flex gap-4 py-4">
+                <div className="relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-800">
+                  <Image
+                    src={item.product.image}
+                    alt={item.product.name}
+                    fill
+                    className="object-cover"
+                    sizes="80px"
+                  />
+                </div>
+                <div className="flex flex-1 items-center justify-between">
+                  <div>
+                    <h3 className="text-sm font-medium">{item.product.name}</h3>
+                    <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                      Qty: {item.quantity}
+                    </p>
+                  </div>
+                  <p className="text-sm font-semibold">
+                    ${(item.product.price * item.quantity).toFixed(2)}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Order summary */}
+        <div className="rounded-lg border border-zinc-200 p-6 dark:border-zinc-700">
+          <h2 className="text-lg font-semibold">Order Summary</h2>
+          <dl className="mt-4 space-y-3 text-sm">
+            <div className="flex justify-between">
+              <dt className="text-zinc-600 dark:text-zinc-400">Subtotal</dt>
+              <dd className="font-medium">${totalPrice.toFixed(2)}</dd>
+            </div>
+            <div className="flex justify-between border-t border-zinc-200 pt-3 dark:border-zinc-700">
+              <dt className="font-semibold">Order Total</dt>
+              <dd className="font-bold">${totalPrice.toFixed(2)}</dd>
+            </div>
+          </dl>
+
+          <button
+            onClick={handlePlaceOrder}
+            className="mt-6 w-full rounded-lg bg-black py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+          >
+            Place Order
+          </button>
+
+          <Link
+            href="/"
+            className="mt-3 block text-center text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+          >
+            Continue Shopping
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}