Angul-It is a dynamic, multi-stage CAPTCHA web application designed to demonstrate robust frontend validation, state persistence, and seamless user experience. This project challenges users with a series of visual and logical tasks to distinguish humans from bots—built entirely from scratch using Angular.
- Multi-Stage Workflow: Progressive challenges that must be completed in sequence.
- State Persistence: Progress is saved in real-time. If you refresh the page, you resume exactly where you left off.
- Route Guarding: Users cannot skip to the "Success" page without completing all stages.
- Responsive Design: Fully optimized for mobile, tablet, and desktop views.
- Custom Validation: Bespoke logic for each challenge stage using Angular's Reactive Forms.
- Framework: Angular (Latest Version)
- Styling: Angular Material / CSS3
- State Management: Angular Services & LocalStorage
- Routing: Angular Router with Navigation Guards
- HomeComponent: The landing page and entry point.
- CaptchaComponent: The engine of the app. It dynamically renders different challenge stages.
- ResultComponent: The final summary page showing performance and a reset option.
- CaptchaService: Manages state, validates answers, and handles LocalStorage sync.
- AuthGuard: Prevents direct URL access to the results page.
- Clone & Install:
npm install - Run:
ng serve