https://github.com/veyricdev/gridslicer
gridslicer
https://github.com/veyricdev/gridslicer
Last synced: 20 days ago
JSON representation
gridslicer
- Host: GitHub
- URL: https://github.com/veyricdev/gridslicer
- Owner: veyricdev
- Created: 2026-04-11T09:52:54.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-11T10:23:00.000Z (2 months ago)
- Last Synced: 2026-04-11T12:11:13.781Z (2 months ago)
- Language: TypeScript
- Homepage: https://gridslicer.vercel.app
- Size: 84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🪓 GridSlicer
**GridSlicer** là một công cụ web hiện đại, mạnh mẽ giúp bạn cắt ảnh thành các lưới (2x2, 3x3, 4x4...) một cách nhanh chóng và chính xác. Hoàn hảo cho việc tạo ảnh ghép Instagram, tài nguyên game, hoặc bất kỳ mục đích nào cần chia nhỏ hình ảnh.
## ✨ Tính năng nổi bật
- **Tải ảnh đa dạng**: Hỗ trợ các định dạng phổ biến như PNG, JPG, và WEBP.
- **Cắt tỉa linh hoạt**: Cho phép điều chỉnh lề (tóp, bottom, left, right) bằng pixel trước khi thực hiện chia lưới.
- **Tùy chọn lưới**: Hỗ trợ nhiều cấu hình lưới từ 2x2 đến 8x8.
- **Xem trước thời gian thực**: Hiển thị lưới đè lên ảnh gốc để bạn dễ dàng căn chỉnh.
- **Tải xuống hàng loạt**: Tự động nén tất cả các thành phần đã cắt vào một tệp ZIP duy nhất.
- **Giao diện hiện đại**: Trải nghiệm mượt mà với hiệu ứng chuyển động sống động và thiết kế tối giản (Glassmorphism).
## 🚀 Công nghệ sử dụng
- **Frontend**: React 19, Vite 6, Tailwind CSS 4, Framer Motion (Motion).
- **Backend**: Express.js (Node.js).
- **Xử lý ảnh**: [Sharp](https://sharp.pixelplumbing.com/) - thư viện xử lý ảnh hiệu suất cao.
- **UI Components**: Shadcn UI, Lucide Icons.
## 🛠️ Hướng dẫn cài đặt
### Yêu cầu hệ thống
- Node.js >= 22.x
- pnpm (khuyến nghị)
### Các bước thực hiện
1. **Cài đặt dependencies:**
```bash
pnpm install
```
2. **Chạy ở chế độ phát triển (Development):**
```bash
pnpm dev
```
Ứng dụng sẽ chạy tại `http://localhost:3000`.
3. **Xây dựng cho sản xuất (Production):**
```bash
pnpm build
pnpm start
```
## 🌐 Triển khai (Deployment)
Dự án đã được cấu hình sẵn để triển khai dễ dàng trên **Vercel**. Chỉ cần kết nối repository của bạn và Vercel sẽ tự động nhận diện cấu hình trong `vercel.json`.
---
*Phát triển bởi Đội ngũ GridSlicer — 2026*