Angul-It 🔐

Une application web de vérification de sécurité multi-étapes développée avec Angular 20, offrant une expérience utilisateur fluide et sécurisée avec trois types de défis de validation : sélection d'images, calculs mathématiques et saisie de texte.

📋 Table des matières

• Aperçu
• Fonctionnalités
• Technologies utilisées
• Prérequis
• Installation
• Utilisation
• Structure du projet
• Fonctionnalités détaillées
• Déploiement
• Licence

🎯 Aperçu

Angul-It est une application de captcha innovante qui propose plusieurs types de défis pour valider l'authenticité des utilisateurs. L'application utilise une approche multi-étapes avec sauvegarde automatique de la progression et une interface responsive.

✨ Fonctionnalités

Fonctionnalités principales

• 🖼️ Captcha par sélection d'images - Identification d'objets spécifiques dans une grille
• ✍️ Saisie de texte - Validation de texte avec vérification
• 🔢 Défis mathématiques - Résolution de problèmes arithmétiques
• 🔄 Navigation bidirectionnelle - Possibilité de revenir aux étapes précédentes
• 💾 Sauvegarde de progression - Maintien du progrès même après actualisation
• 📱 Interface responsive - Optimisée pour desktop et mobile

Fonctionnalités bonus

• 🎲 Défis aléatoires - Attribution unique de défis par session utilisateur
• 🎬 Animations fluides - Transitions animées entre les étapes
• 🛡️ Protection de routes - Accès sécurisé aux pages de résultats
• ✅ Validation robuste - Contrôles de formulaire avancés

🛠️ Technologies utilisées

• Frontend: Angular 20.0.0 (dernière version)
• Language: TypeScript 5.8.2
• Styling: TailwindCSS 3.4.17 + SCSS
• UI Components: Angular Material 20.0.2
• State Management: Angular Services + RxJS
• Routing: Angular Router avec guards de protection
• Forms: Angular Reactive Forms
• Animations: Angular Animations API
• Security: Crypto-js pour le hachage sécurisé
• SSR: Angular SSR pour le rendu côté serveur
• Build Tool: Angular CLI 20.0.1
• Linting: ESLint + Prettier
• Development: Node.js + Express pour le serveur de développement

📋 Prérequis

Avant de commencer, assurez-vous d'avoir installé :

• Node.js (version 20.x ou supérieure)
• npm (version 10.x ou supérieure)
• Angular CLI (version 20.x ou supérieure)

# Vérifier les versions installées
node --version
npm --version
ng version

🚀 Installation

1. Cloner le repository

git clone https://learn.zone01dakar.sn/git/preydedy/angul-it
cd angul-it

2. Installer les dépendances

npm install

3. Lancer l'application en développement

ng serve

L'application sera accessible à l'adresse : http://localhost:4200

4. Lancer avec SSR (Server-Side Rendering)

# Build SSR
ng build --ssr

# Servir avec SSR
npm run serve:ssr:angul-it

5. Build pour la production

ng build --configuration production

6. Linting et formatage

# Linter le code
npm run lint

# Formatter avec Prettier
npx prettier --write src/

🎮 Utilisation

Démarrage rapide

1. Page d'accueil : Cliquez sur "Commencer le défi" pour débuter
2. Défis : Complétez chaque étape selon les instructions affichées
3. Navigation : Utilisez les boutons "Précédent" et "Suivant" pour naviguer
4. Résultats : Consultez vos résultats une fois tous les défis terminés

Types de défis disponibles

🖼️ Sélection d'images (Image Challenge)

• Identifiez et sélectionnez les images correspondant à la catégorie demandée
• 3 catégories disponibles : vélos, voitures, et feu
• 5 images par catégorie avec mélange aléatoire
• Validation en temps réel des sélections

✍️ Saisie de texte (Text Challenge)

• Recopiez exactement le texte affiché
• Validation stricte de la casse et des espaces
• Textes générés aléatoirement avec différents niveaux de complexité

🔢 Défis mathématiques (Math Challenge)

• Résolvez des équations arithmétiques simples
• Operations : addition, soustraction, multiplication
• Génération aléatoire des problèmes

📁 Structure du projet

