DailyDevDiet

logo - dailydevdiet

Learn. Build. Innovate. Elevate your coding skills with dailydevdiet!

Menu
Twitter Linkedin Instagram Facebook-f

Chapter 37: React Case Studies and Real Life Examples

By /
React Case Studies

Introduction

Real-world applications provide valuable insights into how React concepts work together to solve complex problems. This chapter examines several React case studies that demonstrate different React patterns, architectures, and solutions used in production applications.

Case Study 1: E-commerce Platform – “ShopReact”

Project Overview

A full-featured e-commerce platform built with React, featuring product catalog, shopping cart, user authentication, and payment processing.

Technical Stack

  • Frontend: React 18, TypeScript, Tailwind CSS
  • State Management: Redux Toolkit
  • Routing: React Router v6
  • API Integration: Axios with React Query
  • Authentication: JWT tokens
  • Payment: Stripe integration

Key Features Implementation

1. Product Catalog with Search and Filtering

// components/ProductCatalog.tsx
import React, { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
import { Product, FilterOptions } from '../types';
import { fetchProducts } from '../api/products';

interface ProductCatalogProps {
  category?: string;
}

const ProductCatalog: React.FC<ProductCatalogProps> = ({ category }) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [filters, setFilters] = useState<FilterOptions>({
    search: searchParams.get('search') || '',
    minPrice: Number(searchParams.get('minPrice')) || 0,
    maxPrice: Number(searchParams.get('maxPrice')) || 1000,
    sortBy: searchParams.get('sortBy') || 'relevance',
    category: category || searchParams.get('category') || 'all'
  });

  const { data: products, isLoading, error } = useQuery({
    queryKey: ['products', filters],
    queryFn: () => fetchProducts(filters),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

  // Update URL when filters change
  useEffect(() => {
    const params = new URLSearchParams();
    Object.entries(filters).forEach(([key, value]) => {
      if (value && value !== 'all' && value !== 0) {
        params.set(key, value.toString());
      }
    });
    setSearchParams(params);
  }, [filters, setSearchParams]);

  const handleFilterChange = (newFilters: Partial<FilterOptions>) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
  };

  if (isLoading) return <ProductSkeleton />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex flex-col lg:flex-row gap-8">
        {/* Sidebar Filters */}
        <aside className="lg:w-1/4">
          <FilterSidebar
            filters={filters}
            onFilterChange={handleFilterChange}
          />
        </aside>
       
        {/* Product Grid */}
        <main className="lg:w-3/4">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-bold">
              {category ? `${category} Products` : 'All Products'}
            </h1>
            <span className="text-gray-600">
              {products?.length || 0} products found
            </span>
          </div>
         
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {products?.map((product: Product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </main>
      </div>
    </div>
  );
};

export default ProductCatalog;

2. Shopping Cart with Optimistic Updates

// hooks/useCart.ts
import { useState, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { addToCart, removeFromCart, updateQuantity } from '../store/cartSlice';
import { updateCartItem } from '../api/cart';
import { CartItem } from '../types';

export const useCart = () => {
  const dispatch = useDispatch();
  const queryClient = useQueryClient();
  const cartItems = useSelector(state => state.cart.items);
  const [optimisticUpdates, setOptimisticUpdates] = useState<Record<string, CartItem>>({});

  const updateCartMutation = useMutation({
    mutationFn: updateCartItem,
    onMutate: async (newItem: CartItem) => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['cart'] });
     
      // Snapshot previous value
      const previousCart = queryClient.getQueryData(['cart']);
     
      // Optimistically update
      setOptimisticUpdates(prev => ({ ...prev, [newItem.id]: newItem }));
     
      return { previousCart };
    },
    onError: (err, newItem, context) => {
      // Rollback optimistic update
      setOptimisticUpdates(prev => {
        const updated = { ...prev };
        delete updated[newItem.id];
        return updated;
      });
     
      // Restore previous state
      queryClient.setQueryData(['cart'], context?.previousCart);
    },
    onSuccess: (data, newItem) => {
      // Remove optimistic update
      setOptimisticUpdates(prev => {
        const updated = { ...prev };
        delete updated[newItem.id];
        return updated;
      });
     
      // Update Redux store
      dispatch(updateQuantity({ id: newItem.id, quantity: newItem.quantity }));
    },
  });

  const addItem = useCallback((product: Product, quantity: number = 1) => {
    const cartItem: CartItem = {
      id: product.id,
      name: product.name,
      price: product.price,
      quantity,
      image: product.image,
    };
   
    dispatch(addToCart(cartItem));
    updateCartMutation.mutate(cartItem);
  }, [dispatch, updateCartMutation]);

  const removeItem = useCallback((id: string) => {
    dispatch(removeFromCart(id));
    updateCartMutation.mutate({ id, quantity: 0 });
  }, [dispatch, updateCartMutation]);

  // Merge actual cart items with optimistic updates
  const displayItems = cartItems.map(item =>
    optimisticUpdates[item.id] || item
  );

  return {
    items: displayItems,
    addItem,
    removeItem,
    updateQuantity: updateCartMutation.mutate,
    isUpdating: updateCartMutation.isPending,
    total: displayItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
  };
};

3. Checkout Process with Multi-Step Form

// components/CheckoutProcess.tsx
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useCart } from '../hooks/useCart';
import { useStripe } from '../hooks/useStripe';

const checkoutSchema = z.object({
  // Shipping Information
  email: z.string().email('Invalid email address'),
  firstName: z.string().min(1, 'First name is required'),
  lastName: z.string().min(1, 'Last name is required'),
  address: z.string().min(1, 'Address is required'),
  city: z.string().min(1, 'City is required'),
  zipCode: z.string().min(5, 'Valid zip code required'),
  country: z.string().min(1, 'Country is required'),
 
  // Payment Information
  cardNumber: z.string().min(16, 'Valid card number required'),
  expiryDate: z.string().regex(/^\d{2}\/\d{2}$/, 'MM/YY format required'),
  cvv: z.string().min(3, 'CVV required'),
  billingAddress: z.boolean(),
});

