Building a Full-Stack Blog with Django and React

Project Overview

In this tutorial, we'll build a complete blog application with a Django REST Framework backend and a React frontend. The application will feature user authentication, CRUD operations for posts, categories, tags, and a responsive design.

Backend: Django REST Framework

Django provides an excellent foundation for building robust APIs. Combined with Django REST Framework, we get serialization, authentication, and viewsets out of the box.

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

class CategorySerializer(serializers.ModelSerializer):
    post_count = serializers.IntegerField(read_only=True)

    class Meta:
        model = Category
        fields = ['id', 'name', 'slug', 'description', 'post_count']

class BlogPostSerializer(serializers.ModelSerializer):
    category = CategorySerializer(read_only=True)
    reading_time = serializers.SerializerMethodField()

    class Meta:
        model = BlogPost
        fields = ['id', 'title', 'slug', 'excerpt', 'content',
                  'category', 'reading_time', 'published_date']

    def get_reading_time(self, obj):
        return obj.get_reading_time()

Frontend: React Components

The React frontend consumes the API and renders the blog with a clean, responsive interface. We use React Router for navigation and React Query for data fetching.

// components/BlogList.jsx
import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom';

export default function BlogList() {
    const { data: posts, isLoading } = useQuery({
        queryKey: ['posts'],
        queryFn: () => fetch('/api/posts/').then(r => r.json())
    });

    if (isLoading) return <div>Loading...</div>;

    return (
        <div className="blog-grid">
            {posts.map(post => (
                <article key={post.id}>
                    <Link to={`/blog/${post.slug}`}>
                        <h2>{post.title}</h2>
                    </Link>
                    <p>{post.excerpt}</p>
                    <span>{post.reading_time} min read</span>
                </article>
            ))}
        </div>
    );
}

Deployment

We deploy the Django backend with Gunicorn behind Nginx, and the React frontend as static files served by the same Nginx instance. PostgreSQL handles the database, and Redis provides caching for frequently accessed posts.