angul-it/
├── public/
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── home/
│   │   │   │   ├── home.ts
│   │   │   │   ├── home.html
│   │   │   │   ├── home.scss
│   │   │   │   └── home.spec.ts
│   │   │   ├── captcha/
│   │   │   │   ├── captcha.ts
│   │   │   │   ├── captcha.html
│   │   │   │   ├── captcha.scss
│   │   │   │   ├── captcha.spec.ts
│   │   │   │   ├── image-challenge/
│   │   │   │   │   ├── image-challenge.ts
│   │   │   │   │   ├── image-challenge.html
│   │   │   │   │   ├── image-challenge.scss
│   │   │   │   │   └── image-challenge.spec.ts
│   │   │   │   ├── math-challenge/
│   │   │   │   │   ├── math-challenge.ts
│   │   │   │   │   ├── math-challenge.html
│   │   │   │   │   ├── math-challenge.scss
│   │   │   │   │   └── math-challenge.spec.ts
│   │   │   │   └── text-challenge/
│   │   │   │       ├── text-challenge.ts
│   │   │   │       ├── text-challenge.html
│   │   │   │       ├── text-challenge.scss
│   │   │   │       └── text-challenge.spec.ts
│   │   │   └── result/
│   │   │       ├── result.ts
│   │   │       ├── result.html
│   │   │       ├── result.scss
│   │   │       └── result.spec.ts
│   │   ├── services/
│   │   │   └── captcha.service.ts
│   │   ├── guards/
│   │   │   ├── captcha-guard.ts
│   │   │   └── captcha-guard.spec.ts
│   │   ├── directives/
│   │   │   └── flash-on-error.directive.ts
│   │   ├── utils/
│   │   │   └── utils.ts
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.scss
│   │   ├── app.spec.ts
│   │   ├── app.config.ts
│   │   ├── app.config.server.ts
│   │   ├── app.routes.ts
│   │   └── app.routes.server.ts
│   ├── assets/
│   │   └── captcha/
│   │       ├── bike0.jpg → bike4.jpg
│   │       ├── car0.jpg → car4.jpg
│   │       ├── fire0.jpg → fire4.jpg
│   │       └── other0.jpg → other4.jpg
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.development.ts
│   ├── index.html
│   ├── main.ts
│   ├── main.server.ts
│   ├── server.ts
│   └── styles.scss
├── tailwind.config.js
├── package.json
└── README.md

🔧 Fonctionnalités détaillées

Architecture modulaire

L'application suit une architecture en composants spécialisés :

• HomeComponent : Page d'accueil avec bouton de démarrage
• CaptchaComponent : Container principal gérant la progression et la navigation
• Challenge Components : Trois composants spécialisés (ImageChallenge, MathChallenge, TextChallenge)
• ResultComponent : Page de résultats avec options de redémarrage

Gestion d'état centralisée

Le CaptchaService centralise :

• Génération aléatoire des défis pour chaque session
• Sauvegarde automatique de la progression
• Validation des étapes en temps réel
• Gestion des transitions entre défis

Sécurité et validation

• CaptchaGuard : Protection des routes avec redirection automatique
• FlashOnErrorDirective : Feedback visuel pour les erreurs
• Crypto-js : Chiffrement sécurisé des données de session
• Validation stricte : Contrôles robustes pour chaque type de défi

Interface utilisateur

• TailwindCSS : Design system moderne et responsive
• Angular Material : Composants UI cohérents
• Animations fluides : Transitions avec @fadeSwitch
• Progress tracker : Indicateur visuel de progression
• Mobile-first : Interface optimisée pour tous les écrans

🚀 Déploiement

Déploiement sur Vercel

# Installer Vercel CLI
npm i -g vercel

# Déployer
vercel --prod

📝 Changelog

Version 1.0.0 (2024-06-22)

• ✨ Application de vérification sécurisée multi-étapes
• 🎨 Interface moderne avec TailwindCSS et Angular Material
• 🔧 Trois types de défis : images, mathématiques, texte
• 💾 Gestion d'état centralisée avec sauvegarde automatique
• 🛡️ Protection des routes avec guards personnalisés
• 📱 Design responsive mobile-first
• 🎬 Animations fluides entre les étapes
• 🔒 Sécurité renforcée avec crypto-js

📄 Licence

This project is licensed under the MIT License - see the LICENSE file for details.

Auteur

• preydedy