type CheckoutFormData = z.infer<typeof checkoutSchema>;

const CheckoutProcess: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [isProcessing, setIsProcessing] = useState(false);
  const { items, total } = useCart();
  const { processPayment } = useStripe();
 
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
    watch,
    trigger,
  } = useForm<CheckoutFormData>({
    resolver: zodResolver(checkoutSchema),
    mode: 'onChange',
  });

  const steps = [
    { id: 1, title: 'Shipping Information', fields: ['email', 'firstName', 'lastName', 'address', 'city', 'zipCode', 'country'] },
    { id: 2, title: 'Payment Information', fields: ['cardNumber', 'expiryDate', 'cvv', 'billingAddress'] },
    { id: 3, title: 'Review & Confirm', fields: [] },
  ];

  const handleNextStep = async () => {
    const currentStepFields = steps[currentStep - 1].fields;
    const isStepValid = await trigger(currentStepFields as any);
   
    if (isStepValid) {
      setCurrentStep(prev => Math.min(prev + 1, steps.length));
    }
  };

  const handlePreviousStep = () => {
    setCurrentStep(prev => Math.max(prev - 1, 1));
  };

  const onSubmit = async (data: CheckoutFormData) => {
    setIsProcessing(true);
   
    try {
      const orderData = {
        items,
        total,
        shippingAddress: {
          email: data.email,
          firstName: data.firstName,
          lastName: data.lastName,
          address: data.address,
          city: data.city,
          zipCode: data.zipCode,
          country: data.country,
        },
        paymentMethod: {
          cardNumber: data.cardNumber,
          expiryDate: data.expiryDate,
          cvv: data.cvv,
        },
      };

      await processPayment(orderData);
     
      // Redirect to success page
      window.location.href = '/order-success';
    } catch (error) {
      console.error('Payment failed:', error);
      // Handle error (show notification, etc.)
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      {/* Progress Indicator */}
      <div className="mb-8">
        <div className="flex items-center justify-between">
          {steps.map((step) => (
            <div key={step.id} className="flex items-center">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white font-bold ${
                currentStep >= step.id ? 'bg-blue-500' : 'bg-gray-300'
              }`}>
                {step.id}
              </div>
              <span className={`ml-2 ${currentStep >= step.id ? 'text-blue-500' : 'text-gray-400'}`}>
                {step.title}
              </span>
              {step.id < steps.length && (
                <div className={`w-16 h-1 mx-4 ${
                  currentStep > step.id ? 'bg-blue-500' : 'bg-gray-300'
                }`} />
              )}
            </div>
          ))}
        </div>
      </div>

      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Step Content */}
        {currentStep === 1 && (
          <ShippingInformation register={register} errors={errors} />
        )}
       
        {currentStep === 2 && (
          <PaymentInformation register={register} errors={errors} />
        )}
       
        {currentStep === 3 && (
          <OrderReview items={items} total={total} formData={watch()} />
        )}

        {/* Navigation Buttons */}
        <div className="flex justify-between mt-8">
          {currentStep > 1 && (
            <button
              type="button"
              onClick={handlePreviousStep}
              className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
            >
              Previous
            </button>
          )}
         
          <div className="ml-auto">
            {currentStep < steps.length ? (
              <button
                type="button"
                onClick={handleNextStep}
                className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
              >
                Next
              </button>
            ) : (
              <button
                type="submit"
                disabled={isProcessing}
                className="px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 disabled:opacity-50"
              >
                {isProcessing ? 'Processing...' : 'Place Order'}
              </button>
            )}
          </div>
        </div>
      </form>
    </div>
  );
};

export default CheckoutProcess;

Key Lessons Learned

  1. State Management: Redux Toolkit simplified state management while React Query handled server state efficiently
  2. Performance: Implementing optimistic updates improved user experience during cart operations
  3. Form Validation: Zod with React Hook Form provided robust validation with TypeScript support
  4. URL State: Synchronizing filters with URL parameters improved SEO and user experience
  5. Error Handling: Comprehensive error boundaries and fallbacks ensured app stability

Case Study 2: Social Media Dashboard – “ReactSocial”

Project Overview

A real-time social media management dashboard for scheduling posts, monitoring analytics, and managing multiple social accounts.

Technical Stack

  • Frontend: React 18, Next.js 13
  • State Management: Zustand
  • Real-time: Socket.io
  • Charts: Recharts
  • Authentication: NextAuth.js
  • Database: Prisma with PostgreSQL

Key Features Implementation

1. Real-time Analytics Dashboard

// components/AnalyticsDashboard.tsx
import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { useSocket } from '../hooks/useSocket';
import { useDashboardStore } from '../store/dashboardStore';

interface AnalyticsData {
  timestamp: string;
  followers: number;
  engagement: number;
  impressions: number;
  clicks: number;
}

const AnalyticsDashboard: React.FC = () => {
  const [timeRange, setTimeRange] = useState('7d');
  const { analyticsData, setAnalyticsData, isLoading } = useDashboardStore();
  const socket = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on('analytics-update', (data: AnalyticsData) => {
        setAnalyticsData(prev => [...prev.slice(-99), data]); // Keep last 100 points
      });

      socket.on('bulk-analytics', (data: AnalyticsData[]) => {
        setAnalyticsData(data);
      });

      // Request initial data
      socket.emit('get-analytics', { timeRange });

      return () => {
        socket.off('analytics-update');
        socket.off('bulk-analytics');
      };
    }
  }, [socket, timeRange, setAnalyticsData]);

  const metrics = [
    { key: 'followers', label: 'Followers', color: '#8884d8' },
    { key: 'engagement', label: 'Engagement', color: '#82ca9d' },
    { key: 'impressions', label: 'Impressions', color: '#ffc658' },
    { key: 'clicks', label: 'Clicks', color: '#ff7300' },
  ];

  if (isLoading) {
    return (
      <div className="p-6 bg-white rounded-lg shadow">
        <div className="animate-pulse space-y-4">
          <div className="h-4 bg-gray-200 rounded w-1/4"></div>
          <div className="h-64 bg-gray-200 rounded"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold">Analytics Overview</h2>
        <select
          value={timeRange}
          onChange={(e) => setTimeRange(e.target.value)}
          className="border rounded px-3 py-2"
        >
          <option value="24h">Last 24 Hours</option>
          <option value="7d">Last 7 Days</option>
          <option value="30d">Last 30 Days</option>
          <option value="90d">Last 90 Days</option>
        </select>
      </div>

      {/* Metrics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        {metrics.map((metric) => {
          const latestValue = analyticsData[analyticsData.length - 1]?.[metric.key] || 0;
          const previousValue = analyticsData[analyticsData.length - 2]?.[metric.key] || 0;
          const change = latestValue - previousValue;
          const changePercent = previousValue ? (change / previousValue) * 100 : 0;

          return (
            <div key={metric.key} className="p-4 border rounded-lg">
              <h3 className="text-sm font-medium text-gray-500">{metric.label}</h3>
              <p className="text-2xl font-bold mt-2">{latestValue.toLocaleString()}</p>
              <p className={`text-sm mt-1 ${change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                {change >= 0 ? '+' : ''}{change.toLocaleString()} ({changePercent.toFixed(1)}%)
              </p>
            </div>
          );
        })}
      </div>

      {/* Chart */}
      <div className="h-96">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={analyticsData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="timestamp" />
            <YAxis />
            <Tooltip />
            {metrics.map((metric) => (
              <Line
                key={metric.key}
                type="monotone"
                dataKey={metric.key}
                stroke={metric.color}
                strokeWidth={2}
                dot={{ r: 4 }}
                activeDot={{ r: 6 }}
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default AnalyticsDashboard;

2. Post Scheduler with Drag & Drop

// components/PostScheduler.tsx
import React, { useState, useCallback } from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { format, addDays, isSameDay } from 'date-fns';
import { useSchedulerStore } from '../store/schedulerStore';

interface ScheduledPost {
  id: string;
  content: string;
  platform: 'twitter' | 'facebook' | 'instagram';
  scheduledTime: Date;
  status: 'scheduled' | 'published' | 'failed';
  images?: string[];
}

const PostScheduler: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const { posts, movePost, updatePost } = useSchedulerStore();
 
  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(selectedDate, i));
  const timeSlots = Array.from({ length: 24 }, (_, i) => i);

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="p-6 bg-white rounded-lg shadow">
        <h2 className="text-2xl font-bold mb-6">Post Scheduler</h2>
       
        {/* Calendar Grid */}
        <div className="grid grid-cols-8 gap-1 mb-4">
          {/* Header */}
          <div className="p-2 font-semibold">Time</div>
          {weekDays.map((day) => (
            <div key={day.toISOString()} className="p-2 text-center font-semibold">
              {format(day, 'EEE')}
              <br />
              {format(day, 'MMM d')}
            </div>
          ))}
         
          {/* Time slots */}
          {timeSlots.map((hour) => (
            <React.Fragment key={hour}>
              <div className="p-2 text-sm text-gray-500 border-t">
                {format(new Date().setHours(hour, 0, 0, 0), 'HH:mm')}
              </div>
              {weekDays.map((day) => (
                <ScheduleSlot
                  key={`${day.toISOString()}-${hour}`}
                  date={day}
                  hour={hour}
                  posts={posts.filter(post =>
                    isSameDay(post.scheduledTime, day) &&
                    post.scheduledTime.getHours() === hour
                  )}
                  onMovePst={movePost}
                />
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </DndProvider>
  );
};

interface ScheduleSlotProps {
  date: Date;
  hour: number;
  posts: ScheduledPost[];
  onMovePost: (postId: string, newDate: Date) => void;
}

const ScheduleSlot: React.FC<ScheduleSlotProps> = ({ date, hour, posts, onMovePost }) => {
  const [{ isOver }, drop] = useDrop({
    accept: 'post',
    drop: (item: { id: string }) => {
      const newDate = new Date(date);
      newDate.setHours(hour, 0, 0, 0);
      onMovePost(item.id, newDate);
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <div
      ref={drop}
      className={`p-1 min-h-[60px] border-t border-r ${
        isOver ? 'bg-blue-50' : 'bg-gray-50'
      }`}
    >
      {posts.map((post) => (
        <DraggablePost key={post.id} post={post} />
      ))}
    </div>
  );
};

interface DraggablePostProps {
  post: ScheduledPost;
}

const DraggablePost: React.FC<DraggablePostProps> = ({ post }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'post',
    item: { id: post.id },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  const platformColors = {
    twitter: 'bg-blue-500',
    facebook: 'bg-blue-600',
    instagram: 'bg-pink-500',
  };

  return (
    <div
      ref={drag}
      className={`p-2 mb-1 rounded text-xs cursor-move ${
        platformColors[post.platform]
      } text-white ${isDragging ? 'opacity-50' : ''}`}
    >
      <div className="font-semibold">{post.platform}</div>
      <div className="truncate">{post.content}</div>
      <div className="text-xs opacity-75">{post.status}</div>
    </div>
  );
};

export default PostScheduler;

Key Lessons Learned

  1. Real-time Updates: Socket.io integration provided seamless real-time data updates
  2. State Management: Zustand offered a simpler alternative to Redux for this use case
  3. Drag & Drop: React DnD provided intuitive scheduling interface
  4. Charts: Recharts offered responsive and customizable data visualization
  5. Performance: Virtualization and memoization were crucial for handling large datasets

Case Study 3: Project Management Tool – “ReactTasker”

Project Overview

A comprehensive project management application with Kanban boards, Gantt charts, team collaboration, and time tracking features.

Technical Stack

  • Frontend: React 18, Vite
  • State Management: React Query + Zustand
  • UI Components: Mantine
  • Charts: D3.js
  • Real-time: WebSockets
  • Authentication: Auth0

Key Features Implementation

1. Kanban Board with Optimistic Updates

// components/KanbanBoard.tsx
import React, { useState, useCallback } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useProjectStore } from '../store/projectStore';
import { updateTaskStatus } from '../api/tasks';

interface Task {
  id: string;
  title: string;
  description: string;
  status: 'todo' | 'in-progress' | 'review' | 'done';
  assignee: string;
  priority: 'low' | 'medium' | 'high';
  dueDate: Date;
  labels: string[];
}

const KanbanBoard: React.FC<{ projectId: string }> = ({ projectId }) => {
  const { tasks, updateTaskOptimistic, revertTaskUpdate } = useProjectStore();
  const queryClient = useQueryClient();
 
  const [draggedTask, setDraggedTask] = useState<Task | null>(null);

  const updateTaskMutation = useMutation({
    mutationFn: ({ taskId, newStatus }: { taskId: string; newStatus: string }) =>
      updateTaskStatus(taskId, newStatus),
    onMutate: async ({ taskId, newStatus }) => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['tasks', projectId] });
     
      // Snapshot previous value
      const previousTasks = queryClient.getQueryData(['tasks', projectId]);
     
      // Optimistically update
      updateTaskOptimistic(taskId, { status: newStatus });
     
      return { previousTasks, taskId };
    },
    onError: (err, { taskId }, context) => {
      // Revert optimistic update
      if (context?.previousTasks) {
        queryClient.setQueryData(['tasks', projectId], context.previousTasks);
        revertTaskUpdate(taskId);
      }
    },
    onSettled: () => {
      // Refetch to ensure consistency
      queryClient.invalidateQueries({ queryKey: ['tasks', projectId] });
    },
  });

  const handleDragStart = useCallback((start: any) => {
    const task = tasks.find(t => t.id === start.draggableId);
    setDraggedTask(task || null);
  }, [tasks]);

  const handleDragEnd = useCallback((result: any) => {
    setDraggedTask(null);
   
    if (!result.destination) return;
   
    const { draggableId, destination } = result;
    const newStatus = destination.droppableId;
   
    updateTaskMutation.mutate({ taskId: draggableId, newStatus });
  }, [updateTaskMutation]);

  const columns = [
    { id: 'todo', title: 'To Do', color: 'bg-gray-100' },
    { id: 'in-progress', title: 'In Progress', color: 'bg-blue-100' },
    { id: 'review', title: 'Review', color: 'bg-yellow-100' },
    { id: 'done', title: 'Done', color: 'bg-green-100' },
  ];

  return (
    <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
      <div className="flex gap-4 h-full overflow-x-auto p-4">
        {columns.map((column) => (
          <div key={column.id} className="flex-shrink-0 w-80">
            <div className={`p-4 rounded-lg ${column.color}`}>
              <h3 className="font-semibold text-lg mb-4">{column.title}</h3>
             
              <Droppable droppableId={column.id}>
                {(provided, snapshot) => (
                  <div
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                    className={`min-h-[200px] p-2 rounded transition-colors ${
                      snapshot.isDraggingOver ? 'bg-blue-50' : ''
                    }`}
                  >
                    {tasks
                      .filter(task => task.status === column.id)
                      .map((task, index) => (
                        <Draggable key={task.id} draggableId={task.id} index={index}>
                          {(provided, snapshot) => (
                            <div
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              className={`mb-3 p-3 bg-white rounded-lg shadow-sm border ${
                                snapshot.isDragging ? 'transform rotate-2' : ''
                              }`}
                            >
                              <TaskCard task={task} />
                            </div>
                          )}
                        </Draggable>
                      ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </div>
          </div>
        ))}
      </div>
    </DragDropContext>
  );
};

const TaskCard: React.FC<{ task: Task }> = ({ task }) => {
  const priorityColors = {
    low: 'bg-green-100 text-green-800',
    medium: 'bg-yellow-100 text-yellow-800',
    high: 'bg-red-100 text-red-800',
  };

  return (
    <div className="space-y-2">
      <div className="flex justify-between items-start">
        <h4 className="font-medium text-sm">{task.title}</h4>
        <span className={`px-2 py-1 rounded text-xs ${priorityColors[task.priority]}`}>
          {task.priority}
        </span>
      </div>
     
      <p className="text-xs text-gray-600 line-clamp-2">{task.description}</p>
     
      <div className="flex flex-wrap gap-1">
        {task.labels.map((label) => (
          <span key={label} className="px-2 py-1 bg-gray-100 text-xs rounded">
            {label}
          </span>
        ))}
      </div>
     
      <div className="flex justify-between items-center text-xs text-gray-500">
        <span>{task.assignee}</span>
        <span>{format(task.dueDate, 'MMM d')}</span>
      </div>
    </div>
  );
};

export default KanbanBoard;

#### 2. Gantt Chart with D3.js Integration

// components/GanttChart.tsx
import React, { useRef, useEffect, useState } from 'react';
import * as d3 from 'd3';
import { Task } from '../types';

interface GanttChartProps {
  tasks: Task[];
  width: number;
  height: number;
  onTaskUpdate: (taskId: string, updates: Partial<Task>) => void;
}

const GanttChart: React.FC<GanttChartProps> = ({
  tasks,
  width,
  height,
  onTaskUpdate
}) => {
  const svgRef = useRef<SVGSVGElement>(null);
  const [hoveredTask, setHoveredTask] = useState<string | null>(null);
 
  useEffect(() => {
    if (!svgRef.current) return;
   
    const svg = d3.select(svgRef.current);
    svg.selectAll('*').remove();
   
    const margin = { top: 20, right: 30, bottom: 30, left: 100 };
    const chartWidth = width - margin.left - margin.right;
    const chartHeight = height - margin.top - margin.bottom;
   
    // Create scales
    const xScale = d3.scaleTime()
      .domain(d3.extent(tasks.flatMap(t => [t.startDate, t.endDate])) as [Date, Date])
      .range([0, chartWidth]);
   
    const yScale = d3.scaleBand()
      .domain(tasks.map(t => t.id))
      .range([0, chartHeight])
      .padding(0.1);
   
    // Create main group
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);
   
    // Add axes
    g.append('g')
      .attr('transform', `translate(0,${chartHeight})`)
      .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat('%b %d')));
   
    g.append('g')
      .call(d3.axisLeft(yScale).tickFormat(d => {
        const task = tasks.find(t => t.id === d);
        return task ? task.title : '';
      }));
   
    // Add task bars
    const bars = g.selectAll('.task-bar')
      .data(tasks)
      .enter()
      .append('g')
      .attr('class', 'task-bar');
   
    bars.append('rect')
      .attr('x', d => xScale(d.startDate))
      .attr('y', d => yScale(d.id)!)
      .attr('width', d => xScale(d.endDate) - xScale(d.startDate))
      .attr('height', yScale.bandwidth())
      .attr('fill', d => {
        const colors = {
          'todo': '#e5e7eb',
          'in-progress': '#3b82f6',
          'review': '#f59e0b',
          'done': '#10b981'
        };
        return colors[d.status] || '#6b7280';
      })
      .attr('stroke', '#fff')
      .attr('stroke-width', 1)
      .attr('rx', 4)
      .style('cursor', 'pointer')
      .on('mouseover', function(event, d) {
        setHoveredTask(d.id);
        d3.select(this).attr('opacity', 0.8);
      })
      .on('mouseout', function(event, d) {
        setHoveredTask(null);
        d3.select(this).attr('opacity', 1);
      })
      .call(d3.drag<SVGRectElement, Task>()
        .on('start', function(event, d) {
          d3.select(this).raise().classed('active', true);
        })
        .on('drag', function(event, d) {
          const newX = Math.max(0, Math.min(chartWidth, event.x));
          const newDate = xScale.invert(newX);
          const duration = d.endDate.getTime() - d.startDate.getTime();
         
          d3.select(this)
            .attr('x', newX)
            .attr('width', Math.max(10, xScale(new Date(newDate.getTime() + duration)) - newX));
        })
        .on('end', function(event, d) {
          d3.select(this).classed('active', false);
          const newX = Math.max(0, Math.min(chartWidth, event.x));
          const newStartDate = xScale.invert(newX);
          const duration = d.endDate.getTime() - d.startDate.getTime();
          const newEndDate = new Date(newStartDate.getTime() + duration);
         
          onTaskUpdate(d.id, {
            startDate: newStartDate,
            endDate: newEndDate
          });
        })
      );
   
    // Add progress bars
    bars.append('rect')
      .attr('x', d => xScale(d.startDate))
      .attr('y', d => yScale(d.id)! + yScale.bandwidth() * 0.7)
      .attr('width', d => (xScale(d.endDate) - xScale(d.startDate)) * (d.progress / 100))
      .attr('height', yScale.bandwidth() * 0.3)
      .attr('fill', '#1f2937')
      .attr('opacity', 0.3)
      .attr('rx', 2);
   
    // Add task labels
    bars.append('text')
      .attr('x', d => xScale(d.startDate) + 5)
      .attr('y', d => yScale(d.id)! + yScale.bandwidth() / 2)
      .attr('dy', '0.35em')
      .text(d => d.title)
      .attr('fill', '#1f2937')
      .attr('font-size', '12px')
      .attr('font-weight', 'bold')
      .style('pointer-events', 'none');
   
    // Add dependencies
    const dependencies = tasks.filter(t => t.dependencies && t.dependencies.length > 0);
    const lineGenerator = d3.line<[number, number]>()
      .x(d => d[0])
      .y(d => d[1])
      .curve(d3.curveMonotoneX);
   
    dependencies.forEach(task => {
      task.dependencies?.forEach(depId => {
        const depTask = tasks.find(t => t.id === depId);
        if (depTask) {
          const startX = xScale(depTask.endDate);
          const startY = yScale(depTask.id)! + yScale.bandwidth() / 2;
          const endX = xScale(task.startDate);
          const endY = yScale(task.id)! + yScale.bandwidth() / 2;
         
          const points: [number, number][] = [
            [startX, startY],
            [startX + 10, startY],
            [endX - 10, endY],
            [endX, endY]
          ];
         
          g.append('path')
            .datum(points)
            .attr('d', lineGenerator)
            .attr('fill', 'none')
            .attr('stroke', '#6b7280')
            .attr('stroke-width', 2)
            .attr('stroke-dasharray', '5,5')
            .attr('marker-end', 'url(#arrowhead)');
        }
      });
    });
   
    // Add arrow marker
    svg.append('defs')
      .append('marker')
      .attr('id', 'arrowhead')
      .attr('viewBox', '0 0 10 10')
      .attr('refX', 8)
      .attr('refY', 3)
      .attr('markerWidth', 6)
      .attr('markerHeight', 6)
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M0,0 L0,6 L9,3 z')
      .attr('fill', '#6b7280');
   
  }, [tasks, width, height, onTaskUpdate]);
 
  return (
    <div className="relative">
      <svg ref={svgRef} width={width} height={height} />
      {hoveredTask && (
        <TaskTooltip
          task={tasks.find(t => t.id === hoveredTask)!}
          onClose={() => setHoveredTask(null)}
        />
      )}
    </div>
  );
};

const TaskTooltip: React.FC<{ task: Task; onClose: () => void }> = ({ task, onClose }) => {
  return (
    <div className="absolute top-4 right-4 bg-white p-4 rounded-lg shadow-lg border z-10">
      <div className="flex justify-between items-start mb-2">
        <h4 className="font-semibold">{task.title}</h4>
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
          ×
        </button>
      </div>
      <p className="text-sm text-gray-600 mb-2">{task.description}</p>
      <div className="space-y-1 text-sm">
        <div>Status: <span className="font-medium">{task.status}</span></div>
        <div>Progress: <span className="font-medium">{task.progress}%</span></div>
        <div>Assignee: <span className="font-medium">{task.assignee}</span></div>
        <div>Due: <span className="font-medium">{format(task.endDate, 'MMM d, yyyy')}</span></div>
      </div>
    </div>
  );
};

export default GanttChart;

3. Real-time Collaboration with WebSockets

// hooks/useCollaboration.ts
import { useState, useEffect, useCallback } from 'react';
import { io, Socket } from 'socket.io-client';
import { useAuthStore } from '../store/authStore';

interface CollaborationEvent {
  type: 'cursor' | 'selection' | 'edit' | 'comment';
  userId: string;
  username: string;
  data: any;
  timestamp: Date;
}

interface UserPresence {
  userId: string;
  username: string;
  color: string;
  cursor?: { x: number; y: number };
  selection?: { start: number; end: number };
  lastSeen: Date;
}

export const useCollaboration = (projectId: string) => {
  const [socket, setSocket] = useState<Socket | null>(null);
  const [users, setUsers] = useState<UserPresence[]>([]);
  const [events, setEvents] = useState<CollaborationEvent[]>([]);
  const { user } = useAuthStore();
 
  useEffect(() => {
    if (!user) return;
   
    const newSocket = io('/collaboration', {
      query: { projectId, userId: user.id, username: user.name }
    });
   
    setSocket(newSocket);
   
    // Handle user presence updates
    newSocket.on('user-joined', (userData: UserPresence) => {
      setUsers(prev => [...prev.filter(u => u.userId !== userData.userId), userData]);
    });
   
    newSocket.on('user-left', (userId: string) => {
      setUsers(prev => prev.filter(u => u.userId !== userId));
    });
   
    newSocket.on('users-list', (usersList: UserPresence[]) => {
      setUsers(usersList);
    });
   
    // Handle collaboration events
    newSocket.on('collaboration-event', (event: CollaborationEvent) => {
      if (event.userId !== user.id) {
        setEvents(prev => [...prev.slice(-99), event]); // Keep last 100 events
        handleCollaborationEvent(event);
      }
    });
   
    return () => {
      newSocket.disconnect();
    };
  }, [user, projectId]);
 
  const handleCollaborationEvent = useCallback((event: CollaborationEvent) => {
    switch (event.type) {
      case 'cursor':
        setUsers(prev => prev.map(u =>
          u.userId === event.userId
            ? { ...u, cursor: event.data.cursor }
            : u
        ));
        break;
       
      case 'selection':
        setUsers(prev => prev.map(u =>
          u.userId === event.userId
            ? { ...u, selection: event.data.selection }
            : u
        ));
        break;
       
      case 'edit':
        // Handle real-time text editing
        handleRealtimeEdit(event);
        break;
       
      case 'comment':
        // Handle new comments
        handleNewComment(event);
        break;
    }
  }, []);
 
  const handleRealtimeEdit = useCallback((event: CollaborationEvent) => {
    // Implement operational transformation for concurrent editing
    const { operation, position, content } = event.data;
   
    // Apply the edit to the current document state
    // This would integrate with your text editor (e.g., Monaco, CodeMirror)
    console.log('Applying edit:', operation, position, content);
  }, []);
 
  const handleNewComment = useCallback((event: CollaborationEvent) => {
    // Handle new comments in real-time
    const { comment, position } = event.data;
   
    // Update the comments state or trigger a refetch
    console.log('New comment:', comment, position);
  }, []);
 
  const broadcastEvent = useCallback((event: Omit<CollaborationEvent, 'userId' | 'username' | 'timestamp'>) => {
    if (socket && user) {
      socket.emit('collaboration-event', {
        ...event,
        userId: user.id,
        username: user.name,
        timestamp: new Date()
      });
    }
  }, [socket, user]);
 
  const updateCursor = useCallback((x: number, y: number) => {
    broadcastEvent({
      type: 'cursor',
      data: { cursor: { x, y } }
    });
  }, [broadcastEvent]);
 
  const updateSelection = useCallback((start: number, end: number) => {
    broadcastEvent({
      type: 'selection',
      data: { selection: { start, end } }
    });
  }, [broadcastEvent]);
 
  const sendEdit = useCallback((operation: string, position: number, content: string) => {
    broadcastEvent({
      type: 'edit',
      data: { operation, position, content }
    });
  }, [broadcastEvent]);
 
  const sendComment = useCallback((comment: string, position: { x: number; y: number }) => {
    broadcastEvent({
      type: 'comment',
      data: { comment, position }
    });
  }, [broadcastEvent]);
 
  return {
    users,
    events,
    updateCursor,
    updateSelection,
    sendEdit,
    sendComment,
    isConnected: socket?.connected || false
  };
};

4. Collaborative Text Editor Component

// hooks/useCollaboration.ts
import { useState, useEffect, useCallback } from 'react';
import { io, Socket } from 'socket.io-client';
import { useAuthStore } from '../store/authStore';

interface CollaborationEvent {
  type: 'cursor' | 'selection' | 'edit' | 'comment';
  userId: string;
  username: string;
  data: any;
  timestamp: Date;
}

interface UserPresence {
  userId: string;
  username: string;
  color: string;
  cursor?: { x: number; y: number };
  selection?: { start: number; end: number };
  lastSeen: Date;
}

export const useCollaboration = (projectId: string) => {
  const [socket, setSocket] = useState<Socket | null>(null);
  const [users, setUsers] = useState<UserPresence[]>([]);
  const [events, setEvents] = useState<CollaborationEvent[]>([]);
  const { user } = useAuthStore();
 
  useEffect(() => {
    if (!user) return;
   
    const newSocket = io('/collaboration', {
      query: { projectId, userId: user.id, username: user.name }
    });
   
    setSocket(newSocket);
   
    // Handle user presence updates
    newSocket.on('user-joined', (userData: UserPresence) => {
      setUsers(prev => [...prev.filter(u => u.userId !== userData.userId), userData]);
    });
   
    newSocket.on('user-left', (userId: string) => {
      setUsers(prev => prev.filter(u => u.userId !== userId));
    });
   
    newSocket.on('users-list', (usersList: UserPresence[]) => {
      setUsers(usersList);
    });
   
    // Handle collaboration events
    newSocket.on('collaboration-event', (event: CollaborationEvent) => {
      if (event.userId !== user.id) {
        setEvents(prev => [...prev.slice(-99), event]); // Keep last 100 events
        handleCollaborationEvent(event);
      }
    });
   
    return () => {
      newSocket.disconnect();
    };
  }, [user, projectId]);
 
  const handleCollaborationEvent = useCallback((event: CollaborationEvent) => {
    switch (event.type) {
      case 'cursor':
        setUsers(prev => prev.map(u =>
          u.userId === event.userId
            ? { ...u, cursor: event.data.cursor }
            : u
        ));
        break;
       
      case 'selection':
        setUsers(prev => prev.map(u =>
          u.userId === event.userId
            ? { ...u, selection: event.data.selection }
            : u
        ));
        break;
       
      case 'edit':
        // Handle real-time text editing
        handleRealtimeEdit(event);
        break;
       
      case 'comment':
        // Handle new comments
        handleNewComment(event);
        break;
    }
  }, []);
 
  const handleRealtimeEdit = useCallback((event: CollaborationEvent) => {
    // Implement operational transformation for concurrent editing
    const { operation, position, content } = event.data;
   
    // Apply the edit to the current document state
    // This would integrate with your text editor (e.g., Monaco, CodeMirror)
    console.log('Applying edit:', operation, position, content);
  }, []);
 
  const handleNewComment = useCallback((event: CollaborationEvent) => {
    // Handle new comments in real-time
    const { comment, position } = event.data;
   
    // Update the comments state or trigger a refetch
    console.log('New comment:', comment, position);
  }, []);
 
  const broadcastEvent = useCallback((event: Omit<CollaborationEvent, 'userId' | 'username' | 'timestamp'>) => {
    if (socket && user) {
      socket.emit('collaboration-event', {
        ...event,
        userId: user.id,
        username: user.name,
        timestamp: new Date()
      });
    }
  }, [socket, user]);
 
  const updateCursor = useCallback((x: number, y: number) => {
    broadcastEvent({
      type: 'cursor',
      data: { cursor: { x, y } }
    });
  }, [broadcastEvent]);
 
  const updateSelection = useCallback((start: number, end: number) => {
    broadcastEvent({
      type: 'selection',
      data: { selection: { start, end } }
    });
  }, [broadcastEvent]);
 
  const sendEdit = useCallback((operation: string, position: number, content: string) => {
    broadcastEvent({
      type: 'edit',
      data: { operation, position, content }
    });
  }, [broadcastEvent]);
 
  const sendComment = useCallback((comment: string, position: { x: number; y: number }) => {
    broadcastEvent({
      type: 'comment',
      data: { comment, position }
    });
  }, [broadcastEvent]);
 
  return {
    users,
    events,
    updateCursor,
    updateSelection,
    sendEdit,
    sendComment,
    isConnected: socket?.connected || false
  };
};eDebounce } from '../hooks/useDebounce';

interface CollaborativeEditorProps {
  projectId: string;
  documentId: string;
  initialContent: string;
  onContentChange: (content: string) => void;
}

const CollaborativeEditor: React.FC<CollaborativeEditorProps> = ({
  projectId,
  documentId,
  initialContent,
  onContentChange
}) => {
  const editorRef = useRef<any>(null);
  const [content, setContent] = useState(initialContent);
  const [cursors, setCursors] = useState<Map<string, any>>(new Map());
 
  const { users, updateCursor, updateSelection, sendEdit, isConnected } = useCollaboration(projectId);
 
  const debouncedContent = useDebounce(content, 300);
 
  useEffect(() => {
    if (debouncedContent !== initialContent) {
      onContentChange(debouncedContent);
    }
  }, [debouncedContent, initialContent, onContentChange]);
 
  const handleEditorDidMount = (editor: any, monaco: any) => {
    editorRef.current = editor;
   
    // Track cursor position
    editor.onDidChangeCursorPosition((e: any) => {
      const position = e.position;
      const { lineNumber, column } = position;
      updateCursor(lineNumber, column);
    });
   
    // Track selection changes
    editor.onDidChangeCursorSelection((e: any) => {
      const selection = e.selection;
      updateSelection(selection.startLineNumber, selection.endLineNumber);
    });
   
    // Handle content changes
    editor.onDidChangeModelContent((e: any) => {
      const newContent = editor.getValue();
      setContent(newContent);
     
      // Broadcast changes to other users
      e.changes.forEach((change: any) => {
        sendEdit('replace', change.rangeOffset, change.text);
      });
    });
  };
 
  // Render user cursors
  useEffect(() => {
    if (!editorRef.current) return;
   
    const editor = editorRef.current;
    const newCursors = new Map();
   
    users.forEach(user => {
      if (user.cursor) {
        const decoration = {
          range: {
            startLineNumber: user.cursor.x,
            startColumn: user.cursor.y,
            endLineNumber: user.cursor.x,
            endColumn: user.cursor.y + 1
          },
          options: {
            className: 'user-cursor',
            glyphMarginClassName: 'user-cursor-glyph',
            stickiness: 1,
            after: {
              content: user.username,
              inlineClassName: 'user-cursor-label',
              color: user.color
            }
          }
        };
       
        newCursors.set(user.userId, decoration);
      }
    });
   
    // Update decorations
    const decorationIds = Array.from(cursors.values());
    const newDecorationIds = editor.deltaDecorations(decorationIds, Array.from(newCursors.values()));
   
    setCursors(newCursors);
  }, [users]);
 
  return (
    <div className="relative h-full">
      {/* Connection Status */}
      <div className="absolute top-4 right-4 z-10 flex items-center space-x-2">
        <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
        <span className="text-sm text-gray-600">
          {isConnected ? 'Connected' : 'Disconnected'}
        </span>
      </div>
     
      {/* Active Users */}
      <div className="absolute top-4 left-4 z-10 flex items-center space-x-2">
        <span className="text-sm text-gray-600">Active users:</span>
        {users.map(user => (
          <div
            key={user.userId}
            className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-semibold"
            style={{ backgroundColor: user.color }}
            title={user.username}
          >
            {user.username.charAt(0).toUpperCase()}
          </div>
        ))}
      </div>
     
      {/* Monaco Editor */}
      <Editor
        height="100%"
        defaultLanguage="markdown"
        value={content}
        onMount={handleEditorDidMount}
        options={{
          theme: 'vs-dark',
          fontSize: 14,
          wordWrap: 'on',
          minimap: { enabled: false },
          scrollBeyondLastLine: false,
          automaticLayout: true,
        }}
      />
     
      {/* Custom Styles */}
      <style jsx>{`
        .user-cursor {
          border-left: 2px solid;
          animation: blink 1s infinite;
        }
       
        .user-cursor-label {
          background: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 2px 4px;
          border-radius: 2px;
          font-size: 10px;
          margin-left: 4px;
        }
       
        @keyframes blink {
          0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0; }
        }
      `}</style>
    </div>
  );
};

export default CollaborativeEditor;

Key Lessons Learned

  1. Real-time Collaboration: WebSockets enabled seamless real-time collaboration features
  2. Operational Transformation: Handling concurrent edits required careful conflict resolution
  3. Performance: D3.js integration required optimization for large datasets
  4. User Experience: Visual feedback for drag-and-drop operations improved usability
  5. State Synchronization: Keeping client and server state synchronized was crucial

Best Practices from Case Studies

1. Architecture Patterns

Layered Architecture

├── components/       # UI Components
├── hooks/            # Custom Hooks
├── store/            # State Management
├── api/              # API Layer
├── utils/            # Utility Functions
├── types/            # TypeScript Types
└── constants/        # Application Constants

Separation of Concerns

  • UI components focus only on presentation
  • Custom hooks handle business logic
  • API layer manages data fetching
  • Store manages application state

2. Performance Optimization

Code Splitting

// Route-based code splitting
const ProductCatalog = React.lazy(() => import('./components/ProductCatalog'));
const Dashboard = React.lazy(() => import('./components/Dashboard'));

// Component-based code splitting
const HeavyComponent = React.lazy(() => import('./components/HeavyComponent'));

Memoization

// Memoize expensive calculations
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(data);
}, [data]);

// Memoize components
const MemoizedComponent = React.memo(Component, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id;
});

3. Error Handling

Error Boundaries

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    // Log to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback error={this.state.error} />;
    }

    return this.props.children;
  }
}

4. Testing Strategy

Component Testing

// __tests__/ProductCard.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import ProductCard from '../components/ProductCard';

test('renders product information correctly', () => {
  const product = {
    id: '1',
    name: 'Test Product',
    price: 99.99,
    image: 'test.jpg'
  };
 
  render(<ProductCard product={product} />);
 
  expect(screen.getByText('Test Product')).toBeInTheDocument();
  expect(screen.getByText('$99.99')).toBeInTheDocument();
});

Integration Testing

// __tests__/ShoppingCart.integration.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ShoppingCart from '../components/ShoppingCart';

test('adds item to cart and updates total', async () => {
  const queryClient = new QueryClient();
 
  render(
    <QueryClientProvider client={queryClient}>
      <ShoppingCart />
    </QueryClientProvider>
  );
 
  fireEvent.click(screen.getByText('Add to Cart'));
 
  await waitFor(() => {
    expect(screen.getByText('Total: $99.99')).toBeInTheDocument();
  });
});

Conclusion

These case studies demonstrate how React’s ecosystem can be leveraged to build complex, real-world applications. Key takeaways include:

  1. Choose the right tools: Different projects require different libraries and patterns
  2. Plan for scale: Consider performance implications from the start
  3. Embrace TypeScript: Type safety becomes crucial in large applications
  4. Test extensively: Comprehensive testing prevents production issues
  5. Monitor performance: Use React DevTools and performance monitoring
  6. Plan for real-time features: WebSockets and optimistic updates enhance UX
  7. Design for collaboration: Modern applications often require multi-user features

The examples provided show production-ready patterns that can be adapted for your specific use cases. Remember that each project has unique requirements, so always evaluate and choose the most appropriate solutions for your context.

Related Articles

Related Posts

Scroll to Top