Building a Modern Blog Platform: React + Django

1// Modern Component Architecture with Hooks
2const Blog = () => {
3    const [blogs, setBlogs] = useState([]);
4    const [featuredBlog, setFeaturedBlog] = useState([]);
5    const [loading, setLoading] = useState(true);
6
7    useEffect(() => {
8        const fetchData = async () => {
9            try {
10                // Parallel API calls for optimal performance
11                const [featuredRes, blogsRes] = await Promise.all([
12                    axios.get(API_ENDPOINTS.BLOG_FEATURED),
13                    axios.get(API_ENDPOINTS.BLOG_LIST)
14                ]);
15                
16                setFeaturedBlog(featuredRes.data[0] || {});
17                setBlogs(blogsRes.data || []);
18            } catch (err) {
19                console.error('Error fetching blog data:', err);
20            } finally {
21                setLoading(false);
22            }
23        };
24        fetchData();
25    }, []);
26
27    // Dynamic rendering with category-specific styling
28    const getCategoryGradient = (category) => {
29        const gradients = {
30            technology: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
31            business: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
32            health: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
33        };
34        return gradients[category] || gradients.technology;
35    };
36
37    return (
38        <div className="modern-blog-container">
39            {loading ? <LoadingSpinner /> : <BlogGrid blogs={blogs} />}
40        </div>
41    );
42};

1# models.py - Business Logic Layer
2class BlogPost(models.Model):
3    title = models.CharField(max_length=50)
4    slug = models.SlugField(unique=True, blank=True)
5    category = models.CharField(
6        max_length=50, 
7        choices=Categories.choices, 
8        default=Categories.WORLD
9    )
10    excerpt = models.CharField(max_length=150)
11    content = models.TextField()
12    thumbnail = models.ImageField(upload_to='blog_thumbnails/', blank=True, null=True)
13    featured = models.BooleanField(default=False)
14    date_created = models.DateTimeField(default=timezone.now)
15    
16    # Automatic SEO optimization
17    def save(self, *args, **kwargs):
18        if not self.slug:
19            self.slug = slugify(self.title)
20        # Auto-populate month/day for better organization
21        if self.date_created:
22            self.month = self.date_created.strftime('%B')
23            self.day = self.date_created.strftime('%d')
24        super().save(*args, **kwargs)
25
26    def get_reading_time(self):
27        """Calculate estimated reading time"""
28        word_count = len(self.content.split())
29        return max(1, round(word_count / 200))  # Average reading speed
30
31    class Meta:
32        ordering = ['-date_created']
33        indexes = [
34            models.Index(fields=['category', '-date_created']),
35            models.Index(fields=['featured']),
36        ]

1# serializers.py - API Data Layer
2class BlogPostSerializer(serializers.ModelSerializer):
3    thumbnail = serializers.SerializerMethodField()
4    reading_time = serializers.SerializerMethodField()
5    
6    class Meta:
7        model = BlogPost
8        fields = '__all__'
9    
10    def get_thumbnail(self, obj):
11        """Generate absolute URL for thumbnails"""
12        if obj.thumbnail:
13            request = self.context.get('request')
14            if request:
15                return request.build_absolute_uri(obj.thumbnail.url)
16        return None
17    
18    def get_reading_time(self, obj):
19        return obj.get_reading_time()
20
21# views.py - High-Performance API Endpoints
22class BlogPostListAPIView(generics.ListAPIView):
23    queryset = BlogPost.objects.select_related().prefetch_related('category')
24    serializer_class = BlogPostSerializer
25    pagination_class = StandardResultsSetPagination
26    
27    def get_queryset(self):
28        """Optimized queryset with intelligent caching"""
29        queryset = super().get_queryset()
30        category = self.request.query_params.get('category')
31        
32        if category:
33            queryset = queryset.filter(category__iexact=category)
34            
35        return queryset.order_by('-date_created')

