{"id":23223908,"url":"https://github.com/sutharjay1/draw-img","last_synced_at":"2026-04-11T11:32:33.423Z","repository":{"id":267862169,"uuid":"902589412","full_name":"sutharjay1/draw-img","owner":"sutharjay1","description":"Draw-Img is a feature-rich web application designed to facilitate image editing and drawing with a focus on simplicity and accessibility","archived":false,"fork":false,"pushed_at":"2024-12-13T10:09:47.000Z","size":86,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T04:24:56.137Z","etag":null,"topics":["cloudinary","react-canvas-draw","react-router","reactjs","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"https://draw-img.vercel.app/","language":"TypeScript","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/sutharjay1.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-12-12T21:40:37.000Z","updated_at":"2024-12-13T10:13:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"dcefeb14-7737-4426-89bc-ccac37166fe2","html_url":"https://github.com/sutharjay1/draw-img","commit_stats":null,"previous_names":["sutharjay1/draw-img"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sutharjay1/draw-img","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutharjay1%2Fdraw-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutharjay1%2Fdraw-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutharjay1%2Fdraw-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutharjay1%2Fdraw-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sutharjay1","download_url":"https://codeload.github.com/sutharjay1/draw-img/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutharjay1%2Fdraw-img/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31679477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cloudinary","react-canvas-draw","react-router","reactjs","typescript","vite","zustand"],"created_at":"2024-12-18T23:19:54.700Z","updated_at":"2026-04-11T11:32:33.403Z","avatar_url":"https://github.com/sutharjay1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draw-Img\n\nDraw-Img is a feature-rich web application designed to facilitate image editing and drawing with a focus on simplicity and accessibility. This project leverages React, TypeScript, and Tailwind CSS to deliver an interactive user experience. It integrates modern tools such as Cloudinary for image storage and TanStack React Query for state management.\n\n---\n\n[![Visit Draw-Img](https://img.shields.io/badge/Visit_Draw--Img-blue?style=for-the-badge)](https://draw-img.vercel.app/)\n\n---\n\n## Features\n\n- **Drawing Canvas**: Use `react-canvas-draw` to draw and edit images dynamically.\n- **Image Upload**: Upload images locally or directly to Cloudinary.\n- **Image Comparison**: Compare images side by side using an interactive slider.\n- **Progressive Loading**: Utilize Radix UI components for enhanced user experience.\n- **Form Validation**: Powered by React Hook Form with Zod schema validation.\n- **QR Code Generator**: Create QR codes seamlessly.\n- **Dark Mode**: Supports dark/light themes with `next-themes`.\n- **Responsive Design**: Tailwind CSS ensures a mobile-friendly interface.\n- **State Management**: Zustand handles global state efficiently.\n\n---\n\n![Image 1](https://res.cloudinary.com/sutharjay/image/upload/v1734040484/draw-img/readme/uscybaiypmlduiaotscx.png)\n\n![Image 2](https://res.cloudinary.com/sutharjay/image/upload/v1734040485/draw-img/readme/vpvhpvbcrhqtnsoejxfh.png)\n\n![Image 3](https://res.cloudinary.com/sutharjay/image/upload/v1734040484/draw-img/readme/btuissgfm7kjh9uobomn.png)\n\n![Image 4](https://res.cloudinary.com/sutharjay/image/upload/v1734040484/draw-img/readme/vpdfh0z8xvrr9zldzdtv.png)\n\n![Image 5](https://res.cloudinary.com/sutharjay/image/upload/v1734040484/draw-img/readme/qyksmi9ripwupp42oirm.png)\n\n---\n\n## Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/sutharjay1/draw-img.git\n   cd draw-img\n   ```\n\n2. Install dependencies using pnpm:\n\n   ```bash\n   pnpm install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   pnpm dev\n   ```\n\n4. Access the application at `http://localhost:5173`.\n\n---\n\n## Environment Variables\n\n```env\nVITE_CLOUDINARY_URL=\"\"\nVITE_CLOUDINARY_CLOUD_NAME=\"\"\nVITE_CLOUDINARY_UPLOAD_PRESET=\"\"\nVITE_CLOUDINARY_API_KEY=\"\"\nVITE_CLOUDINARY_API_SECRET=\"\"\n\nVITE_UNSPLASH_URL=\"\"\nVITE_UNSPLASH_ACCESS_KEY=\"\"\nVITE_UNSPLASH_SECRET_KEY=\"\"\n \n```\n\n---\n\n## Usage\n\n### Drawing Canvas\n\nNavigate to the drawing canvas via the \"Edit\" page. Use tools like pen and eraser to create or modify images.\n\n### Image Upload\n\n- Drag and drop files into the upload area.\n- Optionally, save files to Cloudinary by configuring your credentials in `.env`.\n\n### QR Code Generation\n\nCreate QR codes dynamically by entering text in the \"Preview\" section.\n\n---\n\n## Tech Stack\n\n- **Frontend**: React, TypeScript\n- **Styling**: Tailwind CSS, Radix UI\n- **State Management**: Zustand, TanStack React Query\n- **Utilities**: Prettier\n- **Image Handling**: Cloudinary, React Dropzone,\n\n---\n\n## Scripts\n\n| Script          | Description                          |\n| --------------- | ------------------------------------ |\n| `pnpm dev`      | Start the development server         |\n| `pnpm build`    | Build the application for production |\n| `pnpm preview`  | Preview the production build locally |\n| `pnpm lint`     | Run ESLint for code quality checks   |\n| `pnpm lint:fix` | Automatically fix ESLint issues      |\n| `pnpm format`   | Format code using Prettier           |\n\n---\n\n## Deployment\n\n1. Build the project:\n\n   ```bash\n   pnpm build\n   ```\n\n2. Deploy the `dist` folder to your hosting provider or use Vercel with the included `vercel.json` configuration.\n\n---\n\n## Contribution\n\nContributions are welcome! Please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature-name`).\n3. Commit changes (`git commit -m 'Add feature'`).\n4. Push to the branch (`git push origin feature-name`).\n5. Open a pull request.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See `LICENSE` for details.\n\n---\n\n## Challenge\n\n- `react-canvas-draw` had error with getting the dataURI of the drawn stroke read the [repository](https://github.com/embiem/react-canvas-draw) and got to know that it was compiler issue that was solve with the help of `@ts-ignore`\n\n---\n\n## Acknowledgements\n\nSpecial thanks to contributors and the open-source community for the tools and libraries used in this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsutharjay1%2Fdraw-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsutharjay1%2Fdraw-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsutharjay1%2Fdraw-img/lists"}