IG Grid Maker

IG Grid Maker is an advanced, privacy-first web application designed specifically for Instagram creators. It empowers users to seamlessly slice high-resolution photos into standard 1080x1350 (4:5) Instagram Portrait dimensions natively in their browser.

Features

• Single Image Splitter: Upload massive panoramas or full-body portraits.
• Fluid Grid Matrices: Unchained grid slicing. Produce standard 3x3 giant profile feeds, or output 5x1 seamless Instagram carousels.
• Persistent Local Projects: Utilizing IndexedDB, your full-resolution original and exact crop boundaries are saved so you can close your browser and resume seamlessly.
• Client-side Compression: Native edge compression mechanisms process image bloating perfectly without sending private images to any backend servers.
• Export to ZIP: Get perfect segments mathematically calculated sequentially ready for immediate uploading to Instagram.

Tech Stack

• Framework: Next.js 15 (App Router)
• UI/Styling: Tailwind CSS v4
• State Management / Storage: React Context + localForage
• Image Processing: Canvas API & browser-image-compression
• Cropper: react-easy-crop
• Icons: lucide-react

Getting Started

1. Clone the repository (if you haven't already):

   git clone https://github.com/yourusername/gridtagram.git
   cd gridtagram

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

SEO & Deployment

This project natively uses Next.js Metadata API. If you deploy this (for instance, on Vercel):

1. Head over to src/app/layout.tsx and change const DOMAIN = "https://gridmaker-placeholder.com"; to your live domain.
2. Replace public/og-image.jpg with a banner of your web application for rich-links on Twitter, Discord, and iMessage.
3. The sitemap.xml and robots.txt will automatically generate endpoints matching your configuration.

License

This project is open-source and available under the MIT License.