MoviScreen

MoviScreen is a web application created as a clone of Netflix that allows users to view trailers of movies and TV shows with a user-friendly platform. The application is developed using React, Firebase, Axios, SWR, Emotion, Styled Components, Material UI, and TailwindCSS.

MoviScreen has many features, including the ability to add titles to a My List section, created a personalized account and fully responsive. The application also includes a video player powered by React Player for seamless streaming and playback of content.

The app offers a smooth and responsive user experience with a clean and intuitive interface that makes it easy to navigate and discover new content. The use of Material UI and pre-built React components simplifies the development process, while Emotion and Styled Components provide easy and reusable styling of components.

Vite manages the development environment for the app, providing fast and efficient development and hot-reloading. ESlint ensures code consistency and readability.

Overall, MoviScreen is a user-friendly web application that offers many features and a seamless user experience for streaming movies and TV shows trailers.

.env Variable :

• VITE_APP_API_KEY=XXXXXX
• VITE_APP_AUTH_DOMAIN=XXXXXX
• VITE_APP_PROJECTID=XXXXXX
• VITE_APP_STORAGEBUCKET=XXXXXX
• VITE_APP_MESSAGINGSENDERID=XXXXXX
• VITE_APP_APPID=XXXXXX
• VITE_APP_MEASUREMENTID=XXXXXX
• VITE_APP_TMDB_API_KEY=XXXXXX

Packages used and their versions :

• Dependencies :

  • "@emotion/react": "^11.10.8"
  • "@emotion/styled": "^11.10.8"
  • "@mui/material": "^5.12.2"
  • "axios": "^1.3.6"
  • "firebase": "^9.20.0"
  • "react": "^18.2.0"
  • "react-dom": "^18.2.0"
  • "react-hot-toast": "^2.4.0"
  • "react-icons": "^4.8.0"
  • "react-player": "^2.12.0"
  • "react-router-dom": "^6.10.0"
  • "styled-components": "^5.3.10"
  • "swr": "^2.1.5"
  • "tailwind-scrollbar-hide": "^1.1.7"
  • "zustand": "^4.3.7

• DevDependencies :

  • "@types/react": "^18.0.28"
  • "@types/react-dom": "^18.0.11"
  • "@vitejs/plugin-react-swc": "^3.0.0"
  • "autoprefixer": "^10.4.14"
  • "eslint": "^8.38.0"
  • "eslint-plugin-react": "^7.32.2"
  • "eslint-plugin-react-hooks": "^4.6.0"
  • "eslint-plugin-react-refresh": "^0.3.4"
  • "postcss": "^8.4.23"
  • "tailwindcss": "^3.3.2"
  • "tailwindcss-textshadow": "^2.1.3"
  • "vite": "^4.3.2