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/loginandapi/auth/signupto securely handle credentials and sessions. - Route Protection: The
RequireAuthcomponent is used to wrap protected pages, automatically redirecting unauthenticated users to the login screen with areturnToparameter.
// 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
PostCardSkeletonare 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
proseconfigurations ensure that long-form content remains readable across all device sizes.