# blog/serializers.py
from rest_framework import serializers
from .models import BlogPost

class BlogPostSerializer(serializers.ModelSerializer):
    author_name = serializers.SerializerMethodField()

    class Meta:
        model = BlogPost
        fields = ['id', 'title', 'slug', 'excerpt',
                  'published_at', 'author_name', 'featured_image']

    def get_author_name(self, obj):
        return obj.author.get_full_name()


# blog/views.py
from rest_framework import viewsets, permissions, filters
from django_filters.rest_framework import DjangoFilterBackend
from .models import BlogPost
from .serializers import BlogPostSerializer

class BlogPostViewSet(viewsets.ReadOnlyModelViewSet):
    serializer_class = BlogPostSerializer
    permission_classes = [permissions.AllowAny]
    filter_backends = [DjangoFilterBackend, filters.SearchFilter]
    filterset_fields = ['category__slug']
    search_fields = ['title', 'excerpt']

    def get_queryset(self):
        return (BlogPost.objects
                .filter(status='published')
                .select_related('author', 'category')
                .order_by('-published_at'))


# blog/urls.py
from rest_framework.routers import DefaultRouter
from .views import BlogPostViewSet

router = DefaultRouter()
router.register(r'posts', BlogPostViewSet, basename='post')
urlpatterns = router.urls
# Generates: /api/blog/posts/ and /api/blog/posts/{id}/

// components/BlogList.jsx
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

const API_BASE = process.env.REACT_APP_API_URL;

