Homepage(Search bar) + API Calls

nuxt/components/SearchInput.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <label>Type any movie title you want:</label>
+    <a-auto-complete
+      v-model="search"
+      :data-source="dataSource"
+      size="large"
+      style="width: 100%"
+      placeholder="Ex: Star Wars"
+      :allowClear="true"
+      :autoFocus="true"
+      not-found-content="0 Result"
+      :loading="fetching"
+      @select="onSelect"
+      @search="handleSearch"
+    >
+      <a-input-search enter-button size="large" />
+      <template slot="dataSource">
+        <a-select-option
+          v-for="(opt, index) in dataSource"
+          :key="index"
+          :label="opt.text"
+          :value="opt.value"
+        >
+          <div class="item-content">
+            <img class="item-thumbnail" :src="opt.poster" :alt="opt.text" />
+            <div class="item-infos">
+              {{ opt.text }}
+              <span>{{ opt.year }}</span>
+            </div>
+          </div>
+        </a-select-option>
+      </template>
+    </a-auto-complete>
+    <a-alert
+      v-if="!search || search.length < 3"
+      message="Type at least 3 letters."
+      banner
+    />
+  </div>
+</template>
+
+<script>
+import { groupBy } from "lodash";
+
+export default {
+  data() {
+    return {
+      search: "",
+      fetching: false,
+      dataSource: []
+    };
+  },
+  methods: {
+    async getMovies(value) {
+      if (value && value.length >= 3) {
+        this.fetching = true;
+
+        const result = await this.$axios.$get("", {
+          params: {
+            apikey: "a4bf96a7",
+            s: value,
+            type: "movie"
+          }
+        });
+
+        if (result.Response === "True") {
+          const data = result.Search.map(movie => ({
+            text: movie.Title,
+            value: movie.imdbID,
+            poster: movie.Poster,
+            year: movie.Year
+          }));
+
+          this.dataSource = data;
+          this.fetching = false;
+        } else if (result.Response === "False") {
+          this.dataSource = [];
+        }
+      }
+    },
+    handleSearch(value) {
+      this.getMovies(value);
+    },
+    handleChange(value) {
+      this.search = value;
+      this.getMovies(value);
+    },
+    onSelect(value) {
+      console.log(value);
+
+      //TODO: Fetch the selected Movies and redirect to result page
+    }
+  }
+};
+</script>
+
+<style>
+label {
+  display: inline-block;
+  color: #ffffff;
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.ant-select-selection__clear {
+  right: 64px;
+}
+
+.ant-select-dropdown-menu-item .item-content {
+  display: flex;
+  align-items: center;
+}
+
+.ant-select-dropdown-menu-item .item-content .item-thumbnail {
+  width: 55px;
+  margin-right: 12px;
+}
+
+.ant-select-dropdown-menu-item .item-content .item-infos span {
+  display: block;
+  font-size: 12px;
+  font-style: oblique;
+}
+</style>

nuxt/components/TheFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <a-layout-footer>
+    MovieFinder © 2020 | Made with
+    <span style="color: #e74c3c;">&#9829;</span> by Noé Viricel
+  </a-layout-footer>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.ant-layout-footer {
+  text-align: center;
+  background-color: #f0f2f5;
+}
+</style>

nuxt/components/TheHeader.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-layout-header>
+    <h1>
+      <Logo />
+      <span>MovieFinder</span>
+    </h1>
+    <h2>Get infos on latest movies / TV Shows</h2>
+  </a-layout-header>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.ant-layout-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 32px;
+}
+
+h1,
+h2 {
+  color: #ffffff;
+  margin-bottom: 0;
+}
+
+h1 {
+  display: flex;
+  align-items: center;
+}
+
+h2 {
+  font-size: 14px;
+}
+
+.NuxtLogo {
+  width: 48px;
+  height: 48px;
+  margin: 0 12px 0 0;
+}
+</style>

nuxt/layouts/default.vue

@@ -1,62 +1,5 @@
 <template>
-  <div>
-    <Nuxt />
-  </div>
+  <Nuxt />
 </template>
 
-<style>
-html {
-  font-family:
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
-</style>
+<style></style>

nuxt/nuxt.config.js

@@ -4,7 +4,7 @@ export default {
 
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    title: "movie-finder",
+    title: "MovieFinder",
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
@@ -33,7 +33,7 @@ export default {
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
   axios: {
-    baseURL: "http://localhost:3000"
+    baseURL: "http://www.omdbapi.com"
   },
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)

nuxt/package.json

@@ -15,6 +15,7 @@
     "@nuxtjs/axios": "^5.12.2",
     "ant-design-vue": "^1.6.5",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.20",
     "nuxt": "^2.14.5"
   },
   "devDependencies": {

nuxt/pages/index.vue

@@ -1,63 +1,29 @@
 <template>
-  <div class="container">
-    <div>
-      <Logo />
-      <h1 class="title">movie-finder</h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
-  </div>
+  <a-layout id="main">
+    <TheHeader />
+    <a-layout-content>
+      <a-row type="flex" align="middle" justify="center" style="height: 100%;">
+        <a-col :span="12">
+          <SearchInput />
+        </a-col>
+      </a-row>
+    </a-layout-content>
+    <TheFooter />
+  </a-layout>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
+<style scoped>
+#main {
+  height: 100vh;
+  width: 100%;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("~assets/background.jpg");
 }
 </style>