Aller au contenu

drwh_tech — Division Technologie

Rôle du service

drwh_tech est le site complet de la division technologie de DAREWATCH CONSULTING. Il présente les services IT, les formations, les offres d'emploi (carrières), le blog technique, et permet aux prospects de prendre contact.

URL

Local : http://localhost:4201
Production : tech.darewatchgroup.com

Stack technique

graph LR
    TS[TypeScript] --> NEXT[Next.js 14\nApp Router]
    NEXT --> REACT[React 18]
    NEXT --> TW[Tailwind CSS]
    NEXT --> API[API Backend\nREST/JSON]
    style TS fill:#2d79c7,color:#fff
    style NEXT fill:#2d2e2e,color:#fff
    style REACT fill:#0066FF,color:#fff
    style TW fill:#27ae60,color:#fff
    style API fill:#8e44ad,color:#fff
Couche Technologie Rôle
Language TypeScript Typage statique, détection d'erreurs
Framework Next.js 14 (App Router) SSR, routage, optimisation
UI React 18 Composants interactifs
CSS Tailwind CSS Design utilitaire
Tests unitaires Jest Tests de composants
Tests e2e Cypress Tests de navigation

Pages du site

Page URL Description
Accueil / Hero, services, réalisations, témoignages, blog
À Propos /about Histoire, chiffres clés, timeline depuis 2022
Services /services Liste des services IT proposés
Carrières /carriere Offres d'emploi (Développeur, Ingénieur Réseaux…)
Carrière (détail) /carriere/[slug] Détail d'une offre d'emploi
Blog /blog Articles et actualités tech
Article (détail) /blog/[slug] Détail d'un article
Contact /contact Formulaire de contact + FAQ

Sections de la page d'accueil

La page d'accueil est composée de sections empilées :

graph TD
    NAV[🔝 Navbar\nNavigation principale] --> HERO[🦸 HeroSection\nAccroche principale]
    HERO --> ABOUT[ℹ️ AboutSection\nPrésentation courte]
    ABOUT --> SERV[⚙️ ServicesSection\nAperçu des services]
    SERV --> WORKS[🏆 WorksSection\nRéalisations clients]
    WORKS --> TESTI[💬 TestimonialsSection\nTémoignages]
    TESTI --> BLOG[📝 BlogSection\nDerniers articles]
    BLOG --> FOOTER[📋 Footer]

    style NAV fill:#2d2e2e,color:#fff
    style HERO fill:#0066FF,color:#fff
    style ABOUT fill:#27ae60,color:#fff
    style SERV fill:#f39c12,color:#fff
    style WORKS fill:#8e44ad,color:#fff
    style TESTI fill:#e74c3c,color:#fff
    style BLOG fill:#2196F3,color:#fff
    style FOOTER fill:#2d2e2e,color:#fff

Architecture des fichiers

apps/drwh_tech/
├── src/
│   ├── app/                           ← Pages (Next.js App Router)
│   │   ├── layout.tsx                 ← Layout global (head, fonts, analytics)
│   │   ├── page.tsx                   ← Page d'accueil
│   │   ├── navbar.tsx                 ← Barre de navigation
│   │   ├── about/
│   │   │   └── page.tsx               ← Page À Propos
│   │   ├── services/
│   │   │   └── page.tsx               ← Page Services
│   │   ├── carriere/
│   │   │   ├── page.tsx               ← Liste des offres d'emploi
│   │   │   └── [slug]/page.tsx        ← Détail d'une offre
│   │   ├── blog/
│   │   │   ├── page.tsx               ← Liste des articles
│   │   │   └── [slug]/page.tsx        ← Détail d'un article
│   │   └── contact/
│   │       └── page.tsx               ← Page contact + FAQ
│   │
│   ├── components/                    ← Composants réutilisables
│   │   ├── HeroSection.tsx
│   │   ├── AboutSection.tsx
│   │   ├── ServicesSection.tsx
│   │   ├── WorksSection.tsx
│   │   ├── TestimonialsSection.tsx
│   │   ├── BlogSection.tsx
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   │
│   ├── lib/                           ← Utilitaires et services
│   │   ├── public.service.ts          ← Appels API backend
│   │   ├── fallback-content.ts        ← Données statiques de secours
│   │   └── types.ts                   ← Types TypeScript
│   │
│   └── types/                         ← Interfaces TypeScript globales
│
├── next.config.js                     ← Configuration Next.js
├── tailwind.config.js                 ← Configuration Tailwind CSS
├── tsconfig.json                      ← Configuration TypeScript
└── project.json                       ← Configuration NX

Charte graphique

Élément Valeur Usage
Couleur principale #0066FF Boutons, liens, accents
Couleur secondaire #004E89 Nuances, hover
Fond clair #F7F7F7 Arrière-plans clairs
Fond sombre #2D2E2E Footer, éléments sombres
Police Inter (Google Fonts) Tous les textes

Stratégie de données : API + Fallback

flowchart TD
    PAGE[Page Next.js] --> CALL[Appel API\npublic.service.ts]
    CALL -->|Succès| DATA[✅ Données dynamiques\ndepuis le backend]
    CALL -->|Erreur / Vide| FALLBACK[🔄 Données statiques\nfallback-content.ts]
    DATA --> RENDER[Rendu de la page]
    FALLBACK --> RENDER

    style CALL fill:#0066FF,color:#fff
    style DATA fill:#27ae60,color:#fff
    style FALLBACK fill:#f39c12,color:#fff

Le service appelle d'abord public.service.ts (API backend). Si l'API répond avec une erreur ou des données vides, il bascule automatiquement sur les données de fallback (fallback-content.ts) pour garantir que le site reste fonctionnel.

Lancer le service en local

# Depuis la racine du monorepo
npm run dev:tech

# Le service sera disponible sur http://localhost:4201

Tests

# Tests unitaires
npm run test:tech

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

# Vérification TypeScript
npm run type-check

Modifier le contenu

Contenu à modifier Fichier
Menu de navigation src/app/navbar.tsx
Page d'accueil src/app/page.tsx
Section services homepage src/components/ServicesSection.tsx
Page services src/app/services/page.tsx
Données statiques (fallback) src/lib/fallback-content.ts
Couleurs Tailwind tailwind.config.js

Liens complémentaires