Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/martinwebdev95/disneyplusclone

Disney Plus web clone with a supabase backend to save favorite movies and tv shows
https://github.com/martinwebdev95/disneyplusclone

frontend javascript react-router reactjs styled-components supabase vercel-deployment vitejs

Last synced: 2 months ago
JSON representation

Disney Plus web clone with a supabase backend to save favorite movies and tv shows

Awesome Lists containing this project

README 

        
[Button Language]: https://img.shields.io/badge/Leer%20En%20Español-000000?style=for-the-badge



[![Button Language]](https://github.com/MartinWebDev95/DisneyPlusClone/tree/master/Frontend/README.md)



# Disney Plus Clone

---

[Button Disney Plus Web]: https://img.shields.io/badge/Disney%20Plus%20Original-0B5B9E?style=for-the-badge

[Button Disney Plus Clone]: https://img.shields.io/badge/Disney%20Plus%20Clon-0B5B9E?style=for-the-badge



This project consists of creating a clone of the Disney Plus website where you can authenticate yourself through Google and where you can save the movies or series that you like the most to your list.



[![Button Disney Plus Clone]](https://disneyplus-clone-app.vercel.app/)

[![Button Disney Plus Web]](https://www.disneyplus.com)



## 👨🏽‍💻 What technologies have I used?

---



[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge&logo=vercel

[Button Supabase]: https://img.shields.io/badge/Supabase-000000?style=for-the-badge&logo=supabase

[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react

[Button Styled Components]:https://img.shields.io/badge/Styled%20Components-000000?style=for-the-badge&logo=styled-components

[Button React Router]:https://img.shields.io/badge/React%20Router-000000?style=for-the-badge&logo=react-router

[Button Vite]:https://img.shields.io/badge/Vite-000000?style=for-the-badge&logo=vite

[Button ESLint]:https://img.shields.io/badge/ESLint-000000?style=for-the-badge&logo=eslint



[![Button React]](https://react.dev/)

[![Button Supabase]](https://supabase.com/)

[![Button Styled Components]](https://styled-components.com/)

[![Button React Router]](https://reactrouter.com/en/main)

[![Button Vite]](https://vitejs.dev/)

[![Button ESLint]](https://eslint.org/)

[![Button Vercel]](https://vercel.com/)



- **React:** I have used React as the project framework, creating different components, a context for authentication, a layout for the entire website, different pages and several custom hooks.



- **Supabase:** I have used Supabase for authentication through Google, authentication with the Demo User and to save in a database the favorite movies or series that each user decides.



- **Styled Components:** I have used Styled Components to style the different components.



- **React Router:** I have used React Router to create the different routes that the website has, since React doesn't have an integrated router like other frameworks.



- **Vite JS:** I have used Vite JS as a build tool.



- **ESLint:** I have used ESLint to follow the Airbnb style guide in the project code.



- **API:** I have used the [TMDB API](https://developer.themoviedb.org/docs/getting-started) to get all the information about movies and series.



## 📸 Some Screenshots!

---



![Login Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/loginPage.png)



![Main Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/mainPage.png)



![Brand Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/brandPage.png)



![Search Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/searchPage.png)



![Detail Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/detailPage.png)



![My List Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/myListPage.png)



![Series Page Screenshot](https://github.com/MartinWebDev95/DisneyPlusClone/blob/master/Frontend/public/assets/img/screenshots/seriesPage.png)



## 🗃️ Project Structure

---



This is the structure that I have used in this project



```text

/

├── public/

│   └── assets/

│       ├── img/

│       │   └── image.png

│       └── videos/

│           └── video.mp4

│

├── src/

│   ├── components/

│   │   └── Component/

│   │       └── index.jsx

│   │       └── styles.js

│   ├── context/

│   │   └── Context.jsx

│   ├── helpers/

│   │   └── helper.js

│   ├── hooks/

│   │   └── useHook.js

│   ├── layout/

│   │   └── Layout.jsx

│   ├── pages/

│   │    └── Page/

│   │       └── index.jsx

│   │       └── styles.js

│   ├── services/

│   │   └── getData.js

│   └── utils/

│       └── util.js

└── package.json

```

## 👀 Where you can find me?

---



[Button Portfolio]: https://img.shields.io/badge/Visit%20My%20Portfolio-000000?style=for-the-badge



[![Button Portfolio]](https://portfolio-martinwebdev95.vercel.app/)