"Build me a full e-commerce store with Next.js, Stripe, and Tailwind."
I'll start by setting up the core structure. Here are the product listing page, the cart context for state management, and the Stripe configuration.
tsx
app/page.tsx
1234567891011121314151617
import { ProductCard } from '@/components/ProductCard';
import { getProducts } from '@/lib/products';
export default async function Home() {
const products = await getProducts();
return (
<main className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">Featured Products</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
</main>
);
}
GENERATED
tsx
context/CartContext.tsx
1234567891011121314151617
import { createContext, useContext, useState } from 'react';
const CartContext = createContext({});
export function CartProvider({ children }) {
const [items, setItems] = useState([]);
const addToCart = (product) => {
setItems([...items, product]);
};
return (
<CartContext.Provider value={{ items, addToCart }}>
{children}
</CartContext.Provider>
);
}
GENERATED
typescript
lib/stripe.ts
123456
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2023-10-16',
typescript: true,
});
GENERATED
"Looks good. Can you add a checkout button to the cart?"
I've updated the Cart component to include a checkout button that integrates with the Stripe checkout session.
tsx
components/Cart.tsx
12345678910111213141516171819202122232425262728
import { useCart } from '@/context/CartContext';
import { loadStripe } from '@stripe/stripe-js';
export function Cart() {
const { items } = useCart();
const handleCheckout = async () => {
const response = await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify({ items }),
});
const { sessionId } = await response.json();
const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);
stripe?.redirectToCheckout({ sessionId });
};
return (
<div className="p-4 border rounded-lg">
{items.map(item => <div key={item.id}>{item.name}</div>)}
<button
onClick={handleCheckout}
className="w-full bg-blue-600 text-white py-2 rounded mt-4 hover:bg-blue-700"
>
Checkout
</button>
</div>
);
}
GENERATED