Component System

The Blogify component system is built using Next.js 15, React 19, and Tailwind CSS. It follows a modular architecture where UI elements are abstracted into reusable components to maintain visual consistency across the feed, profile, and post pages.

UI Architecture

Components are organized by their responsibility:

• Global Components: Navigation and layout wrappers.
• Content Components: Specialized views for rendering blog data (e.g., PostCard).
• Interactive Components: Author-specific actions and form elements.
• Feedback Components: Skeletons and pagination for data loading states.

Core Components

PostCard

The primary component for displaying blog summaries in the feed. It handles the display of featured images, tags, metadata, and author information.

Usage:

import { PostCard } from '@/components';

<PostCard 
  post={postData} 
  authorName="John Doe" 
/>

PostCardSkeleton

A placeholder component used during the loading state of the feed. It mirrors the layout of PostCard using Tailwind’s animate-pulse class to provide a smooth user experience.

Sidebar

Displayed on the feed and dashboard pages. It provides quick navigation, category filters (tags), and primary calls to action like "New Post."

Authorization & Security

RequireAuth

A higher-order component (HOC) used to protect client-side routes and components. It checks the session via the UserContext and redirects unauthenticated users to the login page or displays a fallback.

Usage:

import { RequireAuth } from '@/components';

export default function ProtectedPage() {
  return (
    <RequireAuth>
      <AdminDashboard />
    </RequireAuth>
  );
}

Post Management

Action Buttons

Blogify utilizes specialized buttons that contain built-in authorization logic. These buttons only render or become active if the current authenticated user matches the author_id of the post.

• EditPostButton: Redirects the user to the post editor.
• DeletePostButton: Triggers a deletion sequence via the API with a confirmation prompt.

Usage in Post Headers:

<div className="flex gap-2">
  <EditPostButton postId={post.id} authorId={post.user_id} />
  <DeletePostButton postId={post.id} authorId={post.user_id} />
</div>

Navigation & Data Flow

Pagination

A stateless component used to navigate through large collections of blog posts. It calculates page ranges based on total post counts and current URL search parameters.

| Prop | Type | Description | | :--- | :--- | :--- | | currentPage | number | The current active page index. | | totalPages | number | Total number of pages calculated from the API count. |

Markdown Renderer

Used within the PostPageContent, this component leverages react-markdown to transform raw string data from the backend into formatted HTML. It supports:

• GitHub Flavored Markdown: Tables, lists, and task lists.
• Math Equations: Rendered via rehype-katex.
• Image Unwrapping: Ensures images are not wrapped in <p> tags for better styling control.

Design Patterns

Responsive Design

All components are built using a mobile-first approach. For example, the Feed layout uses a single-column grid on mobile (grid-cols-1) and expands to a three-column layout with a sticky sidebar on desktop (lg:grid-cols-3).

Dark Mode

Components utilize Tailwind's dark: variant. Colors are mapped to the slate palette for light mode and slate-900/800 for dark mode to ensure high contrast and readability.