diff --git a/Backend/db.sqlite b/Backend/db.sqlite
new file mode 100644
index 000000000..f6bd01cd1
Binary files /dev/null and b/Backend/db.sqlite differ
diff --git a/FrontEnd/ApiDataProvider.js b/FrontEnd/ApiDataProvider.js
new file mode 100644
index 000000000..f939106e2
--- /dev/null
+++ b/FrontEnd/ApiDataProvider.js
@@ -0,0 +1,25 @@
+export default class ApiDataProvider {
+  getProjects = fetch("http://localhost:5678/api/works")
+    .then((res) => res.json())
+    .then((projects) => {
+      return projects;
+    });
+
+  getProjectsByCategory = (category) => {
+    fetch("http://localhost:5678/api/works")
+      .then((res) => res.json())
+      .then((projects) => {
+        return projects;
+      });
+  };
+
+  getCategories = fetch("http://localhost:5678/api/categories")
+    .then((res) => res.json())
+    .then((categories) => {
+      let categoriesSet = new Set();
+      categories.map((category) => {
+        categoriesSet.add(category);
+      });
+      return categoriesSet;
+    });
+}
diff --git a/FrontEnd/CardBuilder.js b/FrontEnd/CardBuilder.js
new file mode 100644
index 000000000..4d1a5230f
--- /dev/null
+++ b/FrontEnd/CardBuilder.js
@@ -0,0 +1,34 @@
+export default class CardBuilder {
+  // methode pour afficher les projets
+  async displayProjects(projects) {
+    projects.map((project) => {
+      const gallery = document.querySelector(".gallery");
+      const figureEl = document.createElement("figure");
+      const imageEl = document.createElement("img");
+      const figcaptionEl = document.createElement("figcaption");
+      imageEl.src = project.imageUrl;
+      imageEl.alt = project.title;
+      figcaptionEl.innerText = project.title;
+      figureEl.dataset.type = project.category.name;
+      gallery.appendChild(figureEl);
+      figureEl.appendChild(imageEl);
+      figureEl.appendChild(figcaptionEl);
+    });
+  }
+  // fonction pour afficher les boutons du filtre
+  async displayCategories(categories) {
+    const buttonFilter = document.querySelector(".button-filter");
+    const btnTous = document.createElement("button");
+    btnTous.innerText = "Tous";
+    btnTous.className = "categorie-button";
+    btnTous.dataset.type = "Tous";
+    buttonFilter.appendChild(btnTous);
+    for (let category of categories) {
+      const btn = document.createElement("button");
+      btn.innerText = category.name;
+      btn.className = "categorie-button";
+      btn.dataset.type = category.name;
+      buttonFilter.appendChild(btn);
+    }
+  }
+}
diff --git a/FrontEnd/EventListener.js b/FrontEnd/EventListener.js
new file mode 100644
index 000000000..a657abe9e
--- /dev/null
+++ b/FrontEnd/EventListener.js
@@ -0,0 +1,46 @@
+import Projects from "./ApiDataProvider.js";
+
+// // Missions :
+
+// // Pouvoir cliquer sur les boutons du Filtre
+// // Au clic ajouter du style au bouton
+// // Au clic faire un filtre pour faire disparaitre ou apparaitre des projets
+// // Attention par défault c'est le bouton Tous qui est cliqué
+// // Attention, quand on clic sur un autre bouton, les autres eventListener se réinitialise sur les autres boutons
+// // Attention, la page ne doit pas se recharger (e.preventdefault)
+
+export default class EvenListener {
+  dispatch() {
+    this.listenClickOnButtonFilter();
+  }
+  listenClickOnButtonFilter() {
+    document
+      .querySelector(".button-filter")
+      .addEventListener("click", (event) => {
+        const isButtonFilter =
+          event.target.classList.contains("categorie-button");
+        console.log(isButtonFilter);
+      });
+  }
+}
+
+// export async function EventListener() {
+//   const resultCategories = new Projects();
+//   const resultButton = await resultCategories.getCategories;
+//   const buttons = document.querySelectorAll(".categorie-button");
+//   // console.log(buttons);
+//   buttons.forEach((button) => {
+//     button.addEventListener("click", (e) => {
+//       // console.log("test");
+//       const typeSelect = e.target.dataset["type"];
+//       // console.log(typeSelect);
+//       if (typeSelect === "Tous") {
+//         document.querySelector("figure").style.display = "block";
+//       } else {
+//       }
+//       document.querySelector(
+//         "figure[data-type = " + typeSelect + "]"
+//       ).style.display = "none";
+//     });
+//   });
+// }
diff --git a/FrontEnd/index.js b/FrontEnd/index.js
new file mode 100644
index 000000000..6708b2fbe
--- /dev/null
+++ b/FrontEnd/index.js
@@ -0,0 +1,117 @@
+// // Etape 1 - Récupération des travaux depuis le back-end avec fetch
+
+async function fetchProjects() {
+  await fetch("http://localhost:5678/api/works")
+    .then((res) => res.json())
+    .then((data) => {
+      projectsDisplay(data);
+    });
+}
+
+// // afficher les éléments
+
+function projectsDisplay(projectsData) {
+  for (let i = 0; i < projectsData.length; i++) {
+    const projects = projectsData[i];
+    // Récupération de l'élément du DOM qui accueillera les projets
+    const sectionProjets = document.querySelector(".gallery");
+
+    //création d'une balise dédié à un projet
+    const figureElement = document.createElement("figure");
+    // on crée l'élément image
+    const imageElement = document.createElement("img");
+    // on accède à l'indice i de la liste des projets pour configurer la source et l'alternative
+    imageElement.src = projects.imageUrl;
+    imageElement.alt = projects.title;
+    // on crée le figcaption
+    const figcaptionElement = document.createElement("figcaption");
+    figcaptionElement.innerText = projects.title;
+
+    // on rattache notre figure à notre section
+    sectionProjets.appendChild(figureElement);
+    // on rattache notre image à notre figure
+    figureElement.appendChild(imageElement);
+    // on rattache notre figcaption à notre figure
+    figureElement.appendChild(figcaptionElement);
+  }
+}
+
+window.addEventListener("load", fetchProjects);
+
+//  Etape 1.2  Réalisation du filtre
+
+// les 3 catégories se trouvent dans l'API donc nouveau fetch
+
+// async function getCategories() {
+//   await fetch("http://localhost:5678/api/categories")
+//     .then((data) => data.json())
+//     .then((categories) => {
+//       let categoriesSet = new Set();
+//       categories.map((category) => {
+//         categoriesSet.add(category);
+//       });
+//       // console.log(categoriesSet);
+//       return categoriesSet;
+//     });
+// }
+
+// // afficher les boutons pour le filtre
+
+// function buttonDisplay(categoriesData) {
+//   for (let i = 0; i < categoriesData.length; i++) {
+//     const category = categoriesData[i];
+//     // Récupération de l'élément du DOM qui accueillera les projets
+//     const button = document.getElementById("button");
+//     console.log(button);
+//   }
+// }
+
+// getCategories();
+
+// Créer les 4 boutons avec createElement
+
+//récupération de l'élément du Dom
+const button = document.querySelector(".button");
+//création du button Tous
+const tous = document.createElement("button");
+tous.className = "categorie-button";
+tous.id = "buttonTous";
+tous.innerText = "Tous";
+//création du button Objets
+const objects = document.createElement("button");
+objects.className = "categorie-button";
+objects.id = "buttonObjects";
+objects.innerText = "Objects";
+//création du button Appartements
+const appartements = document.createElement("button");
+appartements.className = "categorie-button";
+appartements.id = "buttonAppartements";
+appartements.innerText = "Appartements";
+//création du button Hôtels et restaurants
+const hotelsRestaurants = document.createElement("button");
+hotelsRestaurants.className = "categorie-button";
+hotelsRestaurants.id = "buttonHotelsRestaurants";
+hotelsRestaurants.innerText = "Hôtel & restaurants";
+
+//on rattache notre élément
+button.appendChild(tous);
+button.appendChild(objects);
+button.appendChild(appartements);
+button.appendChild(hotelsRestaurants);
+
+//créée un evenement au clic pour trier avec display
+// On retrouve la catégorie avec l'API "projectDisplay" : category.id
+
+// test1
+
+const buttons = document.querySelectorAll(".categorie-button");
+
+buttons.forEach((button) => {
+  button.addEventListener("click", () => {});
+});
+
+//test 2
+// buttonTous.addEventListener("click", () => {
+//   buttonTous.style.background = "#1D6154";
+//   buttonTous.style.color = "white";
+// });
diff --git a/FrontEnd/main.js b/FrontEnd/main.js
new file mode 100644
index 000000000..93a8bfc86
--- /dev/null
+++ b/FrontEnd/main.js
@@ -0,0 +1,15 @@
+import ApiDataProvider from "./ApiDataProvider.js";
+import CardBuilder from "./CardBuilder.js";
+import EventListener from "./EventListener.js";
+
+const cardBuilder = new CardBuilder();
+const dataProvider = new ApiDataProvider();
+const event = new EventListener();
+event.dispatch();
+
+dataProvider.getCategories.then((categories) => {
+  cardBuilder.displayCategories(categories);
+});
+dataProvider.getProjects.then((projects) => {
+  cardBuilder.displayProjects(projects);
+});