MakeItGrid | Bento Grid Generator

Empower your creativity with MakeItGrid, the best platform for crafting customizable bento grids.

📋 Table of Contents

1. ⚙️ Tech Stack
2. 🔋 Features
3. 🤸 Quick Start

⚙️ Tech Stack

🔋 Features

✨ Customizable Grids: Empower your creativity with MakeItGrid, the best platform for crafting customizable bento grids.

🖌️ Flexible Layouts: Create grid layouts with your chosen number of columns, rows, and gaps.

📱 Responsive Design: Seamlessly organize your grid layout for both mobile and desktop devices.

🎲 Random Grid Generator: Generate random layouts to experiment and discover new designs.

📄 Code Export: Copy the responsive code in two formats, Tailwind CSS and CSS Grid.

🔗 CodeSandbox Integration: Test the generated code directly in CodeSandbox for quick iterations.

🌗 Dark and Light Mode: Switch between dark and light modes for a comfortable user experience.

🌐 Cross-Device Compatibility: Responsive design ensures optimal use across mobile devices and platforms.

🚀 Quick Tour: Includes a quick guide to help you understand how the platform works, featuring a "Quick Tour" button.

🔎 SEO and Performance Optimization: The project is SEO-friendly and performs efficiently, validated with high scores on PageSpeed Insights for optimal user experience.

🖼️ Customizable Items: Personalize each grid item by adding and customizing images to make your grid truly unique.

📸 Download Grid as Image: Capture and download your entire grid layout as an image for easy sharing and integration into other projects.

Feel free to check out the performance score here and see how well the project performs!

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/kevinAcevedo240/make-it-grid-ai.git
cd make-it-grid-ai

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

💖 Support the Project

Thank you so much already for using my project! If you want to go a step further and support my open source work, buy me a coffe:

To support the project directly, feel free to contribute with a pull request!