https://github.com/luigiminardi/movieclubfrontend

Netflix clone using react, redux and styled components
https://github.com/luigiminardi/movieclubfrontend

netflix-clone react reactjs redux styled-components styledcomponents

Last synced: 5 days ago
JSON representation

Netflix clone using react, redux and styled components

• Host: GitHub
• URL: https://github.com/luigiminardi/movieclubfrontend
• Owner: luigiMinardi
• License: mit
• Created: 2022-03-07T05:44:22.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-15T20:47:26.000Z (over 2 years ago)
• Last Synced: 2024-11-13T12:10:04.115Z (5 days ago)
• Topics: netflix-clone, react, reactjs, redux, styled-components, styledcomponents
• Language: JavaScript
• Homepage: https://main.dcsclqrcr3v78.amplifyapp.com
• Size: 2.77 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚠ DISCLAIMER

THIS PROJECT USE IMAGES AND NAMES OWNED BY [NETFLIX](https://www.netflix.com/) AND [THE MOVIE DATABASE](https://www.themoviedb.org/documentation/api) (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](https://main.dcsclqrcr3v78.amplifyapp.com) or in the image below to go to the website.

[![javaScrEat home](/src/assets/images/home.png)](https://main.dcsclqrcr3v78.amplifyapp.com)

## ✨ 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

* [x] - Home

* [x] - Login

* [ ] - Browse

  * [ ] - Carousel

    * [x] - CSS, HTML

    * [x] - 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

* [x] - Register (Important)

* [x] - Admin See Orders (Important)

* [x] - User do Orders (Important)

* [x] - 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

* [x] - README

* [ ] - Documentation of custom generic components