first commit

frontend/src/components/Movie.vue

+<template>
+  <div>
+    <p>
+      <img
+        height="400"
+        :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+      />
+    </p>
+    <p>{{ movie.title }}</p>
+    <p>{{ movie.release_date }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    movie: Array,
+  },
+};
+</script>
+
+<style scoped>
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid #000000;
+  padding: 10px;
+}
+</style>

frontend/src/views/Home.vue

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
-    <h1>Welcome to Your Vue.js App</h1>
+    <h1>Welcome to Movie Website</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the
       <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
     </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank">vue-router</a>
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a>
-      </li>
-      <li>
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
+    <p>
+      <input
+        v-model="movieName"
+        placeholder="Type any movie here"
+        type="text"
+      />
+    </p>
+    <div>Nom du film: {{ movieName }}</div>
+    <div class="parent">
+      <tr v-for="movie in movies" :key="movie.id">
+        <Movie class="child" :movie="movie" />
+      </tr>
+    </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+import Movie from "@/components/Movie";
+
 export default {
   name: "Home",
+  components: {
+    Movie,
+  },
+  data: function () {
+    return {
+      movieName: "",
+      movies: [],
+      moviesLoadingError: "",
+    };
+  },
+  methods: {
+    fetchMovies: function () {
+      axios
+        .get(
+          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+        )
+        .then((response) => {
+          // Do something if call succeeded
+          this.movies = response.data.results;
+          console.log(this.movies);
+        })
+        .catch((error) => {
+          // Do something if call failed
+          this.usersLoadingError = "An error occured while fetching movies.";
+          console.error(error);
+        });
+    },
+    fetchMoviesAsync: async function () {
+      try {
+        // Do something if call succeeded
+        const response = await axios.get(
+          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+        );
+        await (this.movies = response.data.results);
+        console.log(this.movies);
+      } catch (error) {
+        // Do something if call failed
+        this.usersLoadingError = "An error occured while fetching movies.";
+        console.error(error);
+      }
+    },
+  },
+  created() {
+    console.log("Hello World");
+    this.fetchMoviesAsync();
+  },
 };
 </script>
 
@@ -88,6 +84,17 @@ export default {
   text-align: center;
 }
 
+.parent {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 250px;
+}
+
+.child {
+  width: 40%;
+  height: 40%;
+}
+
 h3 {
   margin: 40px 0 0;
 }