- Vue Apollo Netflix Clone is an enhanced version of my Vue Netflix Clone 1.0 project, introducing backend integration and user authentication to provide a more realistic experience.
- Demo: Link
You can sign up with any account you like or sign in with the demo account below:
-
Demo Account (sign-in): demo1@example.com
-
Password: 1234Demo
Home Page
Register (Invalid Email)
Register (Valid Email)
Register (Invalid password)
Register (Valid password)
Create multiple profiles in sign-up process
Choose profiles
Homepage
Movie Dialog
Bookmark movie
Change profile (no movie bookmarked in a different profile)
Edit profile name
-
Frontend
- Vue - A progressive JavaScript framework used for building user interfaces.
- Vue Router - The official router for Vue.js, used to manage navigation and routing within the application.
- Pinia - A state management library for Vue.js, serving as a modern alternative to Vuex.
- Vite - A fast development build tool that provides a lightning-fast development server with hot module replacement and optimized production builds.
-
Backend
- Node.js JavaScript runtime for executing server-side code.
- Express.js Used specifically for integrating Apollo Server with the Express middleware.
- Mongoose - Object Data Modeling (ODM) library for MongoDB and Node.js, providing a schema-based solution for managing application data.
-
GraphQL
- Apollo Server - Used to define the GraphQL schema, resolvers, and to serve the GraphQL API.
- Vue Apollo - Integration of Apollo Client with Vue.js to manage GraphQL queries and mutations, providing reactive data handling and caching.
-
API
- The Movie Database (TMDB) - Used to fetch movie details from The Movie Database.
-
Tools and Libraries
- Headless UI (Vue) - A completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
- Youtube Player API - YouTube iframe API abstraction.
- vueperslides - A touch ready and responsive slideshow / carousel for Vue 2 & 3.
- Prismic (Vue) - Vue plugin, components, and composables to fetch and present Prismic content
- Single page application web client with Vue 3 Composition API setup script & Pinia
- Input validation during sign-in and registration processes
- Implemented user authentication using JWT (JSON Web Tokens) for sign-ups and sign-ins, with password encryption via bcrypt for enhanced security
- Implemented middleware to protect routes, ensuring users must be signed in to access certain features (E.g. '/browse')
- MongoDB for user's database
- The webpage adapts to any screen size. (Mobile, tablet, desktop)
- Users can register and log in to their account
- Users can create multiple profiles in their account
- Users can select and view details of a movie
- Users can add or remove movie to his/her bookmark in different profile
- Users can see the list of saved movies in My List page
- Users can update the profiles name through the manage profiles in the menu
- Users can logout and sign-in to the same account
- Highlighted movie will play automatically after users sign in
- Users can mute/unmute the video
- Users can re-play the video after it ends
- Movie dialog displays movie details when users click on the movie card
- When a movie dialog is displayed, the highlighted movie will automatically pause. Once the dialog is closed, the highlighted movie will resume playing.
- Search Functionality: A searchbar to search through movies in TMDB database
- Movie feature: Ability to play movies in full screen mode
- Account feature: Implementing a "Forgot Password" feature or update password
- Account deletion: Ability to delete their account
-
If you don't have pnpm installed globally, you can install it using the following command:
npm install -g pnpm -
For more detailed installation instructions and alternative methods, please visit the official pnpm installation guide.
-
.env files is required for setting up environment variables for this project
| Tools | Versions |
|---|---|
| pnpm | 8.5.0 |
| nodejs | 10.7.0 |
-
Navigate to the
./backenddirectory and create the .env file -
Modify MONGO_PASSWORD with the password for your MongoDB user and MONGODB_CONNECTION_STRING with the connection string provided by MongoDB.
NODE_ENV=development PORT=8080 AUTH_TENANT_NAME=netflix-clone-auth APOLLO_GRAPHQL_SECRET=netflix-clone MONGODB_PASSWORD= MONGODB_CONNECTION_STRING=
-
Navigate to the
./frontenddirectory and create the .env file -
Modify VUE_APP_TMDB_API_KEY with the API key provided by your TMDB account.
VUE_APP_TMDB_API_KEY= VUE_APP_TMDB_BASE_URL=https://api.themoviedb.org/3 VUE_APP_AUTH_SERVER_BASE_URL=http://localhost:8080/auth VUE_APP_APOLLO_SERVER_BASE_URL=http://localhost:8080/graphql VUE_APP_APOLLO_SERVER_WS_URL=wss://localhost:8080/graphql VUE_APP_APOLLO_GRAPHQL_SECRET=netflix-clone
-
install dependencies & start Web-Server
cd backend pnpm install pnpm dev
Application will be serving on :
- Authentication Endpoint: http://localhost:8080/auth
- GraphQL Endpoint: http://localhost:8080/graphql
-
install dependencies & start application
cd frontend pnpm install pnpm dev
Application will be serving on http://localhost:5173
- Not setup yet
This project uses data from The Movie Database (TMDB) API. Full credit for the API data goes to TMDB.
Please feel free to create a pull request and submit any issues !