{"id":27304214,"url":"https://github.com/ibrahimhiarea/image-edit-tool","last_synced_at":"2025-04-12T03:23:09.669Z","repository":{"id":287189066,"uuid":"963896337","full_name":"IbrahimHiarea/image-edit-tool","owner":"IbrahimHiarea","description":"📷 Next.js web app for managing images, categories, and annotations. Built with Material UI, React Query, React Konva, and React Window. Supports upload, filtering, and drawing tools.","archived":false,"fork":false,"pushed_at":"2025-04-10T12:54:42.000Z","size":3045,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T12:55:05.792Z","etag":null,"topics":["image-annotation","material-ui","nextjs","react-konva","react-query","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IbrahimHiarea.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-10T11:29:34.000Z","updated_at":"2025-04-10T12:54:46.000Z","dependencies_parsed_at":"2025-04-10T13:06:11.509Z","dependency_job_id":null,"html_url":"https://github.com/IbrahimHiarea/image-edit-tool","commit_stats":null,"previous_names":["ibrahimhiarea/image-edit-tool"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimHiarea%2Fimage-edit-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimHiarea%2Fimage-edit-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimHiarea%2Fimage-edit-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimHiarea%2Fimage-edit-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IbrahimHiarea","download_url":"https://codeload.github.com/IbrahimHiarea/image-edit-tool/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248510784,"owners_count":21116274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-annotation","material-ui","nextjs","react-konva","react-query","typescript"],"created_at":"2025-04-12T03:23:09.030Z","updated_at":"2025-04-12T03:23:09.662Z","avatar_url":"https://github.com/IbrahimHiarea.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🖼️ Image Annotation App\n\nA full-featured image management and annotation application built with **Next.js App Router**, **Material UI**, **React Query**, and **React Konva**. Users can upload, view, and delete images, manage categories, filter images by metadata, and annotate images using drawing tools.\n\n## 🚀 Features\n\n- 📁 **Image Management**\n\n  - Upload (simulated)\n  - View gallery with details\n  - Delete with confirmation\n\n- 🏷️ **Category Management**\n\n  - CRUD for image categories\n\n- 🔍 **Filtering**\n\n  - Filter images by name, metadata, and category\n\n- 🖊️ **Image Annotation**\n\n  - Draw rectangles using React Konva\n  - Select annotation colors\n  - Save, view, and delete annotations\n\n- ⚙️ **Tech Stack**\n  - Next.js (App Router)\n  - Material UI\n  - React Query\n  - React Konva\n\n## 📸 Screenshots\n\n_(Include screenshots here if available)_\n\n## 📦 Getting Started\n\n### Prerequisites\n\n- Node.js ≥ 18\n- npm or yarn\n\n### Installation\n\n```bash\ngit clone https://github.com/yourusername/image-annotation-app.git\nnpm install\n```\n\n### Run the App\n\n```bash\nnpm run dev\n```\n\nApp will be available at `http://localhost:3000`.\n\n## 🌐 API\n\nUsing a [JSON Placeholder API](https://my-json-server.typicode.com/MostafaKMilly/demo). Data is **not persistent**, so API responses are simulated as needed.\n\n## 🧪 Simulated API Endpoints\n\n- `GET /categories`, `POST /categories`, `PUT /categories/:id`, `DELETE /categories/:id`\n- `GET /images`, `POST /images`, `PUT /images/:id`, `DELETE /images/:id`\n- `GET /annotations`, `POST /annotations`, `PUT /annotations/:id`, `DELETE /annotations/:id`\n- `GET /images/:imageId/annotations`\n\n## 📁 Project Structure\n\n```\n/\n├─ app/\n│  ├─ images/\n│  ├─ categories/\n│  ├─ annotations/\n├─ components/\n├─ hooks/\n├─ utils/\n├─ services/\n├─ styles/\n└─ public/\n```\n\n## 💡 Notes\n\n- This app simulates image uploads and annotations—no actual backend file storage.\n- All image metadata, categories, and annotations are mocked or persisted temporarily in local state or cache.\n\n## 📋 Assignment Scope\n\nThis project was built as part of a frontend technical test. See [Technical Test PDF](./Technical%20Test%20Assignment%202.pdf) for full details.\n\n## 🧠 Topics\n\n```\nnextjs\nreact\nmaterial-ui\nreact-query\nreact-konva\nimage-annotation\nfrontend-assignment\nimage-gallery\nimage-upload\ncategories\nannotations\n```\n\n## 📫 Contact\n\nFeel free to reach out for any questions or improvements!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibrahimhiarea%2Fimage-edit-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fibrahimhiarea%2Fimage-edit-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibrahimhiarea%2Fimage-edit-tool/lists"}