A responsive Netflix clone different from any other clone you will find on the internet.
.
About · Demo · Features · Challenges · Tools & Technologies · Screenshots · Getting Started · Requirements · License ·
desktopExperience.mp4
mobileExperience.mp4
Conflix is an extremely responsive Netflix clone built using MERN. I created this project to learn more about the MERN stack technology and to solidify my knowledge of best design and development practices.
I'm a professional designer/animator who has found his way into web development and this creative side of me tends to ensure that every design detail in development is represented accurately and properly.
This project is completely built from scratch without following any tutorial or copying any code abstraction from a similar base. It is 100% original, with the exception of the Conflix intro animation which is a modification of a Codepen by Claudio Bonfati.
I added the ability to play some trailers at least, to give it the feel of a proper streaming service. I've also made improvements by adding micro-interactions and minimal page route transitions.
Most of the animations in this project were created using pure CSS, with a few exceptions that were made using Framer-motion.
I've put a great deal of work into this project, over 3 months and 2 weeks and I hope you'll like it as much as I do.
I would appreciate it if you could give this project a star, as a sign of encouragement. It will mean everything to know someone finds this project useful 😇.
Here you can find the demo link:
I've added a "signin as a guest" button for lazy users like me 😊. You don't need to signup to test the features of Conflix.
There are a few restrictions attached to the guest account.
- Guest account cannot delete the guest & kids sub-profile.
- Guest account can add and edit other sub-profiles but cannot edit the guest & kids sub-profile.
✔️ Responsive layout.
✔️ Guest sign-in.
✔️ Restriction on guest account.
✔️ User signup, sign-in, and logout.
✔️ Create up to 5 sub-profile accounts.
✔️ Edit and delete sub-profile accounts
✔️ New Users have a kid sub-profile included by default.
✔️ Select profile pictures from up to 3 specialized categories of profile icons.
✔️ Browse movies by categories.
✔️ Navigate pages by movie type (Movies, TV shows).
✔️ Kids-only content when you switch to the kids sub-profile.
✔️ Top 10 movies or TV shows in your country using Geolocation API.
✔️ Micro-interactions and minimal page transitions (pure CSS and Framer-motion).
✔️ Ability to play movie trailers.
✔️ Pause/mute movie trailers.
✔️ Play customized Conflix "C" intro animation (credits: Claudio Bonfati's pen) with characteristic Netflix sound.
✔️ Autoplay hero movie trailers on-load when on PC.
✔️ Movie trailers autoplay when hovering over the movie scroll element.
✔️ Infinite scroll implementation with scroll location indicator.
✔️ Swipeable scroll on mobile.
✔️ Special modal to show movie or series details.
✔️ Movies have dynamic ratings to determine if it's 18+ or for kids.
✔️ Add/remove movies from the Mylist category.
✔️ Favourite list persistence (session storage)
✔️ Search movies by title, actors or genres.
✔️ Loading skeleton.
My biggest challenge was the task I initially thought would be the easiest: the infinite scroll with the movie detail modal.
When I was mapping out tasks for the project, I brushed off the scroll task as something that would take a few minutes, but I was so wrong. This scroll feature isn't just any regular scroll implementation, it had to have some specialized features.
These features include:
🟥 Infinite scroll that moves by a particular scroll amount.
🟥 Special modal that centrally overlays the element it highlights.
🟥 Play the available trailer video when hovering over the modal.
🟥 Detect if a scroll element is in the extreme right or left position.
🟥 Expand the modal from the right or left with micro-interactions (depending on the scroll element's position).
🟥 Detect if a movie is favourited, and dynamically render the appropriate add or remove button.
🟥 Collapse the modal from the right or left with micro-interactions (depending on the scroll element's position).
-
Adobe Illustrator for creating custom SVG files.
-
Adobe Photoshop for the movie strip background on the landing page.
-
Netlify and Vercel for the deployment and CI of the client-side.
-
Koyeb for the deployment and CI of the server side.
Landing Page_Desktop_View
SignUp Page_Desktop_View
SignIn Page_Desktop_View
Profile Page_Desktop_View
Add Profile_Desktop_View
Manage Profile_Desktop_View
Select Profile Icon_Desktop_View
Home Page_Desktop_View
Top 10 Category in your country_Desktop_View
Movie Detail_Desktop_View
Kids Only_Desktop_View
Error Page_Desktop_View
- Clone the project
git clone https://github.com/Charlesxstorm/Conflix- Go to the project client directory
cd conflix/client- Install dependencies
npm install-
Create a .env file at the root of the client directory.
-
Request an API key from TMDB and add the following to the .env file
VITE_TMDB_AUTH = **TMDB_API_KEY**
VITE_TMDB_URL = https://api.themoviedb.org/3
- Go to the JWT website
- In the "payload" section, add the following JSON.
{"domain":"/api/v1/conflix"}
- In the "verify signature" section, add a 256-bit secret. A generated token should now be in the "encoded" field. (you can use this tool to generate a random 256-bit secret).
- Copy the generated token in the "encoded" section.
- Paste this token in your .env file as follows.
VITE_API_KEY = **generated token**
VITE_API_URL = /proxy/api/v1/conflix/users
VITE_PROXY_URL = http://localhost:5000/
VITE_GEOLOCATION_URL = https://api.country.is/
- Your completed .env file should now look like this.
VITE_TMDB_AUTH = **TMDB_API_KEY**
VITE_TMDB_URL = https://api.themoviedb.org/3
VITE_API_KEY = **generated token**
VITE_API_URL = /proxy/api/v1/conflix/users
VITE_PROXY_URL = http://localhost:5000/
VITE_GEOLOCATION_URL = https://api.country.is/
- Go to the project server directory
cd conflix/server- Install dependencies
npm install-
Create a .env file at the root of the server directory.
-
Go to the mongoDB website and create an account.
-
Create a database and add a database user and password.
-
Add the following to your .env file.
NODE_ENV = development
PORT = 5000
DATABASE= **the database URL**
USER= **database user**
DATABASE_PASSWORD = **database password**
JWT_SECRET = **the 256-bit secret generated earlier**
TMDB_AUTH = **TMDB_API_KEY**
TMDB_URL = https://api.themoviedb.org/3
- In the server directory, run the application.
npm run devBefore starting, you need to have Git and Node installed.