Home > Article > Web Front-end > Netflix Clone to Level Up Your Frontend Skills
As a developer primarily focused on backend, I've always felt that my frontend skills could use some polishing. To test this, I decided to challenge myself by building a Netflix clone using Vue.js 3 and Vite. In this article, I'll break down the project structure, key components, and share my learning experience.
The goal was to create a responsive web application that mimics the core features of Netflix's user interface. Here's what I initially set out to build:
More to be added in the future.
For this project, I chose the following tools:
Here's an overview of the project structure:
netflix-clone/ ├── src/ │ ├── components/ │ │ ├── MovieCard.vue │ │ ├── MovieList.vue │ │ ├── MovieRow.vue │ │ └── NavBar.vue │ ├── views/ │ │ ├── HomeView.vue │ │ ├── MovieDetailView.vue │ │ └── SearchView.vue │ ├── router/ │ │ └── index.js │ ├── services/ │ │ └── tmdb.js │ ├── stores/ │ │ └── movies.js │ ├── App.vue │ └── main.js ├── .env.example ├── vite.config.js └── package.json
This component represents an individual movie. It displays the movie poster and, on hover, shows additional information like the title, rating, and release year.
<template> <div class="movie-card"> <img :src="posterUrl" :alt="Netflix Clone to Level Up Your Frontend Skills" true :class="{ 'loaded': imageLoaded }"> <div v-if="isHovered" class="movie-info"> <h3>{{ Netflix Clone to Level Up Your Frontend Skills }}</h3> <p>Rating: {{ movie.vote_average }}/10</p> <p>{{ releaseYear }}</p> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; const props = defineProps(['movie']); const imageLoaded = ref(false); const isHovered = ref(false); const posterUrl = computed(() => `https://image.tmdb.org/t/p/w500${props.movie.poster_path}`); const releaseYear = computed(() => new Date(props.movie.release_date).getFullYear()); // ... hover logic </script>
Key learnings:
This component creates a horizontally scrollable row of movies, typically grouped by genre.
<template> <div class="movie-row"> <h2>{{ title }}</h2> <div class="movie-list" ref="movieList"> <moviecard v-for="movie in movies" :key="movie.id" :movie="movie"></moviecard> </div> <button class="scroll-btn left"><</button> <button @click="scroll('right')" class="scroll-btn right">></button> </div> </template> <script setup> import { ref } from 'vue'; import MovieCard from './MovieCard.vue'; const props = defineProps(['title', 'movies']); const movieList = ref(null); const scroll = (direction) => { const scrollAmount = direction === 'left' ? -300 : 300; movieList.value.scrollBy({ left: scrollAmount, behavior: 'smooth' }); }; </script> ### tmdb.js (API Service) This service handles all API calls to The Movie Database (TMDB) using Axios.
import axios from 'axios'; const API_KEY = import.meta.env.VITE_TMDB_API_KEY; const BASE_URL = 'https://api.themoviedb.org/3'; const tmdbApi = axios.create({ baseURL: BASE_URL, params: { api_key: API_KEY }, }); export const getTrending = () => tmdbApi.get('/trending/all/week'); export const getMoviesByGenre = (genreId) => tmdbApi.get('/discover/movie', { params: { with_genres: genreId } }); export const searchMovies = (query) => tmdbApi.get('/search/movie', { params: { query } });
The NavBar component provides navigation for the application and includes a search input for finding movies.
<template> <nav class="navbar"> <router-link to="/" class="navbar-brand">NetflixClone</router-link> <div class="navbar-links"> <router-link to="/">Home</router-link> <div class="search-container"> <input v-model="searchQuery" placeholder="Search movies..."> </div> </div> </nav> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; import debounce from 'lodash/debounce'; const router = useRouter(); const searchQuery = ref(''); const debounceSearch = debounce(() => { if (searchQuery.value) { router.push({ name: 'search', query: { q: searchQuery.value } }); } }, 300); </script>
The HomeView component serves as the main page of the application, displaying multiple MovieRow components with different genres.
<template> <div class="home-view"> <movierow title="Trending" :movies="trendingMovies"></movierow> <movierow v-for="genre in genres" :key="genre.id" :title="genre.name" :movies="moviesByGenre[genre.id]"></movierow> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import MovieRow from '@/components/MovieRow.vue'; import { getTrending, getGenres, getMoviesByGenre } from '@/services/tmdb'; const trendingMovies = ref([]); const genres = ref([]); const moviesByGenre = ref({}); onMounted(async () => { const [trendingResponse, genresResponse] = await Promise.all([ getTrending(), getGenres() ]); trendingMovies.value = trendingResponse.data.results; genres.value = genresResponse.data.genres.slice(0, 5); // Limit to 5 genres for this example for (const genre of genres.value) { const response = await getMoviesByGenre(genre.id); moviesByGenre.value[genre.id] = response.data.results; } }); </script>
The SearchView component displays search results based on the user's query.
<template> <div class="search-view"> <h2>Search Results for "{{ searchQuery }}"</h2> <div class="search-results"> <moviecard v-for="movie in searchResults" :key="movie.id" :movie="movie"></moviecard> </div> </div> </template> <script setup> import { ref, watch } from 'vue'; import { useRoute } from 'vue-router'; import MovieCard from '@/components/MovieCard.vue'; import { searchMovies } from '@/services/tmdb'; const route = useRoute(); const searchQuery = ref(''); const searchResults = ref([]); const performSearch = async () => { const response = await searchMovies(searchQuery.value); searchResults.value = response.data.results; }; watch(() => route.query.q, (newQuery) => { searchQuery.value = newQuery; performSearch(); }, { immediate: true }); </script>
You can find the full source code for this project on GitHub.
The above is the detailed content of Netflix Clone to Level Up Your Frontend Skills. For more information, please follow other related articles on the PHP Chinese website!