Loading
Next.js 16React 19TanStack QueryTanStack TableEditor.jsTailwind CSS v4
Cinema Bartar Enterprise CMS
A robust publication and project management platform built to centralize multi-author editorial workflows, media lifecycle tracking, and calendar scheduling. It powers virtualized data tables, interactive Kanban boards, and dual block-based content editors.
Project Info
RoleFrontend Architecture Specialist
Timeline3 Months
Core Tech
Next.js 16React 19TanStack QueryTanStack TableEditor.jsTailwind CSS v4
The Challenge
Maintaining responsive 60 FPS interactions when rendering data tables with thousands of records, alongside dual rich-text engines and complex Jalali-to-Gregorian calendar calculations.
The Solution
Implemented row virtualization with TanStack Table, scoped state stores with Zustand, and established an asynchronous layout structure with Next.js App Router and Tailwind CSS v4.
Virtualized High-Capacity Data Grids (TanStack Table)
Interactive Drag-and-Drop Task Pipelines (@dnd-kit)
Hybrid Block Editor Integration (Editor.js & CKEditor 5)
Dual Jalali/Gregorian Bi-directional Date Orchestration
System Architecture & Data Flow
Data Access01
TanStack Query Engine
Handles optimistic mutations, background polling, and cache invalidation.
View Virtualization02
Virtual Table Adapter
Renders only visible window rows to eliminate scrolling stutter.
Document Core03
Editor.js Modular Blocks
Preserves atomic, clean JSON data for flexible multi-channel syndication.
Key Impact & Outcomes
- DOM Node Footprint
- -75%
- Editorial Throughput
- 40% Gain
- Query Latency
- < 80ms
Measured via Chrome DevTools DOM counter across 10,000 active records.
Streamlined task pipelines and reduced context-switching across editorial desks.
Aggressive TanStack Query client caching prevented duplicate network roundtrips.
Performance Benchmarks (Before vs. After)
Initial Table Render Time-90%
Before1,850ms
After180ms
Memory Usage During Editing-60%
Before145 MB
After58 MB
Interaction to Next Paint (INP)-87%
Before280ms
After35ms
Engineering Decisions & Trade-offs
TanStack Table Virtualization over native HTML table markup
Large editorial desks required continuous bulk actions across hundreds of records without disruptive page reloads.
Block-based JSON Editor (Editor.js) over standard HTML string output
Structured JSON outputs enabled frictionless cross-platform syndication to mobile apps and external APIs.
Interface Showcase
Interactive inspection of high-fidelity views
cinemabartar.ir
Click to expand