1// BlogDetail.js - Immersive Article Reading Experience
2const BlogDetail = () => {
3    const [blog, setBlog] = useState({});
4    const [loading, setLoading] = useState(true);
5    const { slug } = useParams();
6
7    const processContent = (content) => {
8        if (!content) return '';
9        
10        // Process YouTube embeds for responsive display
11        let processedContent = content.replace(
12            /<iframe[^>]*src="([^"]*youtube[^"]*)"[^>]*><\/iframe>/gi,
13            (match, src) => `
14                <div class="video-responsive">
15                    <iframe src="${src}" frameborder="0" allowfullscreen></iframe>
16                </div>
17            `
18        );
19        
20        // Enhance image display
21        processedContent = processedContent.replace(
22            /<img([^>]*)>/gi,
23            '<img$1 style="max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0;">'
24        );
25        
26        return processedContent;
27    };
28
29    const articleStyles = {
30        content: {
31            fontSize: '1.1rem',
32            lineHeight: '1.8',
33            color: '#333',
34            maxWidth: '800px',
35            margin: '0 auto'
36        },
37        headings: {
38            h2: { 
39                fontSize: '2rem', 
40                fontWeight: '700',
41                margin: '2rem 0 1rem',
42                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
43                WebkitBackgroundClip: 'text',
44                WebkitTextFillColor: 'transparent'
45            }
46        }
47    };
48
49    return (
50        <article className="blog-detail-container">
51            <header className="hero-section" style={{
52                background: getCategoryGradient(blog.category),
53                minHeight: '400px',
54                display: 'flex',
55                alignItems: 'center',
56                color: 'white'
57            }}>
58                <div className="container">
59                    <h1 className="display-4 font-weight-bold">{blog.title}</h1>
60                    <div className="article-meta">
61                        <span>{blog.month} {blog.day}, {new Date(blog.date_created).getFullYear()}</span>
62                        <span> • {blog.reading_time} min read</span>
63                    </div>
64                </div>
65            </header>
66            
67            <div 
68                className="article-content"
69                style={articleStyles.content}
70                dangerouslySetInnerHTML={{ __html: processContent(blog.content) }}
71            />
72        </article>
73    );
74};

1# Advanced content workflow management
2class ContentWorkflow(models.Model):
3    DRAFT = 'draft'
4    REVIEW = 'review'
5    APPROVED = 'approved'
6    PUBLISHED = 'published'
7    
8    STATUS_CHOICES = [
9        (DRAFT, 'Draft'),
10        (REVIEW, 'Under Review'),
11        (APPROVED, 'Approved'),
12        (PUBLISHED, 'Published'),
13    ]
14    
15    blog_post = models.OneToOneField(BlogPost, on_delete=models.CASCADE)
16    status = models.CharField(max_length=20, choices=STATUS_CHOICES, default=DRAFT)
17    assigned_editor = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
18    review_notes = models.TextField(blank=True)
19    
20    def can_publish(self):
21        return self.status == self.APPROVED and self.assigned_editor

1// Real-time content updates for breaking news
2const useRealTimeUpdates = (category) => {
3    const [updates, setUpdates] = useState([]);
4    
5    useEffect(() => {
6        const pollForUpdates = async () => {
7            try {
8                const response = await axios.get(
9                    `${API_BASE_URL}/api/blog/?category=${category}&since=${lastUpdate}`
10                );
11                if (response.data.length > 0) {
12                    setUpdates(response.data);
13                }
14            } catch (error) {
15                console.error('Failed to fetch updates:', error);
16            }
17        };
18        
19        const interval = setInterval(pollForUpdates, 30000); // Poll every 30 seconds
20        return () => clearInterval(interval);
21    }, [category, lastUpdate]);
22    
23    return updates;
24};

# Product-aware blog posts for e-commerce
class ProductBlogPost(BlogPost):
    related_products = models.ManyToManyField('products.Product', blank=True)
    conversion_goal = models.CharField(max_length=100, blank=True)
    
    def get_conversion_rate(self):
        """Track blog-to-purchase conversion"""
        # Implementation for tracking business impact
        pass

