⚠ DISCLAIMER
THIS PROJECT USE IMAGES AND NAMES OWNED BY NETFLIX AND THE MOVIE DATABASE (PROVIDES THE DATA OF THE MOVIES).
I DO NOT OWN ANY IMAGE OR NAME OF THIS APPLICATION. THIS PROJECT IS PROVIDED AT IT IS AND IS JUST AND ONLY TO TEST AND IMPROVE MY OWN ABILITIES WITH REACT, REDUX AND CSS (STYLED COMPONENTS). IF YOU WANT TO CLONE THIS REPO DO NOT USE THE IMAGES NOR NAMES WITHOUT PERMISSION OF THE OWNERS. IF YOU ARE NETFLIX, I'M SEARCHING FOR A JOB.
🎬 Xilften, the movie club that is definitely not a copy of Netflix.
In this project I used react, redux and styled-components to do a movie club website based on Netflix. The Xilften!
All the website style was made with styled components by me. The objective at start was to be as similar as possible with Netflix, but I started to put my things in many places like custom animations, etc.
Click here or in the image below to go to the website.
✨ Features
If you hover your mouse in the Xilften logo it will hover accordingly to the side that you hovered (left or right).
The input has an animation that puts the label to the top when focussed.
The carousel is infinite from both sides, has an animation on hover, and if you click on the description you go to the rent page.
You can register, login and logout. You can left the register and continue later. You can rent and see the rented movies.
You can change your data from your profile.
🏗 Improvements To Do Later
Everything be responsive and made mobile-first. (Under development right now)
Pages
-
- Home
-
- Login
-
- Browse
- - Carousel
- - CSS, HTML
- - JS
- - Refactor to Component (Solve Bug, Medium Important)
- - Add Categories to Backend and update front (Less Important)
- - Detail, refactor to be a modal (Non important)
- - Detail CSS
- - Carousel
-
- Register (Important)
-
- Admin See Orders (Important)
-
- User do Orders (Important)
-
- User see own Orders (Important)
-
- Search Movie (Important)
-
- Admin viewpoint (Delete and etc, less important)
Functionalities
- - Search Genre [Category] (Less Important)
- - Optional Search Author (Non Important)
- - Improve CSS (Non Important)
Docs
- - README
- - Documentation of custom generic components