Mini Project – Ecommerce

// lib/products.js - NewsWave merchandise data
export const products = [
  {
    id: 'newswave-hoodie',
    slug: 'newswave-hoodie', // URL path for this product
    name: 'NewsWave Developer Hoodie',
    price: 4999, // Store prices in cents to avoid decimal issues
    image: '/images/hoodie.jpg',
    category: 'apparel',
    description: 'Premium hoodie for developers who stay informed',
    inStock: true,
    inventory: 25
  },
  {
    id: 'code-coffee-mug',
    slug: 'code-coffee-mug',
    name: 'Code & Coffee Mug',
    price: 1899,
    image: '/images/mug.jpg', 
    category: 'accessories',
    description: 'Perfect mug for coding sessions and news reading',
    inStock: true,
    inventory: 50
  }
]

// app/shop/page.js - Main catalog page
import { products } from '@/lib/products'
import ProductCard from '@/components/ProductCard'

export default function ShopPage() {
  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">NewsWave Store</h1>
      <div className="grid md:grid-cols-3 gap-6">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  )
}

// app/shop/[slug]/page.js - Individual product pages
import { products } from '@/lib/products'
import { notFound } from 'next/navigation'
import AddToCart from '@/components/AddToCart'

export default function ProductPage({ params }) {
  // Find product by slug from URL parameter
  const product = products.find(p => p.slug === params.slug)
  
  // Show 404 page if product doesn't exist
  if (!product) {
    notFound()
  }

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <div className="grid md:grid-cols-2 gap-8">
        <div>
          <img src={product.image} alt={product.name} />
        </div>
        <div>
          <h1 className="text-3xl font-bold">{product.name}</h1>
          <p className="text-2xl text-green-600 font-bold">
            ${(product.price / 100).toFixed(2)}
          </p>
          <p>{product.description}</p>
          <AddToCart product={product} />
        </div>
      </div>
    </div>
  )
}

// Generate static pages for all products at build time
export async function generateStaticParams() {
  // Return array of slug parameters for Next.js to pre-build
  return products.map(product => ({
    slug: product.slug // Creates /shop/newswave-hoodie, /shop/code-coffee-mug, etc
  }))
}

// Add metadata for each product page (SEO)
export async function generateMetadata({ params }) {
  const product = products.find(p => p.slug === params.slug)
  
  return {
    title: `${product.name} - NewsWave Store`,
    description: product.description
  }
}

// components/CartProvider.js - Global cart state management
'use client'
import { createContext, useContext, useReducer, useEffect } from 'react'

const CartContext = createContext()

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      // Check if item already exists in cart
      const existingItem = state.items.find(item => item.id === action.product.id)
      
      if (existingItem) {
        // Increase quantity of existing item
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.product.id 
              ? { ...item, quantity: item.quantity + 1 }
              : item
          )
        }
      }
      
      // Add new item to cart
      return {
        ...state,
        items: [...state.items, { ...action.product, quantity: 1 }]
      }
      
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.productId)
      }
      
    default:
      return state
  }
}

// CartProvider component with local storage persistence
export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, { items: [] })
  
  // Load cart from localStorage on initial render
  useEffect(() => {
    const savedCart = localStorage.getItem('newswave-cart')
    if (savedCart) {
      // Restore saved cart items
      JSON.parse(savedCart).items.forEach(item => {
        dispatch({ type: 'ADD_ITEM', product: item })
      })
    }
  }, [])
  
  // Save cart to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('newswave-cart', JSON.stringify(cart))
  }, [cart])
  
  // Helper functions for components to use
  const addToCart = (product) => {
    dispatch({ type: 'ADD_ITEM', product })
  }
  
  const removeFromCart = (productId) => {
    dispatch({ type: 'REMOVE_ITEM', productId })
  }
  
  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  )
}

// Custom hook for easy cart access
export const useCart = () => useContext(CartContext)

// components/AddToCart.js - Interactive cart button
'use client'
import { useState } from 'react'
import { useCart } from './CartProvider'

export default function AddToCart({ product }) {
  const { addToCart } = useCart()
  const [isAdding, setIsAdding] = useState(false)
  
  const handleAddToCart = async () => {
    setIsAdding(true) // Show loading state
    
    // Simulate API call delay
    await new Promise(resolve => setTimeout(resolve, 500))
    
    addToCart(product) // Add item to cart
    setIsAdding(false)
  }
  
  return (
    <button 
      onClick={handleAddToCart}
      disabled={isAdding || !product.inStock}
      className={`px-6 py-3 rounded-lg font-semibold ${
        isAdding 
          ? 'bg-gray-400 cursor-not-allowed' 
          : 'bg-blue-600 hover:bg-blue-700'
      } text-white`}
    >
      {isAdding ? 'Adding...' : `Add to Cart - $${(product.price / 100).toFixed(2)}`}
    </button>
  )
}

// app/checkout/page.js - Streamlined checkout form
'use client'
import { useState } from 'react'
import { useCart } from '@/components/CartProvider'

export default function CheckoutPage() {
  const { cart } = useCart()
  const [formData, setFormData] = useState({
    email: '',
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    postalCode: ''
  })
  const [errors, setErrors] = useState({})
  
  // Calculate order total from cart items
  const total = cart.items.reduce((sum, item) => {
    return sum + (item.price * item.quantity)
  }, 0)
  
  const validateForm = () => {
    const newErrors = {}
    
    // Check required fields
    if (!formData.email) newErrors.email = 'Email is required'
    if (!formData.firstName) newErrors.firstName = 'First name is required'
    if (!formData.address) newErrors.address = 'Address is required'
    
    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (formData.email && !emailRegex.test(formData.email)) {
      newErrors.email = 'Please enter a valid email'
    }
    
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

// Handle checkout form submission
const handleSubmit = async (e) => {
  e.preventDefault()
  
  if (!validateForm()) {
    return // Don't submit if validation fails
  }
  
  try {
    // In real app, this would call payment processor
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        items: cart.items,
        customer: formData,
        total: total
      })
    })
    
    if (response.ok) {
      // Redirect to success page with order details
      window.location.href = '/checkout/success'
    } else {
      throw new Error('Payment failed')
    }
  } catch (error) {
    setErrors({ general: 'Something went wrong. Please try again.' })
  }
}