OpenClassrooms - Développeur React P9 - Migrez du code JavaScript vers TypeScript

🌱 LMJ - Application de Vente de Plantes

Une application React moderne pour la vente de plantes d'intérieur et d'extérieur, construite avec Vite, TypeScript et React Router.

🚀 Technologies Utilisées

• React 19
• TypeScript
• Vite
• React Router DOM
• ESLint

📁 Structure du Projet

src/
├── assets/          # Images des plantes
├── components/      # Composants React
│   ├── layout/     # Composants de mise en page
│   └── ui/         # Composants d'interface
├── datas/          # Données des plantes
├── hooks/          # Hooks personnalisés
├── pages/          # Pages de l'application
├── services/       # Services (paiement)
└── styles/         # Fichiers CSS

🛍️ Fonctionnalités

• Catalogue de plantes : Affichage des plantes avec filtres par catégorie
• Panier d'achat : Ajout/suppression de produits, gestion des quantités
• Pages détaillées : Informations complètes sur chaque plante
• Système de paiement : Intégration de formulaire de paiement
• Responsive design : Interface adaptée mobile et desktop

🚀 Installation et Démarrage

Prérequis

• Node.js (version 18 ou supérieure)
• npm ou yarn

Installation

# Cloner le repository
git clone [url-du-repo]

# Installer les dépendances
npm install

# Démarrer le serveur de développement
npm run dev

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

Scripts Disponibles

npm run dev      # Démarre le serveur de développement
npm run build    # Compile l'application pour la production
npm run preview  # Prévisualise la version de production
npm run lint     # Lance ESLint pour vérifier le code

🏗️ Configuration Technique

Vite

Ce projet utilise Vite comme build tool pour un développement rapide avec HMR (Hot Module Replacement).

TypeScript

Configuration TypeScript avec support complet pour React et les fonctionnalités modernes.

ESLint

Configuration ESLint avec règles recommandées pour TypeScript et React.

📦 Dépendances Principales

• react & react-dom : Interface utilisateur
• react-router-dom : Navigation entre pages
• typescript : Typage statique
• vite : Build tool et dev server

🎨 Architecture

L'application suit une architecture modulaire avec :

• Composants réutilisables dans src/components/
• Pages dans src/pages/ pour chaque route
• Hooks personnalisés dans src/hooks/ pour la logique métier
• Données centralisées dans src/datas/