{"id":29625672,"url":"https://github.com/clicktodev/freedraw","last_synced_at":"2026-01-04T01:01:54.584Z","repository":{"id":282327898,"uuid":"944818446","full_name":"clicktodev/freedraw","owner":"clicktodev","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-03T09:55:22.000Z","size":232,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-15T05:43:50.065Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://freedraw-chi.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/clicktodev.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,"zenodo":null}},"created_at":"2025-03-08T03:02:55.000Z","updated_at":"2025-04-03T09:55:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"eb49733f-d438-4c1b-9f6e-7ec38248ff29","html_url":"https://github.com/clicktodev/freedraw","commit_stats":null,"previous_names":["hichemfantar/freedraw","clicktodev/freedraw"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clicktodev/freedraw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Ffreedraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Ffreedraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Ffreedraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Ffreedraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clicktodev","download_url":"https://codeload.github.com/clicktodev/freedraw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Ffreedraw/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266253949,"owners_count":23900058,"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":[],"created_at":"2025-07-21T06:37:45.825Z","updated_at":"2026-01-04T01:01:54.535Z","avatar_url":"https://github.com/clicktodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Documentation\n\n## Overview\n\nThis is a React-based drawing application that allows users to draw on a canvas using different tools and settings. The app features a pencil tool, eraser, color selection, background customization, and image saving capabilities. It also supports responsive design for both desktop and mobile devices.\n\n## Development Choices \u0026 Technology Stack\n\n### Core Framework: Next.js\n\nNext.js was selected as the foundation for this application due to its powerful features for React-based web development:\n\n- **Server-Side Rendering (SSR)** and **Static Site Generation (SSG)** capabilities that improve performance and SEO\n- **File-based routing** that simplifies navigation structure\n- **API routes** that enable serverless function development within the same codebase\n- **Built-in optimization** for images, fonts, and scripts\n- **React 18 support** with enhanced features like Server Components and Streaming\n\n### UI Framework: Tailwind CSS\n\nTailwind CSS was chosen for styling due to its utility-first approach:\n\n- **Development speed** through pre-defined utility classes\n- **Consistency** across the application with a design system based on constraints\n- **Highly customizable** while maintaining a small bundle size through PurgeCSS\n- **Responsive design** made simple with intuitive breakpoint classes\n- **Dark mode** support built-in\n\n### Component Library: shadcn/ui\n\nshadcn/ui provides high-quality, accessible UI components:\n\n- **Customizable and accessible** components that can be easily customized\n- **Copy-paste implementation** that avoids dependency bloat\n- **Tailwind integration** for consistent styling\n- **Radix UI primitives** underneath for robust accessibility\n- **TypeScript support** for enhanced developer experience\n\n### UI Primitives: Radix UI\n\nRadix UI serves as the foundation for our custom components:\n\n- **Headless UI components** that are fully accessible\n- **Composition pattern** allowing for maximum flexibility\n- **Focus management** and keyboard navigation built-in\n- **ARIA compliance** without additional developer effort\n\n### Icons: Lucide Icons\n\nLucide Icons was selected for its:\n\n- **Consistent design language** across all icons\n- **SVG-based** implementation for crisp rendering at any size\n- **Lightweight** with tree-shaking support\n- **Customizable** properties like size, stroke width, and color\n\n### Version Control \u0026 Deployment: GitHub \u0026 Vercel\n\n- **GitHub** provides collaborative development features, code reviews, and CI/CD integration\n- **Vercel** offers a seamless deployment experience specifically optimized for Next.js applications with:\n  - Preview deployments for each PR\n  - Automatic HTTPS\n  - Edge caching\n  - Analytics\n  - Integration with GitHub workflows\n\n## UI Elements\n\n### Top Bar\n\n- UI visibility toggle\n- User avatar\n- Action buttons (save, copy, clear)\n- Camera capture (mobile only)\n- Tool selection (pencil/eraser)\n- Theme toggle and GitHub link\n\n### Configuration Panel\n\n- Displayed inline on desktop\n- Available via drawer on mobile\n- Color selectors with presets and custom picker\n- Stroke width options\n\n## Technical Features\n\n### Responsive Design\n\n- Adapts UI based on screen size\n- Shows/hides elements based on context\n- Uses a drawer for settings on mobile\n\n### Color Management\n\n- Supports hex color codes\n- Includes preset colors for quick selection\n- Uses the Colorful color picker component\n\n## User Experience Considerations\n\n- Shows/hides UI during active drawing\n- Provides tooltips for all controls\n- Supports theme switching\n- Handles canvas state preservation during resize\n- Provides feedback via toast notifications\n\n## Installation \u0026 Deployment Guide\n\n### Local Development Setup\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/hichemfantar/freedraw.git\n   cd freedraw\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Run the development server**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   pnpm dev\n   ```\n\nThe application will be available at [http://localhost:3000](http://localhost:3000).\n\n### Building for Production\n\nTo create an optimized production build:\n\n```bash\nnpm run build\n# or\nyarn build\n# or\npnpm build\n```\n\nTo test the production build locally:\n\n```bash\nnpm run start\n# or\nyarn start\n# or\npnpm start\n```\n\n### Deployment with Vercel\n\n#### Automatic Deployment (Recommended)\n\n1. Push your code to GitHub\n2. Connect your GitHub repository to Vercel:\n   - Log in to [Vercel](https://vercel.com)\n   - Click \"New Project\"\n   - Import your GitHub repository\n   - Configure project settings (environment variables, build commands)\n   - Click \"Deploy\"\n\nVercel will automatically deploy your application and provide a production URL.\n\n#### Manual Deployment\n\nIf you prefer to deploy manually:\n\n1. Install the Vercel CLI:\n\n   ```bash\n   npm install -g vercel\n   # or\n   yarn global add vercel\n   ```\n\n2. Log in to Vercel:\n\n   ```bash\n   vercel login\n   ```\n\n3. Deploy the application:\n\n   ```bash\n   vercel\n   ```\n\nFollow the prompts to configure your deployment.\n\n### CI/CD Pipeline\n\nThe repository is configured with GitHub Actions for continuous integration.\n\nWhen code is merged to the main branch, Vercel automatically deploys to production.\n\n### Updating the Application\n\nTo update the deployed application:\n\n1. Push changes to your GitHub repository\n2. Vercel will automatically build and deploy the updated version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclicktodev%2Ffreedraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclicktodev%2Ffreedraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclicktodev%2Ffreedraw/lists"}