Frontend Architecture

Frontend Architecture Overview

Blogify's frontend is built on Next.js 16 using the App Router architecture. This modern foundation provides a seamless blend of server-side performance and client-side interactivity, utilizing React 19 features, TypeScript for type safety, and Tailwind CSS for responsive styling.

App Router Structure

The application follows a modular directory structure within src/app, leveraging Next.js file-based routing to manage features:

• Public Routes: Landing page (/), About (/about), and Auth pages (/login, /signup).
• Protected Routes: Feed (/feed), Post Creation (/posts/new), Post Editing (/posts/[id]/edit), and Profile management.
• Dynamic Routes: Blog post details are handled via src/app/posts/[id], which uses a hybrid approach of server-side parameter handling and client-side rendering.

Core Architecture Patterns

1. Hybrid Rendering Component Pattern

To optimize performance and SEO, Blogify distinguishes between Server and Client components. Pages like PostPage utilize a wrapper pattern:

• Server Component (page.tsx): Handles initial parameter resolution and SEO metadata.
• Client Component (PostPageClient.tsx): Manages interactive states, user authentication checks, and data fetching hooks.

2. Layouts and Persistence

The root layout (src/app/layout.tsx) wraps the entire application, providing:

• UserContext Provider: Ensures user authentication state is available across all routes.
• Shared UI Elements: Consistent navigation and footer components.
• Theme Management: Dark mode support via Tailwind CSS utility classes.

State Management and Data Fetching

User Context

Global state for the authenticated user is managed via the UserContext. This allows components to reactively update when a user logs in or out without requiring manual prop drilling.

import { useUser } from '@/context/UserContext';

const { user, loading } = useUser();

API Interface Layer

All external communication is abstracted into src/lib/api.ts. This layer provides type-safe functions for:

• CRUD Operations: Fetching, creating, and deleting posts.
• Media Handling: Image uploads to Supabase Storage.
• User Profiles: Retrieving and updating author metadata.

Authentication Flow

Blogify implements a robust authentication system using Supabase Auth integrated with Next.js Route Handlers.

• Server-Side Proxy: Auth requests are routed through api/auth/login and api/auth/signup to securely handle credentials and sessions.
• Route Protection: The RequireAuth component is used to wrap protected pages, automatically redirecting unauthenticated users to the login screen with a returnTo parameter.

// Example of route protection
export default function ProtectedPage() {
  return (
    <RequireAuth>
      <YourComponent />
    </RequireAuth>
  );
}

Loading States and Error Handling

To provide a polished user experience, Blogify implements granular loading and error states:

• Skeletons: Components like PostCardSkeleton are displayed during data fetching in the feed to prevent layout shifts.
• Exponential Back-off: The login system includes a cooldown mechanism (10s to 300s) on failed attempts to prevent brute-force attacks.
• Error Boundaries: Each major view includes error handling to capture API failures, providing users with descriptive feedback and a "Retry" mechanism.

Content Rendering Engine

Blogify supports Markdown-driven content creation. The frontend utilizes a specialized rendering pipeline:

• React Markdown: Converts markdown strings into React components.
• Remark/Rehype Plugins: Supports advanced features like unwrapping images, mathematical equations (KaTeX), and syntax highlighting for code blocks.
• Responsive Typography: Custom Tailwind prose configurations ensure that long-form content remains readable across all device sizes.