📌 Gestion-taches – Application Web de Gestion des Tâches

📖 Description du projet

Gestion-taches est une application web permettant de gérer facilement une liste de tâches. Elle permet aux utilisateurs de :

• ➕ Créer une nouvelle tâche
• 📋 Afficher toutes les tâches existantes
• ✏️ Modifier une tâche
• ❌ Supprimer une tâche

L'application utilise React.js pour le front-end et json-server pour simuler un back-end RESTful basé sur un fichier db.json.

🚀 Fonctionnalités

✔️ Front-end (React.js)

• Page d’accueil (/) Affiche la liste de toutes les tâches enregistrées.

• Formulaire d’ajout (/ajouter) Permet de créer une tâche avec :

  • Titre (obligatoire)
  • Description (optionnelle)
  • Statut : "À faire", "En cours", "Terminé"

• Modification d’une tâche Un bouton "Modifier" permet d’ouvrir un formulaire pré-rempli.

• Suppression d’une tâche Un bouton "Supprimer" permet de retirer la tâche de la liste après la confirmation.

🛠️ Technologies utilisées

Front-end

• React.js (projet créé avec Vite)
• React Router DOM pour routage
• Axios (appel d’API)
• React-icons
• CSS et Bootstrap pour le style

🧩 Packages installés

npm install react-router-dom
npm install -g json-server
npm install axios
npm install bootstrap
npm install react-icons

🗄️ Back-end : json-server

Le back-end est simulé grâce à json-server et utilise un fichier db.json comme base de données.

Endpoints RESTful

Méthode	Endpoint	Description
GET	/tasks	Récupère toutes les tâches
POST	/tasks	Ajoute une nouvelle tâche
PUT	/tasks/:id	Met à jour une tâche existante
DELETE	/tasks/:id	Supprime une tâche existante

---

🗃️ Structure de la base de données (db.json)

Chaque tâche contient :

• id
• title
• description
• status

Exemple :

{
  "tasks": [
    {
      "id": 1,
      "title": "Ma première tache",
      "description": "Description ",
      "status": "À faire"
    }
  ]
}

---

▶️ Installation & Exécution

📥 1. Cloner le projet

git clone https://github.com/bentiriaya/gestionnaire-taches.git
cd gestion-taches

---

⚛️ 2. Installer les dépendances React

npm install

🖥️ 3. Lancer le front-end (Vite)

npm run dev

Par défaut : ➡️ http://localhost:5173

---

🗄️ 4. Lancer json-server

Assurez-vous que db.json est dans le dossier backend :

json-server --watch backend/db.json --port 3001

L’API sera disponible sur : ➡️ http://localhost:3001/tasks

---

📂 Structure du projet

gestion-taches/
│── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── App.jsx
│   ├── main.jsx
│── db.json
│── package.json
│── index.html

🧭 Routes principales

Route	Description
/	Liste des tâches
/ajouter	Formulaire d’ajout