StoryHub

Blog Management System

This project is a production-ready blog management web application designed to enable users and administrators to create, manage, and publish content at scale. The system includes a public user-facing section and a dedicated admin panel, with a strong focus on security, user experience, SEO, internationalization, and scalability.

Links

GitHub Demo

The front-end is built with Next.js and communicates with the backend via RESTful APIs. The application is designed for real-world, high-traffic environments and fully covers the requirements of a modern blog CMS.

The core focus of the project is on server-state management, coordination across multiple data sources, optimization of content-driven pages, server-side caching and revalidation, implementing multilingual support with RTL/LTR layouts, and maintaining system stability in complex, CRUD-heavy scenarios.

Technologies

Next.js 15.5.9React 19.1.0JavaScriptTailwind CSSnext-intlReact Hook FormYupTanStack QueryAxiosHeroiconsReact Hot ToastCloudinaryquery-stringclassnames

Features

User Management: User registration and authentication, JWT-based authentication with Refresh Token, Profile management and avatar upload, Post like and bookmark system, User list with search by name and email, Role-based access control (user, admin, super_admin), Only admin and super_admin can access the users page, Only super_admin can edit or delete users
Post Management: Create, edit, and delete posts, Cover image upload, Reading time calculation, Support for free and premium posts, Advanced search and filtering, SEO-friendly URLs based on dynamic slugs
Category Management: Category definition with Persian and English titles, Automatic slug generation, Structured content rendering by category
Comment System: User comment submission and display, Threaded replies, Admin moderation panel, Filter comments by status (pending, approved, rejected), Approve or reject comments directly from the dashboard
Admin Dashboard: Comprehensive dashboard with statistical cards, Role-aware dashboard content based on user permissions, Management of posts, users, categories, and comments, Display of recent activities and system changes
UI/UX & Performance: Fully responsive design, Dark / Light mode, Full multilingual support (Persian & English) with RTL/LTR layouts, Pagination and standardized loading & empty states, Toast notifications for user feedback, Lazy loading for improved page performance, Breadcrumb navigation across dashboard pages, Custom 404 page and global error boundary, Vazirmatn Persian font

My Role in Project

Front-End Developer & Architect (React / Next.js) Responsible for designing the front-end architecture, implementing the complete user interface, integrating backend APIs, managing server state, developing the admin dashboard, implementing route security, internationalization, optimizing performance, and ensuring a stable and consistent user experience. The backend was implemented by a backend developer, while my focus was entirely on the front-end, client-side architecture, and robust API interaction.

Challenges & Focus

Managing server state in highly interactivecontent-heavy pagesSynchronizing the admin dashboard with multiple APIsImplementing internationalization with full RTL and LTR supportPreventing unnecessary re-renders in large data listsMaintaining smooth UX during intensive CRUD operationsImplementing complex forms without performance degradationPreserving SEO while rendering dynamic content

Technical Decisions

TanStack Query for Server State Management

Instead of storing server data in local state, TanStack Query was used to enable automatic caching, eliminate redundant network requests, and handle loading and error states in a predictable and standardized manner.

Next.js for SEO & Content Rendering

Leveraging SSR, App Router, and routing capabilities of Next.js resulted in improved blog page SEO, faster initial content rendering, and better user experience on public-facing pages.

React Hook Form + Yup

Used for managing complex forms (post creation, editing, user settings) with minimal re-renders, extensible validation logic, and stable performance in large-scale forms.

Server-Side Caching & Revalidation

Server-side caching using unstable_cache with user-aware cache keys, tag-based revalidation using revalidateTag and revalidatePath, and coordination between Server Actions and React Query to keep data consistent after mutations.

Authentication & Route Protection

JWT authentication with Refresh Token rotation, Axios interceptor for automatic token refresh and request retry, and route protection using Next.js Middleware for authenticated and guest-only routes.

next-intl for internationalization (i18n)

Selected for its strong support for multilingual routing, locale management, and full compatibility with the App Router. The project structure was designed to enable seamless switching between Persian and English with RTL/LTR layouts across all pages.

Optimizations & Solutions

Separation of presentational and logical components
Memoization in post and comment lists to reduce re-renders
Async-safe state management for API interactions
Standardized loading, empty, and error states
Scalable component architecture designed for long-term maintainability
Multilingual support with next-intl and RTL/LTR management across all pages

Trade-offs & Engineering Considerations

React Query's complexity was intentionally accepted to ensure robust and standardized server-state management
Some UI interactions were simplified to preserve stability and code readability
Maintainability and scalability were prioritized over short-term implementation shortcuts

Outcome

This project demonstrates that my focus goes beyond building UI components—it centers on designing reliable front-end architectures for real-world systems. StoryHub provided hands-on experience in CMS development, advanced server-state management, and building complex admin dashboards, clearly showcasing my ability to deliver production-ready applications.

Back