├── .browserslistrc
├── .eslintrc.js
├── .github
    └── workflows
    │   └── github-actions-demo.yml
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── Banner.vue
    │   ├── Footer.vue
    │   ├── HelloWorld.vue
    │   ├── NavBar.vue
    │   ├── OriginalsRow.vue
    │   └── Row.vue
    ├── main.js
    ├── plugins
    │   ├── axios.js
    │   └── vuetify.js
    ├── requests.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── About.vue
    │   └── Home.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
 7 |   parserOptions: {
 8 |     parser: "babel-eslint"
 9 |   },
10 |   rules: {
11 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
12 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/.github/workflows/github-actions-demo.yml:
--------------------------------------------------------------------------------
 1 | name: GitHub Actions Demo
 2 | on: [push]
 3 | jobs:
 4 |   Explore-GitHub-Actions:
 5 |     runs-on: ubuntu-latest
 6 |     steps:
 7 |       - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
 8 |       - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
 9 |       - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
10 |       - name: Check out repository code
11 |         uses: actions/checkout@v2
12 |       - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
13 |       - run: echo "🖥️ The workflow is now ready to test your code on the runner."
14 |       - name: List files in the repository
15 |         run: |
16 |           ls ${{ github.workspace }}
17 |       - run: echo "🍏 This job's status is ${{ job.status }}."
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vueflix
 2 | A One page Netflix simple clone built with Vuejs and Vuetify.
 3 | 
 4 | You can demo [here](http://vueflix.vercel.app/) and preview a trailer by clicking on a video then wait a little for it to be displayed.
 5 | 
 6 | ## Getting started
 7 | 
 8 | 1. Clone this repo using `git clone git@github.com:neymarjimoh/vueflix.git`
 9 | 2. Move yourself to the appropriate directory: `cd vueflix`<br />
10 | 3. Run `npm install` to install dependencies<br />
11 | 
12 | ## Project setup
13 | ```
14 | npm install
15 | ```
16 | 
17 | ### Compiles and hot-reloads for development
18 | ```
19 | npm run serve
20 | ```
21 | 
22 | ### Compiles and minifies for production
23 | ```
24 | npm run build
25 | ```
26 | 
27 | ### Lints and fixes files
28 | ```
29 | npm run lint
30 | ```
31 | 
32 | ### Customize configuration
33 | See [Configuration Reference](https://cli.vuejs.org/config/).
34 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueflix",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.20.0",
12 |     "core-js": "^3.6.5",
13 |     "get-youtube-id": "^1.0.1",
14 |     "movie-trailer": "^2.0.6",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vue-youtube": "^1.4.0",
18 |     "vuetify": "^2.2.11",
19 |     "vuex": "^3.4.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-plugin-router": "~4.5.0",
25 |     "@vue/cli-plugin-vuex": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "@vue/eslint-config-prettier": "^6.0.0",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-prettier": "^3.1.3",
31 |     "eslint-plugin-vue": "^6.2.2",
32 |     "prettier": "^1.19.1",
33 |     "sass": "^1.19.0",
34 |     "sass-loader": "^8.0.0",
35 |     "vue-cli-plugin-vuetify": "~2.0.7",
36 |     "vue-template-compiler": "^2.6.11",
37 |     "vuetify-loader": "^1.3.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neymarjimoh/vueflix/e54e486f81daca598af829bae2e908838d2d15a2/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app class="app-container">
 3 |     <NavBar />
 4 | 
 5 |     <v-main>
 6 |       <router-view></router-view>
 7 |     </v-main>
 8 |     <Footer />
 9 |   </v-app>
10 | </template>
11 | 
12 | <script>
13 | import NavBar from "./components/NavBar.vue";
14 | import Footer from "./components/Footer.vue";
15 | 
16 | export default {
17 |   name: "App",
18 | 
19 |   components: {
20 |     NavBar,
21 |     Footer,
22 |   },
23 | 
24 |   data: () => ({
25 |     //
26 |   }),
27 | };
28 | </script>
29 | 
30 | <style>
31 | * {
32 |   margin: 0;
33 |   padding: 0;
34 |   /**background-color: #111; **/
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neymarjimoh/vueflix/e54e486f81daca598af829bae2e908838d2d15a2/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/Banner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ma-0">
  3 |     <header class="banner" :style="headerStyle">
  4 |       <div class="banner__contents">
  5 |         <h1 class="banner__title">{{ bannerTitle }}</h1>
  6 |         <div class="banner__buttons">
  7 |           <button class="banner__button rounded-0">Play</button>
  8 |           <button class="banner__button rounded-0">My List</button>
  9 |         </div>
 10 |         <p class="banner__description">{{ truncateOverview }}</p>
 11 |       </div>
 12 |       <div class="banner__fadeBottom" />
 13 |     </header>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import axios from "../plugins/axios";
 19 | import requests from "../requests";
 20 | 
 21 | export default {
 22 |   data() {
 23 |     return {
 24 |       showLoading: true,
 25 |       movie: {},
 26 |       size: "cover",
 27 |       position: "center center",
 28 |       image: "",
 29 |     };
 30 |   },
 31 |   async mounted() {
 32 |     this.showLoading = true;
 33 |     try {
 34 |       const response = await axios.get(requests.fetchNetflixOriginals);
 35 |       const { results } = response.data;
 36 |       const movieIndex = Math.floor(Math.random() * results.length - 1);
 37 |       this.movie = results[movieIndex];
 38 |       this.image = results[movieIndex]?.backdrop_path;
 39 |       console.log("image here", this.image);
 40 |     } catch (error) {
 41 |       console.error(error);
 42 |     } finally {
 43 |       this.showLoading = false;
 44 |     }
 45 |   },
 46 |   computed: {
 47 |     truncateOverview: function() {
 48 |       let n = 150;
 49 |       const movieOverview = this.movie?.overview;
 50 |       return movieOverview?.length > n
 51 |         ? movieOverview.substr(0, n - 1) + "..."
 52 |         : movieOverview;
 53 |     },
 54 |     bannerTitle: function() {
 55 |       return this.movie?.title || this.movie?.name || this.movie?.original_name;
 56 |     },
 57 |     headerStyle: function() {
 58 |       return {
 59 |         backgroundSize: this.size,
 60 |         backgroundPosition: this.position,
 61 |         backgroundImage: `url("https://image.tmdb.org/t/p/original/${this.image}")`,
 62 |       };
 63 |     },
 64 |   },
 65 | };
 66 | </script>
 67 | 
 68 | <style scoped>
 69 | .banner {
 70 |   color: white;
 71 |   object-fit: contain;
 72 |   height: 448px;
 73 |   width: 100%;
 74 | }
 75 | 
 76 | .banner__contents {
 77 |   margin-left: 30px;
 78 |   padding-top: 100px;
 79 |   height: 190px;
 80 | }
 81 | 
 82 | .banner__title {
 83 |   font-size: 3rem;
 84 |   font-weight: 800;
 85 |   padding-bottom: 0.3rem;
 86 | }
 87 | 
 88 | .banner__description {
 89 |   width: 45rem;
 90 |   margin-top: 1rem;
 91 |   line-height: 1.5;
 92 |   padding-top: 1rem;
 93 |   font-size: 0.9rem;
 94 |   max-width: 360px;
 95 |   height: 80px;
 96 | }
 97 | 
 98 | .banner__button {
 99 |   cursor: pointer;
100 |   color: white;
101 |   outline: none;
102 |   border: none;
103 |   font-weight: 700;
104 |   border-radius: 0.2vw;
105 |   padding-left: 2rem;
106 |   padding-right: 2rem;
107 |   margin-right: 1rem;
108 |   padding-top: 0.5rem;
109 |   background-color: rgb(51, 51, 51, 0.5);
110 |   padding-bottom: 0.5rem;
111 | }
112 | 
113 | .banner__button:hover {
114 |   color: #000;
115 |   background-color: #e6e6e6;
116 |   transition: all 0.2s;
117 | }
118 | /** .banner__fadeBottom {
119 |   height: 15rem;
120 |   background-image: linear-gradient(
121 |     180deg,
122 |     transparent,
123 |     rgba(37, 37, 37, 0.61),
124 |     #111
125 |   );
126 | } **/
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card height="70" class="mt-0">
 3 |     <v-footer dark absolute class="font-weight-normal">
 4 |       <v-col class="text-center" cols="12">
 5 |         &copy; {{ new Date().getFullYear() }} — Made with
 6 |         <v-btn class="ml-1" text icon color="pink">
 7 |           <v-icon>mdi-heart</v-icon>
 8 |         </v-btn>
 9 |         <span class="ml-1 footer__username">by <strong>Jimmy</strong></span>
10 |       </v-col>
11 |     </v-footer>
12 |   </v-card>
13 | </template>
14 | 
15 | <script>
16 | export default {};
17 | </script>
18 | 
19 | <style scoped>
20 | a:-webkit-any-link {
21 |   text-decoration: none;
22 | }
23 | .footer__username {
24 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <!--    <v-row class="text-center">
 4 |       <v-col cols="12">
 5 |         <v-img
 6 |           :src="require('../assets/logo.svg')"
 7 |           class="my-3"
 8 |           contain
 9 |           height="200"
10 |         />
11 |       </v-col>
12 | 
13 |       <v-col class="mb-4">
14 |         <h1 class="display-2 font-weight-bold mb-3">
15 |           Welcome to Vuetify
16 |         </h1>
17 | 
18 |         <p class="subheading font-weight-regular">
19 |           For help and collaboration with other Vuetify developers,
20 |           <br />please join our online
21 |           <a href="https://community.vuetifyjs.com" target="_blank"
22 |             >Discord Community</a
23 |           >
24 |         </p>
25 |       </v-col>
26 | 
27 |       <v-col class="mb-5" cols="12">
28 |         <h2 class="headline font-weight-bold mb-3">
29 |           What's next?
30 |         </h2>
31 | 
32 |         <v-row justify="center">
33 |           <a
34 |             v-for="(next, i) in whatsNext"
35 |             :key="i"
36 |             :href="next.href"
37 |             class="subheading mx-3"
38 |             target="_blank"
39 |           >
40 |             {{ next.text }}
41 |           </a>
42 |         </v-row>
43 |       </v-col>
44 |     </v-row> -->
45 |   </v-container>
46 | </template>
47 | 
48 | <script>
49 | export default {
50 |   name: "HelloWorld",
51 | 
52 |   data: () => ({}),
53 | };
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-app-bar color="#111" dark elevate-on-scroll fixed>
 4 |       <div class="d-flex align-center">
 5 |         <v-img
 6 |           alt="Vuetify Logo"
 7 |           class="shrink mr-2"
 8 |           contain
 9 |           min-width="100"
10 |           src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
11 |           transition="scale-transition"
12 |           width="120"
13 |         />
14 |       </div>
15 | 
16 |       <v-spacer></v-spacer>
17 | 
18 |       <v-btn
19 |         href="https://github.com/neymarjimoh/vueflix"
20 |         target="_blank"
21 |         text
22 |       >
23 |         <span class="mr-2">Latest Release</span>
24 |         <v-icon>mdi-open-in-new</v-icon>
25 |       </v-btn>
26 |     </v-app-bar>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   data: () => ({
33 |     showBlack: false,
34 |   }),
35 | };
36 | </script>
37 | 
38 | <style scoped>
39 | a:-webkit-any-link {
40 |   text-decoration: none;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/OriginalsRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="white--text">
 3 |     <h2 class="font-weight-medium mb-3 mt-4 pa-5">NETFLIX ORIGINALS</h2>
 4 |     <v-slide-group
 5 |       v-model="model"
 6 |       active-class="success"
 7 |       prev-icon="mdi-minus"
 8 |       next-icon="mdi-plus"
 9 |       show-arrows
10 |       dark
11 |       width="100%"
12 |     >
13 |       <v-slide-item
14 |         v-for="movie in movies"
15 |         :key="movie.id"
16 |         v-slot:default="{ active, toggle }"
17 |       >
18 |         <v-hover v-slot:default="{ hover }">
19 |           <v-card
20 |             :elevation="hover ? 12 : 0"
21 |             :color="active ? undefined : 'grey lighten-1'"
22 |             class="mr-3"
23 |             :class="{ 'on-hover': hover }"
24 |             height="100%"
25 |             width="110"
26 |             @click="toggle"
27 |           >
28 |             <v-img
29 |               :src="base_url + movie.poster_path"
30 |               aspect-ratio="1"
31 |               class=""
32 |               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
33 |               height="200px"
34 |             >
35 |               <template v-slot:placeholder>
36 |                 <v-row class="fill-height ma-0" align="center" justify="center">
37 |                   <v-progress-circular
38 |                     indeterminate
39 |                     color="grey lighten-5"
40 |                   ></v-progress-circular>
41 |                 </v-row>
42 |               </template>
43 |             </v-img>
44 |           </v-card>
45 |         </v-hover>
46 |       </v-slide-item>
47 |     </v-slide-group>
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | import axios from "../plugins/axios";
53 | import requests from "../requests";
54 | 
55 | export default {
56 |   data: () => ({
57 |     model: null,
58 |     movies: [],
59 |     showLoading: true,
60 |     base_url: "https://image.tmdb.org/t/p/original/",
61 |   }),
62 |   async mounted() {
63 |     this.showLoading = true;
64 |     try {
65 |       const response = await axios.get(requests.fetchNetflixOriginals);
66 |       this.movies = response.data.results;
67 |     } catch (error) {
68 |       console.error(error);
69 |     } finally {
70 |       this.showLoading = false;
71 |     }
72 |   },
73 |   methods: {},
74 | };
75 | </script>
76 | 
77 | <style scoped>
78 | .v-img {
79 |   object-fit: contain;
80 | }
81 | .v-card {
82 |   transition: opacity 0.4s ease-in-out;
83 | }
84 | 
85 | .v-card:not(.on-hover) {
86 |   opacity: 0.8;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/Row.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="white--text">
  3 |     <h2 class="mt-6 font-weight-medium mb-4 pa-2 ml-5">{{ title }}</h2>
  4 |     <v-slide-group
  5 |       v-model="model"
  6 |       active-class="success"
  7 |       show-arrows
  8 |       dark
  9 |       width="100%"
 10 |     >
 11 |       <v-slide-item
 12 |         v-for="movie in movies"
 13 |         :key="movie.id"
 14 |         v-slot:default="{ active, toggle }"
 15 |       >
 16 |         <v-hover v-slot:default="{ hover }">
 17 |           <v-card
 18 |             :elevation="hover ? 12 : 0"
 19 |             :color="active ? undefined : 'grey lighten-5'"
 20 |             class="mr-3 rounded-0"
 21 |             :class="{ 'on-hover': hover }"
 22 |             height="85"
 23 |             width="120"
 24 |             @click="toggle"
 25 |           >
 26 |             <v-img
 27 |               :src="base_url + movie.poster_path"
 28 |               @click="handleClick(movie)"
 29 |               aspect-ratio="1"
 30 |               class=""
 31 |               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
 32 |               height="200px"
 33 |             >
 34 |               <template v-slot:placeholder>
 35 |                 <v-row class="fill-height ma-0" align="center" justify="center">
 36 |                   <v-progress-circular
 37 |                     indeterminate
 38 |                     color="grey lighten-5"
 39 |                   ></v-progress-circular>
 40 |                 </v-row>
 41 |               </template>
 42 |             </v-img>
 43 |           </v-card>
 44 |         </v-hover>
 45 |       </v-slide-item>
 46 |     </v-slide-group>
 47 |     <youtube
 48 |       width="100%"
 49 |       height="230"
 50 |       v-if="videoId"
 51 |       :video-id="videoId"
 52 |       :player-vars="playerVars"
 53 |       @playing="playing"
 54 |     ></youtube>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script>
 59 | import axios from "../plugins/axios";
 60 | import movieTrailer from "movie-trailer";
 61 | import getYouTubeID from "get-youtube-id";
 62 | 
 63 | export default {
 64 |   props: {
 65 |     title: {
 66 |       type: String,
 67 |       required: true,
 68 |     },
 69 |     fetchUrl: String,
 70 |   },
 71 |   data: () => ({
 72 |     model: null,
 73 |     movies: [],
 74 |     showLoading: true,
 75 |     base_url: "https://image.tmdb.org/t/p/original/",
 76 |     videoId: "",
 77 |     playerVars: {
 78 |       autoplay: 1,
 79 |     },
 80 |   }),
 81 |   async mounted() {
 82 |     this.showLoading = true;
 83 |     try {
 84 |       const response = await axios.get(this.fetchUrl);
 85 |       this.movies = response.data.results;
 86 |     } catch (error) {
 87 |       console.error(error);
 88 |     } finally {
 89 |       this.showLoading = false;
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     handleClick(movie) {
 94 |       console.log("movie title", movie?.title);
 95 |       if (this.videoId) {
 96 |         this.videoId = "";
 97 |       } else {
 98 |         movieTrailer(movie?.title || "")
 99 |           .then((res) => {
100 |             this.videoId = getYouTubeID(res);
101 |             console.log("video id", this.videoId);
102 |           })
103 |           .catch((err) => console.error(err));
104 |       }
105 |     },
106 |     playing() {
107 |       console.log("we are watching!!!");
108 |     },
109 |   },
110 | };
111 | </script>
112 | 
113 | <style scoped>
114 | .v-img {
115 |   object-fit: contain;
116 | }
117 | .v-card {
118 |   transition: opacity 0.4s ease-in-out;
119 | }
120 | .v-card:not(.on-hover) {
121 |   opacity: 0.8;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueYoutube from "vue-youtube";
 3 | import App from "./App.vue";
 4 | import router from "./router";
 5 | import store from "./store";
 6 | import vuetify from "./plugins/vuetify";
 7 | 
 8 | Vue.use(VueYoutube);
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   vuetify,
16 |   render: (h) => h(App),
17 | }).$mount("#app");
18 | 


--------------------------------------------------------------------------------
/src/plugins/axios.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | const instance = axios.create({
4 |   baseURL: "https://api.themoviedb.org/3",
5 | });
6 | 
7 | export default instance;
8 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import Vuetify from "vuetify/lib";
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({});
7 | 


--------------------------------------------------------------------------------
/src/requests.js:
--------------------------------------------------------------------------------
 1 | const API_KEY = "4b64010819576d144a45c521a686452c";
 2 | 
 3 | const requests = {
 4 |   fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
 5 |   fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
 6 |   fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
 7 |   fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
 8 |   fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
 9 |   fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
10 |   fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
11 |   fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,
12 | };
13 | 
14 | export default requests;
15 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "Home",
11 |     component: Home
12 |   },
13 |   {
14 |     path: "/about",
15 |     name: "About",
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () =>
20 |       import(/* webpackChunkName: "about" */ "../views/About.vue")
21 |   }
22 | ];
23 | 
24 | const router = new VueRouter({
25 |   mode: "history",
26 |   base: process.env.BASE_URL,
27 |   routes
28 | });
29 | 
30 | export default router;
31 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {},
10 |   modules: {}
11 | });
12 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container fluid class="home__container">
 3 |     <Banner />
 4 |     <OriginalsRow />
 5 |     <Row title="Trending Videos" :fetchUrl="requests.fetchTrending" />
 6 |     <Row title="Top Rated" :fetchUrl="requests.fetchTopRated" />
 7 |     <Row title="Action Movies" :fetchUrl="requests.fetchActionMovies" />
 8 |     <Row title="Comedy Movies" :fetchUrl="requests.fetchComedyMovies" />
 9 |     <Row title="Horror Movies" :fetchUrl="requests.fetchHorrorMovies" />
10 |     <Row title="Romance Movies" :fetchUrl="requests.fetchRomanceMovies" />
11 |     <Row title="Documentaries" :fetchUrl="requests.fetchDocumentaries" />
12 |   </v-container>
13 | </template>
14 | 
15 | <script>
16 | // @ is an alias to /src
17 | import Row from "@/components/Row.vue";
18 | import OriginalsRow from "@/components/OriginalsRow.vue";
19 | import Banner from "@/components/Banner.vue";
20 | import requests from "../requests";
21 | 
22 | export default {
23 |   name: "Home",
24 |   data() {
25 |     return {
26 |       requests,
27 |     };
28 |   },
29 |   components: {
30 |     Row,
31 |     OriginalsRow,
32 |     Banner,
33 |   },
34 | };
35 | </script>
36 | 
37 | <style scoped>
38 | .home__container {
39 |   background-color: #111;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: ["vuetify"]
3 | };
4 | 


--------------------------------------------------------------------------------