export default function BlogList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const res = await fetch(`${API_BASE}/api/blog/posts/`);
        if (!res.ok) throw new Error('Failed to fetch posts');
        const data = await res.json();
        setPosts(data.results);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchPosts();
  }, []);

  if (loading) return <div className="loading-skeleton" />;
  if (error)   return <p className="error-msg">{error}</p>;

  return (
    <section className="blog-grid">
      {posts.map(post => (
        <article key={post.id} className="blog-card">
          <img src={post.featured_image} alt={post.title} loading="lazy" />
          <h2><Link to={`/blog/${post.slug}`}>{post.title}</Link></h2>
          <p className="meta">{post.author_name} · {post.published_at}</p>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </section>
  );
}

# Define the data model
from django.db import models

class Product(models.Model):
    name        = models.CharField(max_length=255)
    slug        = models.SlugField(unique=True)
    price       = models.DecimalField(max_digits=10, decimal_places=2)
    stock       = models.PositiveIntegerField(default=0)
    category    = models.ForeignKey('Category', on_delete=models.PROTECT)
    created_at  = models.DateTimeField(auto_now_add=True)
    is_active   = models.BooleanField(default=True)

    class Meta:
        ordering = ['-created_at']
        indexes  = [models.Index(fields=['slug']), models.Index(fields=['category'])]

# Complex query — readable, safe, optimised
featured_products = (
    Product.objects
    .filter(is_active=True, stock__gt=0, category__slug='electronics')
    .select_related('category')          # avoids N+1 query problem
    .prefetch_related('images', 'tags')   # batch fetches relations
    .annotate(review_avg=Avg('reviews__rating'))
    .order_by('-review_avg', 'price')
    [:12]
)

from wagtail.models import Page
from wagtail.fields import RichTextField, StreamField
from wagtail.blocks import CharBlock, RichTextBlock, ImageChooserBlock
from wagtail.admin.panels import FieldPanel, MultiFieldPanel

class ServicePage(Page):
    # StreamField lets editors build flexible page layouts
    body = StreamField([
        ('heading',    CharBlock(classname='title')),
        ('paragraph',  RichTextBlock()),
        ('image',      ImageChooserBlock()),
    ], use_json_field=True)

    intro      = RichTextField(blank=True)
    meta_title = models.CharField(max_length=60, blank=True)
    meta_desc  = models.CharField(max_length=160, blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('intro'),
        FieldPanel('body'),
        MultiFieldPanel([
            FieldPanel('meta_title'),
            FieldPanel('meta_desc'),
        ], heading='SEO'),
    ]

// A reusable ProductCard component
function ProductCard({ product, onAddToCart }) {
  const [added, setAdded] = useState(false);

  const handleAdd = () => {
    onAddToCart(product);
    setAdded(true);
    setTimeout(() => setAdded(false), 2000);
  };

  return (
    <article className="product-card" aria-label={product.name}>
      <img
        src={product.image}
        alt={product.name}
        loading="lazy"
        width={400} height={400}
      />
      <div className="card-body">
        <h3>{product.name}</h3>
        <p className="price">₹{product.price.toLocaleString('en-IN')}</p>
        <button
          onClick={handleAdd}
          disabled={added || product.stock === 0}
          className={`btn-cart ${added ? 'added' : ''}`}
        >
          {product.stock === 0 ? 'Out of Stock'
            : added ? '✓ Added'
            : 'Add to Cart'}
        </button>
      </div>
    </article>
  );
}

// Used in a grid — same component, different data
function ProductGrid({ products, onAddToCart }) {
  return (
    <section className="product-grid">
      {products.map(p => (
        <ProductCard key={p.id} product={p} onAddToCart={onAddToCart} />
      ))}
    </section>
  );
}

import { createContext, useContext, useReducer } from 'react';

const CartContext = createContext(null);

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(i => i.id === action.item.id);
      if (existing) {
        return { ...state, items: state.items.map(i =>
          i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
        )};
      }
      return { ...state, items: [...state.items, { ...action.item, qty: 1 }] };
    }
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    case 'CLEAR':
      return { items: [] };
    default:
      return state;
  }
}

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  const total = state.items.reduce((sum, i) => sum + i.price * i.qty, 0);

  return (
    <CartContext.Provider value={{ ...state, total, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

/* ProductCard.module.css */
.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.btn-cart {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: background 150ms;
}

.btn-cart.added {
  background: var(--color-success);
}

.btn-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

from django.core.cache import cache
from rest_framework.response import Response
from rest_framework.views import APIView

class FeaturedProductsView(APIView):
    def get(self, request):
        cache_key = f"featured_products_{request.LANGUAGE_CODE}"
        cached = cache.get(cache_key)

        if cached:
            return Response(cached)   # served from Redis — no DB hit

        qs = (Product.objects
              .filter(is_featured=True, is_active=True)
              .select_related('category')
              .order_by('-updated_at')[:8])

        data = ProductSerializer(qs, many=True).data
        cache.set(cache_key, data, timeout=60 * 15)  # 15-minute TTL
        return Response(data)

from celery import shared_task
from django.core.mail import EmailMultiAlternatives
from django.template.loader import render_to_string

@shared_task(bind=True, max_retries=3, default_retry_delay=60)
def send_order_confirmation(self, order_id):
    try:
        order = Order.objects.select_related('user').get(pk=order_id)
        html_body = render_to_string('emails/order_confirm.html', {'order': order})
        msg = EmailMultiAlternatives(
            subject=f"Order #{order.reference} Confirmed",
            to=[order.user.email],
        )
        msg.attach_alternative(html_body, 'text/html')
        msg.send()
    except Exception as exc:
        raise self.retry(exc=exc)

# Called from the order view — does not block the HTTP response
send_order_confirmation.delay(order.id)

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// These components are loaded ONLY when their route is visited
const Home        = lazy(() => import('./pages/Home'));
const ProductList = lazy(() => import('./pages/ProductList'));
const Checkout    = lazy(() => import('./pages/Checkout'));
const Dashboard   = lazy(() => import('./pages/Dashboard'));

export default function App() {
  return (
    <Suspense fallback=<div className="page-skeleton" />>
      <Routes>
        <Route path="/"          element=<Home /> />
        <Route path="/products"  element=<ProductList /> />
        <Route path="/checkout"  element=<Checkout /> />
        <Route path="/dashboard" element=<Dashboard /> />
      </Routes>
    </Suspense>
  );
}
// Result: initial JS bundle ~60% smaller than loading everything upfront