Blog Card Component

A reusable, accessible blog card UI component built with Next.js 15, React 19, and TypeScript. This project showcases modern web development practices with a focus on accessibility, performance, and user experience.

Features

✨ Core Features

• Reusable Blog Card Component - Clean, modern design with image, title, summary, and author info
• Fully Responsive - Mobile-first design that works on all screen sizes
• Smooth Animations - Hover states and transitions with reduced motion support
• Mock API Integration - Uses Mock Service Worker (MSW) for realistic data fetching

♿ Accessibility

• WCAG 2.1 AA Compliant - Meets accessibility standards
• Keyboard Navigation - Full keyboard support with proper focus management
• Screen Reader Optimized - Semantic HTML with proper ARIA attributes
• High Contrast Support - Enhanced visibility for users with visual needs
• Reduced Motion - Respects user motion preferences

🎨 Design System

• BEM Methodology - Scalable CSS architecture
• CSS Modules - Scoped styling to prevent conflicts
• Design Tokens - Consistent colors, spacing, and typography
• Dark Mode Ready - Automatic dark mode support
• Custom Fallbacks - Graceful handling of missing images

Technologies Used

• Next.js 15 - React framework with App Router
• React 19 - Latest React features and optimizations
• TypeScript - Type-safe development
• Turbo Pack - Fast bundler for development
• Mock Service Worker - API mocking for development
• CSS Modules - Component-scoped styling

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd blog-card-app

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open http://localhost:3000 in your browser

Project Structure

src/
├── components/          # Reusable React components
│   ├── BlogCard.tsx    # Main blog card component
│   ├── BlogImage.tsx   # Optimized image component with fallbacks
│   └── AuthorInfo.tsx  # Author information component
├── hooks/              # Custom React hooks
│   └── useBlogPosts.ts # Data fetching hook
├── mocks/              # Mock Service Worker setup
│   ├── data.ts         # Mock blog post data
│   ├── handlers.ts     # API request handlers
│   └── browser.ts      # MSW browser setup
├── styles/             # Component styles (CSS Modules)
│   ├── BlogCard.module.css
│   ├── BlogImage.module.css
│   └── AuthorInfo.module.css
├── types/              # TypeScript type definitions
│   └── blog.ts         # Blog post and author interfaces
└── utils/              # Utility functions
    └── formatters.ts   # Date and text formatting utilities

Component Usage

BlogCard Component

import { BlogCard } from '@/components/BlogCard';

function MyBlogList({ posts }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {posts.map((post, index) => (
        <BlogCard
          key={post.id}
          post={post}
          priority={index < 3} // Optimize LCP for first 3 cards
          className="h-full"
        />
      ))}
    </div>
  );
}

Custom Hook Usage

import { useBlogPosts } from '@/hooks/useBlogPosts';

function BlogList() {
  const { posts, loading, error, refetch } = useBlogPosts({
    page: 1,
    limit: 9
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {posts.map(post => (
        <BlogCard key={post.id} post={post} />
      ))}
    </div>
  );
}

API Mock Data

The application uses Mock Service Worker to simulate API responses. Mock data includes:

• Realistic blog posts with varied content lengths
• Author information with avatars and bios
• Network delays to simulate real API behavior
• Error scenarios for robust testing

Performance Optimizations

• Image Optimization - Next.js Image component with lazy loading
• Priority Loading - LCP optimization for above-the-fold images
• Code Splitting - Automatic bundle optimization
• Responsive Images - Multiple breakpoints for optimal loading
• Prefetch Strategy - Smart resource loading

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile browsers (iOS Safari, Chrome Mobile)
• Keyboard navigation support
• Screen reader compatibility

Development Scripts

npm run dev          # Start development server with Turbo
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run lint:a11y    # Check accessibility compliance

Accessibility Testing

The components have been tested with:

• Keyboard Navigation - Tab, Enter, Space, Arrow keys
• Screen Readers - VoiceOver, NVDA, JAWS
• Automated Testing - ESLint jsx-a11y rules
• Manual Testing - Various user scenarios

Contributing

1. Follow the existing code style and patterns
2. Ensure all components are accessible
3. Add TypeScript types for new features
4. Test responsive behavior across devices
5. Update documentation for new features

License

This project is created for demonstration purposes and follows modern web development best practices.