start to work with back

backend/routes/genres.js

@@ -4,17 +4,14 @@ const router = express.Router();
 
 module.exports = router;
 
-// router.get("/popular/:number", async function (req, res) {
-//   try {
-//     const filmNumber = await req.params["number"];
-//     const getGenres = await GenreModel.find({})
-//       .sort({ popularity: "desc" })
-//       .limit(filmNumber);
-//     res.send(getGenres);
-//   } catch (error) {
-//     console.log(error);
-//   }
-// });
+router.get("/", async function (req, res) {
+  try {
+    const getGenres = await GenreModel.find({});
+    res.send(getGenres);
+  } catch (error) {
+    console.log(error);
+  }
+});
 
 router.get("/genre/id/:id", async function (req, res) {
   try {

backend/routes/movies.js

@@ -4,17 +4,18 @@ const router = express.Router();
 
 module.exports = router;
 
-// router.get("/popular/:number", async function (req, res) {
-//   try {
-//     const filmNumber = await req.params["number"];
-//     const getMovies = await MovieModel.find({})
-//       .sort({ popularity: "desc" })
-//       .limit(filmNumber);
-//     res.send(getMovies);
-//   } catch (error) {
-//     console.log(error);
-//   }
-// });
+router.get("/popular/:number", async function (req, res) {
+  try {
+    console.log('yo')
+    const filmNumber = await req.params["number"];
+    const getMovies = await MovieModel.find({})
+      .sort({ popularity: "desc" })
+      .limit(filmNumber);
+    res.send(getMovies);
+  } catch (error) {
+    console.log(error);
+  }
+});
 
 router.get("/movie/id/:id", async function (req, res) {
   try {

frontend/src/components/MovieType.vue

 <template>
 <div class="box">
 <h1>Genre</h1>
+<li v-for="genre in genres" :key="genre.id">
 <div class="check">
 <input type="checkbox" id="action" value="Action" v-model="genre">
-<label for="Action">Action</label>
-</div>
-<div class="check">
-<input type="checkbox" id="horreur" value="Horreur" v-model="genre">
-<label for="horreur">Horreur</label>
-</div>
-<div class="check">
-<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
-<label for="fantastique">Fantastique</label>
+<label for="Action">{{ }}</label>
 </div>
 <br>
+</li>
 </div>
 </template>
 
 <script>
-
+export default {
+    methods: {
+        fetchGenres: function () {
+      axios
+        .get(
+           backendURL + "/genres/",
+        )
+        .then((response) => {
+          this.genres = response.data;
+        })
+        .catch((error) => {
+          this.genresLoadingError = "An error occured while e ing genres.";
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.fetchMovies();
+    this.fetchGenres();
+  },
+};
 </script>
 
 <style scoped>

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
 import Connexion from "../views/Connexion.vue";
 import Users from "../views/Users.vue";
 import AddUser from "../views/AddUsers.vue";
+import MoviePage from "../views/MoviePage.vue";
 
 const routes = [
   {
@@ -25,6 +26,11 @@ const routes = [
     name: "AddUsers",
     component: AddUser,
   },
+  {
+    path: "/movie/:id",
+    name: "MoviePage",
+    component: MoviePage,
+  },
 ];
 
 const router = createRouter({

frontend/src/views/Home.vue

 <template>
   <div class="home">
   <div class="carousel">
-      <carousel :items-to-show="5.5" autoplay="1300">
-        <slide
-          v-for="movie in movies"
-          :key="movie.id"
-          autoplay="True"
-          transition="100"
-        >
+   <carousel :items-to-show="5.5" autoplay=1300>
+    <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
+        <router-link :to="'/movie/'+ movie.id">
         <img
           :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
           withd="100"
           height="300"
         />
+        </router-link>
     </slide>
     <template #addons>
       <navigation />
@@ -25,10 +22,10 @@
   <div class="type">
     <MovieType />
   </div>
-      <div>
+  <div class="movie-affichage">
     <li v-for="movie in movies" :key="movie.id">
-          <p class="movie-title">
-            {{ movie.title }}
+      <p class="name">
+        <h5> {{ movie.title }}</h5>
       </p>
       <p class="film">
         <img
@@ -48,6 +45,8 @@ import axios from "axios";
 import "vue3-carousel/dist/carousel.css";
 import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
 import MovieType from "../components/MovieType.vue";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
 
 export default {
   name: "Home",
@@ -69,10 +68,10 @@ export default {
     fetchMovies: function () {
       axios
         .get(
-          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+           backendURL + "/movies/popular/20",
         )
         .then((response) => {
-          this.movies = response.data.results;
+          this.movies = response.data;
         })
         .catch((error) => {
           this.moviesLoadingError = "An error occured while e ing movies.";
@@ -114,6 +113,12 @@ li {
   display: flex;
   align-self: center;
 }
+.name {
+  max-width: 200px;
+  justify-content: center;
+  align-items: center;
+  background-color: #eaf2ef;
+}
 .corps {
   display: flex;
 }