{"id":22087508,"url":"https://github.com/labibahmed10/captcha-test","last_synced_at":"2026-05-06T22:06:59.946Z","repository":{"id":245739058,"uuid":"817122856","full_name":"labibahmed10/captcha-test","owner":"labibahmed10","description":"A video captcha validation test using a browsers web camera","archived":false,"fork":false,"pushed_at":"2024-06-23T18:13:22.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T05:44:01.742Z","etag":null,"topics":["navigator-api","react","reactwebcam","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://captcha-test-mx.netlify.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/labibahmed10.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-06-19T04:30:11.000Z","updated_at":"2024-09-13T06:00:07.000Z","dependencies_parsed_at":"2024-06-23T20:27:46.194Z","dependency_job_id":"6fd5b2ff-8017-44c3-b3d7-eab721444651","html_url":"https://github.com/labibahmed10/captcha-test","commit_stats":null,"previous_names":["labibahmed10/captcha-test"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labibahmed10%2Fcaptcha-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labibahmed10%2Fcaptcha-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labibahmed10%2Fcaptcha-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labibahmed10%2Fcaptcha-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/labibahmed10","download_url":"https://codeload.github.com/labibahmed10/captcha-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245177560,"owners_count":20573124,"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":["navigator-api","react","reactwebcam","tailwindcss","typescript"],"created_at":"2024-12-01T02:05:51.158Z","updated_at":"2026-05-06T22:06:54.914Z","avatar_url":"https://github.com/labibahmed10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Captcha Webcam Validation\n\nThis project implements a unique captcha validation system using React and webcam functionality. Users are required to take a selfie and then identify specific shapes and colors within the captured image to pass the captcha.\n\n## Prerequisites\n\nBefore you begin, ensure you have met the following requirements:\n\n- Node.js (version 12.0 or higher recommended)\n- npm (usually comes with Node.js)\n- A modern web browser with webcam support\n\n## Installation\n\nTo install the project, follow these steps:\n\n1. Clone the repository: https://github.com/labibahmed10/captcha-test.git\n2. Navigate to the project directory: `cd captcha-test/`\n3. Install the dependencies: `npm install`\n\n## Usage\n\nTo run the project locally:\n\n1. Start the development server: `npm run dev`\n2. Open your web browser and navigate to `http://localhost:3000`\n3. Allow camera access when prompted by your browser\n4. Follow the on-screen instructions to complete the captcha\n\n## Key Features\n\n1. `Webcam Integration:` Uses react-webcam for selfie capture.\n2. `Dynamic Captcha Generation:` Creates a grid with random shapes and colors.\n3. `Interactive Selection:` Allows users to click on grid sectors.\n4. `Validation System:` Checks user selections against the generated captcha.\n5. `Multiple Attempts:` Tracks and limits failed validation attempts.\n6. `Temporary Blocking:` Implements a blocking mechanism after multiple failures.\n\n## Components\n\n- `CaptchaContainer`: Wrapper component for the captcha interface\n- `CaptchaWebCamContainer`: Handles webcam integration and image capture\n- `CaptchaSectorsValidation`: Manages the captcha validation process\n- `BlockedError`: Displays when user is blocked after 5 failed attempts\n\n## The main components of the project are:\n\n### App.tsx\n\nThe main component that orchestrates the captcha flow. It manages the state and logic for:\n\n- Capturing the selfie\n- Generating the captcha grid\n- Validating user selections\n- Handling failed attempts and user blocking\n\n### CaptchaContainer.tsx\n\nA wrapper component that provides a consistent layout for different stages of the captcha process. It displays:\n\n- The captcha title\n- The main content (webcam or captcha grid)\n- Action button\n- Feedback messages\n\n### CaptchaSectorsValidation.tsx\n\nHandles the display and interaction of the captcha grid after a selfie is taken. Features include:\n\n- Displaying the captured selfie\n- Overlaying an interactive grid\n- Rendering shape watermarks (triangle, circle, square)\n- Handling user selections\n\n### CaptchaWebCamContainer.tsx\n\nManages the webcam functionality for capturing the selfie. It:\n\n- Initializes the webcam\n- Displays the live webcam feed\n- Shows a positioning guide for the captcha grid\n\n## Styling\n\nThe project uses a combination of Tailwind CSS and custom styles. Key styling features include:\n\n- Responsive design with flexbox\n- Custom shapes for captcha watermarks\n- Interactive hover and active states\n- Dynamic positioning of the captcha grid\n\n# How It Works\n\n1. User is prompted to take a selfie.\n2. A grid is overlaid on the captured image.\n3. Random grid sectors are filled with colored shapes.\n4. User is instructed to select sectors with a specific shape and color.\n5. Selections are validated, and feedback is provided.\n6. After multiple failed attempts, the user is temporarily blocked for one hour\n\n## Dependencies\n\n- React\n- typescript\n- react-webcam\n- Tailwind CSS\n- sweetalert2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabibahmed10%2Fcaptcha-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flabibahmed10%2Fcaptcha-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabibahmed10%2Fcaptcha-test/lists"}