Ce projet a été réalisé dans le cadre de ma formation de Développeur Web et Mobile chez Human Booster. Il s’inscrit dans la préparation à l’évaluation Angular et a pour objectif de mettre en pratique les compétences acquises en développement frontend avec Angular 18, TypeScript et Tailwind CSS.

ClimaShop est une application web moderne simulant la vitrine d’une startup spécialisée dans les équipements de climatisation et ventilation. Elle permet de consulter un catalogue de produits avec un système de filtrage, dans une interface claire, responsive et animée.

• Page d'accueil (/accueil) : Présentation institutionnelle avec hero section, avantages, statistiques et call-to-action
• Page articles (/articles) : Catalogue des produits avec système de filtrage

• Recherche par titre : Recherche en temps réel sur le nom et la description
• Filtrage par prix maximum
• Affichage des promotions uniquement
• Filtres réactifs avec mise à jour dynamique

• Cartes produits : image, titre, description, prix, caractéristiques
• Promotions : badges visuels et prix barrés
• Icônes Material pour les features
• Design responsive

• Angular 18 avec composants standalone
• TypeScript (mode strict)
• Reactive Forms pour la gestion des filtres
• RxJS pour les observables
• Tailwind CSS
• Material Icons (Google)

• Séparation claire : services, components, models
• Interfaces typées (Product, Feature)
• Routing Angular
• Service dédié pour la gestion des données produits

src/
│
├── app/
│   ├── components/
│   │   └── navbar/           # Composant de navigation
│   │   └── accueil/          # Composant de la page d'accueil institutionnelle
│   │   └── articles/         # Composant de la page catalogue avec filtres
│   │
│   ├── services/
│   │   └── product.service.ts # Service de gestion des produits
│   │
│   └── models/
│       ├── product.ts        # Interface Product
│       └── feature.ts        # Interface Feature
│
├── styles.css                # Styles Tailwind + personnalisés
└── index.html                # HTML principal avec Material Icons

# Installation
npm install

# Lancement en mode développement
ng serve
# ou
npm start

# Build production
ng build

Développé avec ❤️ par Youcef KOUAOUCI - FORMATION ASSURÉE PAR HUMAN BOOSTER SOUS L'ENCADREMENT DU FORMATEUR GAETAN THOMAS