Aller au contenu

drwh_immo — Division Immobilière

Rôle du service

drwh_immo est le site complet de la division immobilière de DAREWATCH. Il présente les biens immobiliers à vendre, les projets de construction en cours, les lotissements, et permet aux visiteurs de prendre contact.

URL

Local : http://localhost:4200
Production : immo.darewatchgroup.com
Marché ciblé : Promotion immobilière au Cameroun

Stack technique

Couche Technologie Rôle
Language TypeScript Typage statique
Framework Next.js 14 (App Router) SSR, routage
UI React 18 Composants interactifs
CSS Tailwind CSS Design utilitaire
API Client Fetch / Axios Appels API backend
Tests Jest + Cypress Tests unitaires et e2e

Pages du site

Page URL Description
Accueil / Landing avec toutes les sections
Immobilier /immobilier Catalogue : villas, appartements, terrains
Projets /projets Projets de construction en cours
Projet (détail) /projets/[id] Fiche détaillée d'un projet
Lotissement /lotissement Terrains découpés à vendre
Blog /blog Articles et actualités immobilières
Article (détail) /blog/[id] Détail d'un article
Carrières /carriere Offres d'emploi
Carrière (détail) /carriere/[id] Détail d'une offre
Contact /contact Formulaire de contact
Rédiger /rediger Rédaction d'articles (interface locale)

Structure de la page d'accueil

Les sections sont ordonnées pour convaincre progressivement le visiteur :

graph TD
    HERO[🦸 Hero\nPremière impression forte] --> ABOUT[ℹ️ About Us\nQui sommes-nous ?]
    ABOUT --> GALLERY[📸 Gallery\nPhotos des biens]
    GALLERY --> SPEC[🎯 Specializations\nDomaines d'expertise]
    SPEC --> STORY[📖 Our Story\nHistoire & crédibilité]
    STORY --> NUMS[📊 Numbers\nChiffres clés]
    NUMS --> WHY[✅ Why Choose Us\nArguments différenciants]
    WHY --> PROCESS[⚙️ Work Process\nCommment on travaille]
    PROCESS --> TESTI[💬 Testimonials\nTémoignages clients]
    TESTI --> NEWS[📰 News\nActualités]
    NEWS --> CTA[🎯 CTA\nAppel à l'action final]

    style HERO fill:#27ae60,color:#fff
    style NUMS fill:#f39c12,color:#fff
    style CTA fill:#e74c3c,color:#fff

Architecture des fichiers

apps/drwh_immo/
├── src/
│   ├── app/                           ← Pages (Next.js App Router)
│   │   ├── layout.tsx                 ← Layout global + SEO
│   │   ├── page.tsx                   ← Page d'accueil
│   │   ├── sitemap.ts                 ← Sitemap dynamique
│   │   ├── robots.ts                  ← Robots.txt
│   │   ├── components/                ← Header, Footer immo
│   │   ├── immobilier/
│   │   │   └── page.tsx               ← Catalogue immobilier
│   │   ├── projets/
│   │   │   ├── page.tsx               ← Liste des projets
│   │   │   └── [id]/page.tsx          ← Détail projet
│   │   ├── lotissement/
│   │   │   └── page.tsx               ← Page lotissement
│   │   ├── blog/
│   │   │   ├── page.tsx               ← Liste articles
│   │   │   └── [id]/page.tsx          ← Détail article
│   │   ├── carriere/
│   │   │   ├── page.tsx               ← Offres d'emploi
│   │   │   └── [id]/page.jsx          ← Détail offre
│   │   ├── contact/
│   │   │   └── page.tsx               ← Contact + FAQ
│   │   └── rediger/
│   │       └── page.tsx               ← Éditeur d'articles local
│   │
│   ├── components/
│   │   └── sections/                  ← Toutes les sections de page
│   │       ├── HeroSection.tsx
│   │       ├── AboutSection.tsx
│   │       ├── GallerySection.tsx
│   │       ├── NumbersSection.tsx
│   │       └── ...
│   │
│   └── lib/
│       ├── api/
│       │   └── client.ts              ← Client API backend
│       ├── data/
│       │   ├── properties.ts          ← Données statiques biens
│       │   ├── articles.ts            ← Données statiques articles
│       │   └── lots.ts                ← Données statiques lots
│       └── constants.ts               ← Constantes globales
│
├── next.config.js
├── tailwind.config.js
└── project.json

Client API des propriétés

Un client API est en place pour les biens immobiliers :

// src/lib/api/client.ts

// Récupérer toutes les propriétés (paginées)
GET /properties?page=1&pageSize=12

// Récupérer une propriété par ID
GET /properties/:id

// Rechercher des propriétés
GET /properties/search?q=villa&city=Douala&minPrice=10000000&maxPrice=50000000

Mode Mock actif en développement

Les appels API en développement peuvent être redirigés vers des données mock.
Vérifiez la variable NEXT_PUBLIC_ENABLE_MOCKING dans votre .env.development.

SEO dynamique

drwh_immo intègre un SEO avancé :

graph TD
    SM[sitemap.ts\nGenère les URLs] -->|Projets| P[/projets/[id]]
    SM -->|Articles| A[/blog/[id]]
    SM -->|Pages statiques| S[/, /immobilier, /contact…]
    ROB[robots.ts\nRègles robots] --> ALLOW[Indexation autorisée]
    style SM fill:#0066FF,color:#fff
    style ROB fill:#27ae60,color:#fff

Lancer le service en local

# Depuis la racine du monorepo
npm run dev:immo

# Le service est disponible sur http://localhost:4200

Tests

# Tests unitaires
npm run test:immo

# Tests end-to-end (Cypress)
npm run e2e:immo

Liens complémentaires