Overview
PlanMyGrid is a visual planning tool for Instagram content creators and social media managers. It allows users to preview their feed layout, schedule posts, and automate publishing workflows. The product needed to handle media processing, third-party API integrations, and provide a responsive drag-and-drop interface for content arrangement.
My Role
I built the frontend application including the grid preview system, drag-and-drop functionality, and scheduling interface. On the backend, I implemented the media processing pipeline, the scheduling engine, and integrations with Instagram's API and third-party automation tools.
Architecture
The frontend uses React with a canvas-based grid renderer for smooth drag-and-drop performance. Media uploads go through a processing pipeline that generates thumbnails, extracts metadata, and optimizes images for different contexts. The scheduling system uses a job queue with Redis for reliable execution, with the scheduler running as a separate worker process. Instagram API integration required careful handling of rate limits and authentication token refresh flows.
Hard Problems
- Building a responsive drag-and-drop grid that felt native while handling large image sets without performance degradation.
- Designing a scheduling system that could handle timezone complexities and daylight saving transitions correctly.
- Working within Instagram's API limitations — rate limits, changing endpoints, and authentication requirements.
- Processing user-uploaded media reliably across different formats, sizes, and quality levels.
What I'd Improve
The grid renderer works well but repaints more than necessary during drag operations. A virtual rendering approach would improve performance for users with large media libraries. The scheduling worker is also a single point of failure — I'd add redundancy and better failure recovery for production reliability.