CRB Demo - Croix Rouge Belge

Un projet full-stack moderne pour la Croix Rouge Belge, combinant React avec Vite pour le frontend et Strapi pour le backend.

🚀 Technologies utilisées

Frontend

• React 19 - Bibliothèque JavaScript pour l'interface utilisateur
• Vite - Outil de build moderne et rapide
• Tailwind CSS 4 - Framework CSS utility-first
• Framer Motion - Animations et interactions
• Radix UI - Composants accessibles
• Axios - Client HTTP pour les appels API
• Lucide React - Icônes modernes

Backend

• Strapi 5.23 - CMS headless
• SQLite - Base de données (better-sqlite3)
• Node.js - Runtime JavaScript

📁 Structure du projet

crb-demo/
├── frontend/          # Application React
│   ├── src/
│   │   ├── components/    # Composants React
│   │   ├── assets/        # Images et ressources
│   │   ├── services/      # Services API
│   │   └── hooks/         # Hooks personnalisés
│   └── package.json
├── strapi/            # Backend Strapi
│   ├── src/
│   │   ├── api/           # APIs et controllers
│   │   └── components/    # Composants Strapi
│   ├── config/            # Configuration
│   └── package.json
└── README.md

🛠️ Installation

Prérequis

• Node.js (≥18.0.0, ≤22.x.x)
• npm (≥6.0.0)

Installation du projet

1. Cloner le repository

   git clone <votre-repo-url>
   cd crb-demo

2. Installer les dépendances du frontend

   cd frontend
   npm install

3. Installer les dépendances du backend

   cd ../strapi
   npm install

🚦 Démarrage

Démarrer le backend (Strapi)

cd strapi
npm run develop

Le panel d'administration Strapi sera accessible sur : http://localhost:1337/admin

Démarrer le frontend (React)

cd frontend
npm run dev

L'application React sera accessible sur : http://localhost:5173

📜 Scripts disponibles

Frontend

• npm run dev - Lance le serveur de développement
• npm run build - Compile pour la production
• npm run preview - Prévisualise le build de production
• npm run lint - Vérifie le code avec ESLint

Backend (Strapi)

• npm run develop - Lance Strapi en mode développement
• npm run start - Lance Strapi en mode production
• npm run build - Compile Strapi
• npm run deploy - Déploie l'application
• npm run upgrade - Met à jour Strapi

🎨 Fonctionnalités

Le projet comprend plusieurs composants et sections :

• Hero - Section principale d'accueil
• Features - Présentation des fonctionnalités
• Gallery - Galerie d'images
• Blog - Section blog avec contenu dynamique
• Testimonials - Témoignages clients
• Footer - Pied de page

🔧 Configuration

Variables d'environnement

Créez un fichier .env dans chaque dossier si nécessaire :

Frontend (.env)

VITE_API_URL=http://localhost:1337

Strapi (.env)

HOST=0.0.0.0
PORT=1337

🏗️ Build et déploiement

Build du frontend

cd frontend
npm run build

Build du backend

cd strapi
npm run build
npm run start