1# settings.py - Summernote Configuration
2SUMMERNOTE_CONFIG = {
3    'summernote': {
4        'toolbar': [
5            ['style', ['style']],
6            ['font', ['bold', 'underline', 'clear']],
7            ['fontname', ['fontname']],
8            ['color', ['color']],
9            ['para', ['ul', 'ol', 'paragraph']],
10            ['table', ['table']],
11            ['insert', ['link', 'picture', 'video']],
12            ['view', ['fullscreen', 'codeview', 'help']],
13        ],
14        'width': '100%',
15        'height': '600px',
16        'codemirror': {
17            'mode': 'htmlmixed',
18            'lineNumbers': True,
19            'theme': 'monokai',
20        },
21    },
22    'css': (
23        'css/summernote-custom.css',
24    ),
25    'js': (
26        'js/summernote-custom.js',
27    ),
28    'attachment_require_authentication': True,
29    'attachment_filesize_limit': 10 * 1024 * 1024,  # 10MB
30}

1// Frontend optimization strategies
2import { lazy, Suspense, memo } from 'react';
3
4// Code splitting for better performance
5const BlogDetail = lazy(() => import('./components/BlogDetail'));
6const Category = lazy(() => import('./components/Category'));
7
8// Memoized components to prevent unnecessary re-renders
9const MemoizedBlogCard = memo(({ blog }) => {
10    return (
11        <div className="blog-card" style={{
12            background: 'white',
13            borderRadius: '12px',
14            boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
15            transition: 'transform 0.3s ease, box-shadow 0.3s ease'
16        }}>
17            <h3>{blog.title}</h3>
18            <p>{blog.excerpt}</p>
19        </div>
20    );
21});
22
23// Optimized image loading
24const LazyImage = ({ src, alt, ...props }) => {
25    const [loaded, setLoaded] = useState(false);
26    
27    return (
28        <div className="image-container">
29            {!loaded && <div className="image-skeleton" />}
30            <img
31                src={src}
32                alt={alt}
33                loading="lazy"
34                onLoad={() => setLoaded(true)}
35                style={{ display: loaded ? 'block' : 'none' }}
36                {...props}
37            />
38        </div>
39    );
40};

1# settings.py - Production configuration
2import os
3from pathlib import Path
4
5# Production settings
6DEBUG = False
7ALLOWED_HOSTS = ['yourdomain.com', 'www.yourdomain.com']
8
9# Database optimization for production
10DATABASES = {
11    'default': {
12        'ENGINE': 'django.db.backends.postgresql',
13        'NAME': os.getenv('DB_NAME'),
14        'USER': os.getenv('DB_USER'),
15        'PASSWORD': os.getenv('DB_PASSWORD'),
16        'HOST': os.getenv('DB_HOST', 'localhost'),
17        'PORT': os.getenv('DB_PORT', '5432'),
18        'OPTIONS': {
19            'MAX_CONNS': 20,
20            'conn_max_age': 600,
21        }
22    }
23}
24
25# Static files configuration
26STATIC_URL = '/static/'
27STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
28STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
29
30# Media files with CDN support
31DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
32AWS_STORAGE_BUCKET_NAME = os.getenv('AWS_STORAGE_BUCKET_NAME')
33
34# Caching for high performance
35CACHES = {
36    'default': {
37        'BACKEND': 'django_redis.cache.RedisCache',
38        'LOCATION': os.getenv('REDIS_URL'),
39        'OPTIONS': {
40            'CLIENT_CLASS': 'django_redis.client.DefaultClient',
41        }
42    }
43}

1# Dockerfile for production deployment
2FROM node:18-alpine as frontend-build
3WORKDIR /app/frontend
4COPY frontend/package*.json ./
5RUN npm ci --only=production
6COPY frontend/ ./
7RUN npm run build
8
9FROM python:3.9-slim
10WORKDIR /app
11
12# Install system dependencies
13RUN apt-get update && apt-get install -y \
14    gcc \
15    postgresql-client \
16    && rm -rf /var/lib/apt/lists/*
17
18# Install Python dependencies
19COPY backend/requirements.txt .
20RUN pip install --no-cache-dir -r requirements.txt
21
22# Copy application code
23COPY backend/ .
24COPY --from=frontend-build /app/frontend/build ./frontend/build
25
26# Collect static files
27RUN python manage.py collectstatic --noinput
28
29EXPOSE 8000
30CMD ["gunicorn", "--bind", "0.0.0.0:8000", "blog_lyfe.wsgi:application"]