{"id":21511447,"url":"https://github.com/sujoncoder/KodeZen_Task","last_synced_at":"2025-07-16T04:30:36.627Z","repository":{"id":264202037,"uuid":"890225216","full_name":"sujoncoder/KodeZen_Task","owner":"sujoncoder","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-23T06:36:23.000Z","size":110,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T15:46:01.216Z","etag":null,"topics":["array-move","react-icons","react-sortable-hoc","reactjs","tailwind-css","vitejs"],"latest_commit_sha":null,"homepage":"https://kode-zen-task.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sujoncoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-11-18T07:56:55.000Z","updated_at":"2024-11-24T11:09:45.000Z","dependencies_parsed_at":"2024-11-22T16:22:26.655Z","dependency_job_id":"e6a1cbb2-e88c-4f0b-baed-e5e4bbbdddb0","html_url":"https://github.com/sujoncoder/KodeZen_Task","commit_stats":null,"previous_names":["sujoncoder/kodezone_task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sujoncoder/KodeZen_Task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sujoncoder%2FKodeZen_Task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sujoncoder%2FKodeZen_Task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sujoncoder%2FKodeZen_Task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sujoncoder%2FKodeZen_Task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sujoncoder","download_url":"https://codeload.github.com/sujoncoder/KodeZen_Task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sujoncoder%2FKodeZen_Task/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265481711,"owners_count":23773939,"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":["array-move","react-icons","react-sortable-hoc","reactjs","tailwind-css","vitejs"],"created_at":"2024-11-23T22:08:57.818Z","updated_at":"2025-07-16T04:30:36.617Z","avatar_url":"https://github.com/sujoncoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Management Interface\n\nThis project is a simple **React-based color management interface** that allows users to manage a list of colors by performing various actions such as **adding**, **editing**, **duplicating**, **deleting**, and **reordering** colors.\n\n---\n![alt text](https://i.ibb.co.com/P5m3qdT/color-edit.png)\n\n### Links\n1. [Live Link](https://kode-zen-task.vercel.app/) - `https://kode-zen-task.vercel.app/`\n2. [Code Link](https://github.com/sujoncoder/KodeZen_Task) -`https://github.com/sujoncoder/KodeZen_Task`\n\n\n\n\n\n## Features\n\n- **Display Color List:** View a list of colors with their names and corresponding color values.\n- **Add Color:** Add a new color with a custom name and color value.\n- **Edit Color:** Modify the name and value of an existing color.\n- **Duplicate Color:** Create a copy of an existing color.\n- **Delete Color:** Remove a color from the list.\n- **Reorder Colors:** Drag and drop items to reorder the list.\n\n---\n\n## Tech Stack\n\n- **Frontend Framework:** React\n- **Styling:** TailwindCSS\n- **Dependencies:**  \n  - `react-sortable-hoc`: For draggable and sortable lists.  \n  - `array-move`: For managing reordering of items.  \n  - `react-icons`: For adding icons to the UI.  \n  - `react-color`: For a user-friendly color picker interface.\n\n---\n\n## Project Structure\n\n- **`app.jsx`:** The main application entry point integrating all components.\n- **`tabs.jsx`:** A tabbed navigation component for switching between different views or sections.\n- **`ColorsItems.jsx`:** The main component managing the color list and interactions.\n- **`SortableList.jsx`:** A reusable component for rendering the draggable list of colors.\n- **`ThreeDotMenu.jsx`:** A dropdown menu component for additional actions such as duplicate or delete.\n- **`EditModal.jsx`:** A modal component for editing or adding colors.\n\n---","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsujoncoder%2FKodeZen_Task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsujoncoder%2FKodeZen_Task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsujoncoder%2FKodeZen_Task/lists"}