├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public ├── movix-logo.png └── vite.svg ├── src ├── App.jsx ├── assets │ └── images │ │ ├── avatar.png │ │ ├── movix-logo.svg │ │ ├── no-poster.png │ │ └── no-results.png ├── components │ ├── carousel │ │ ├── Carousel.jsx │ │ └── style.scss │ ├── circleRating │ │ ├── CircleRating.jsx │ │ └── style.scss │ ├── contentWrapper │ │ ├── ContentWrapper.jsx │ │ └── style.scss │ ├── footer │ │ ├── Footer.jsx │ │ └── footer.scss │ ├── genres │ │ ├── Genres.jsx │ │ └── style.scss │ ├── header │ │ ├── Header.jsx │ │ └── header.scss │ ├── lazyImg │ │ └── Img.jsx │ ├── movieCard │ │ ├── MovieCard.jsx │ │ └── style.scss │ ├── spinner │ │ ├── Spinner.jsx │ │ └── style.scss │ ├── switchTabs │ │ ├── SwitchTabs.jsx │ │ └── style.scss │ └── videoPopup │ │ ├── VideoPopup.jsx │ │ └── style.scss ├── hooks │ └── useFetch.jsx ├── index.scss ├── main.jsx ├── mixin.scss ├── pages │ ├── 404 │ │ ├── 404.jsx │ │ └── style.scss │ ├── details │ │ ├── Details.jsx │ │ ├── PlayBtn.jsx │ │ ├── carousels │ │ │ ├── Recommendation.jsx │ │ │ └── Similar.jsx │ │ ├── cast │ │ │ ├── Cast.jsx │ │ │ └── style.scss │ │ ├── detailsBanner │ │ │ ├── DetailsBanner.jsx │ │ │ └── style.scss │ │ ├── style.scss │ │ └── videoSection │ │ │ ├── VideoSection.jsx │ │ │ └── style.scss │ ├── explore │ │ ├── Explore.jsx │ │ └── style.scss │ ├── home │ │ ├── Home.jsx │ │ ├── heroBanner │ │ │ ├── HeroBanner.jsx │ │ │ └── style.scss │ │ ├── popular │ │ │ └── Popular.jsx │ │ ├── style.scss │ │ ├── topRated │ │ │ └── TopRated.jsx │ │ └── trending │ │ │ └── Trending.jsx │ └── searchResult │ │ ├── SearchResult.jsx │ │ └── style.scss ├── store │ ├── homeSlice.js │ └── store.js └── utils │ └── api.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Movix_App

2 | 3 |

This is a movie listing app made using TMDB api.

4 | 5 |

🚀 Demo

6 | 7 | [https://movixzilla.netlify.app/](https://movixzilla.netlify.app/) 8 | 9 |

Project Screenshots:

10 | 11 | project-screenshot 12 | 13 | project-screenshot 14 | 15 | 16 |

🛠️ Installation Steps:

17 | 18 |

1. Clone the repo

19 | 20 | ``` 21 | https://github.com/mukeshpandey9/Movix_App.git 22 | ``` 23 | 24 |

2. Install all the node modules

25 | 26 | ``` 27 | npm install 28 | ``` 29 | 30 |

3. Run the server

31 | 32 | ``` 33 | npm run dev 34 | ``` 35 | 36 |

4. That's it web app live on

37 | 38 | ``` 39 | localhost:5137 40 | ``` 41 | 42 |

Technologies Used:-

43 |

1. React

44 |

2. Redux

45 |

3. TMDB Api

46 |

4. Sass

47 |

5. Axios

48 |

6. Lazy loading

49 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movix 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^1.9.1", 14 | "axios": "^1.2.2", 15 | "dayjs": "^1.11.7", 16 | "react": "^18.2.0", 17 | "react-circular-progressbar": "^2.1.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.7.1", 20 | "react-infinite-scroll-component": "^6.1.0", 21 | "react-lazy-load-image-component": "^1.5.6", 22 | "react-player": "^2.11.0", 23 | "react-redux": "^8.0.5", 24 | "react-router-dom": "^6.6.2", 25 | "react-select": "^5.7.0", 26 | "sass": "^1.57.1" 27 | }, 28 | "devDependencies": { 29 | "@types/react": "^18.2.15", 30 | "@types/react-dom": "^18.2.7", 31 | "@vitejs/plugin-react": "^4.0.3", 32 | "eslint": "^8.45.0", 33 | "eslint-plugin-react": "^7.32.2", 34 | "eslint-plugin-react-hooks": "^4.6.0", 35 | "eslint-plugin-react-refresh": "^0.4.3", 36 | "vite": "^4.4.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/movix-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mukeshpandey9/Movix_App/188cb0f44523d5d6a7ce52382e92f29107101ce6/public/movix-logo.png -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { fetchDataFromApi } from "./utils/api"; 3 | import { useSelector, useDispatch } from "react-redux"; 4 | import { getApiConfiguration, getGenres } from "./store/homeSlice"; 5 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 6 | import Home from "./pages/home/Home"; 7 | import PageNotFound from "./pages/404/404"; 8 | import Header from "./components/header/Header"; 9 | import Footer from "./components/footer/Footer"; 10 | import Details from "./pages/details/Details"; 11 | import SearchResult from "./pages/searchResult/SearchResult"; 12 | import Explore from "./pages/explore/Explore"; 13 | function App() { 14 | const dispatch = useDispatch(); 15 | const { url } = useSelector((state) => state.home); 16 | useEffect(() => { 17 | fetchApiConfig(); 18 | genresCall(); 19 | }, []); 20 | 21 | const fetchApiConfig = () => { 22 | fetchDataFromApi("/configuration").then((res) => { 23 | console.log(res); 24 | const url = { 25 | backdrop: res.images.secure_base_url + "original", 26 | poster: res.images.secure_base_url + "original", 27 | profilr: res.images.secure_base_url + "original", 28 | }; 29 | dispatch(getApiConfiguration(url)); 30 | }); 31 | }; 32 | 33 | const genresCall = async () => { 34 | let promises = []; 35 | let endPoints = ["tv", "movie"]; 36 | let allGenres = {}; 37 | 38 | endPoints.forEach((url) => { 39 | promises.push(fetchDataFromApi(`/genre/${url}/list`)); 40 | }); 41 | 42 | const data = await Promise.all(promises); 43 | 44 | data.map(({ genres }) => { 45 | return genres.map((item) => (allGenres[item.id] = item)); 46 | }); 47 | 48 | dispatch(getGenres(allGenres)); 49 | }; 50 | return ( 51 | <> 52 | 53 |
54 | 55 | } /> 56 | } /> 57 | } /> 58 | } /> 59 | } /> 60 | 61 | 62 |