{"id":15083569,"url":"https://github.com/asifcopilot/devsecops-netflix","last_synced_at":"2026-01-02T19:45:44.832Z","repository":{"id":255730710,"uuid":"853199882","full_name":"asifcopilot/DevSecOps-Netflix","owner":"asifcopilot","description":"DevSecOps Project to setup Netflix clone on Azure using CICD, Security, Monitoring and GitOps","archived":false,"fork":false,"pushed_at":"2024-09-11T09:39:31.000Z","size":7244,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T07:09:43.411Z","etag":null,"topics":["cicd","devops","devops-project","devsecops-best-practices","jenkins","kubernetes-deployment"],"latest_commit_sha":null,"homepage":"https://asifcopilot.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asifcopilot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-06T07:23:04.000Z","updated_at":"2024-09-11T09:39:34.000Z","dependencies_parsed_at":"2024-09-06T22:43:15.965Z","dependency_job_id":"98c00055-e585-4a1c-bf8d-5a179a6ea7b4","html_url":"https://github.com/asifcopilot/DevSecOps-Netflix","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"8aeca758e85576c1b041684a18948305ff9f5f65"},"previous_names":["asifcopilot/devsecops-netflix"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifcopilot%2FDevSecOps-Netflix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifcopilot%2FDevSecOps-Netflix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifcopilot%2FDevSecOps-Netflix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifcopilot%2FDevSecOps-Netflix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asifcopilot","download_url":"https://codeload.github.com/asifcopilot/DevSecOps-Netflix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926262,"owners_count":20369957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cicd","devops","devops-project","devsecops-best-practices","jenkins","kubernetes-deployment"],"created_at":"2024-09-25T06:02:41.209Z","updated_at":"2026-01-02T19:45:44.793Z","avatar_url":"https://github.com/asifcopilot.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"http://netflix-clone-with-tmdb-using-react-mui.vercel.app/\"\u003e\n    \u003cimg src=\"./public/assets/netflix-logo.png\" alt=\"Logo\" width=\"100\" height=\"32\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eNetflix Clone\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://netflix-clone-react-typescript.vercel.app/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/crazy-man22/netflix-clone-react-typescript/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/crazy-man22/netflix-clone-react-typescript/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#prerequests\"\u003ePrerequests\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#which-features-this-project-deals-with\"\u003eWhich features this project deals with\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#third-party-libraries-used-except-for-react-and-rtk\"\u003eThird Party libraries used except for React and RTK\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/assets/home-page.png\" alt=\"Logo\" width=\"100%\" height=\"100%\"\u003e\n  \u003cp align=\"center\"\u003eHome Page\u003c/p\u003e\n  \u003cimg src=\"./public/assets/mini-portal.png\" alt=\"Logo\" width=\"100%\" height=\"100%\"\u003e\n  \u003cp align=\"center\"\u003eMini Portal\u003c/p\u003e\n  \u003cimg src=\"./public/assets/detail-modal.png\" alt=\"Logo\" width=\"100%\" height=\"100%\"\u003e\n  \u003cp align=\"center\"\u003eDetail Modal\u003c/p\u003e\n  \u003cimg src=\"./public/assets/grid-genre.png\" alt=\"Logo\" width=\"100%\" height=\"100%\"\u003e\n  \u003cp align=\"center\"\u003eGrid Genre Page\u003c/p\u003e\n  \u003cimg src=\"./public/assets/watch.png\" alt=\"Logo\" width=\"100%\" height=\"100%\"\u003e\n  \u003cp align=\"center\"\u003eWatch Page with customer contol bar\u003c/p\u003e\n\u003c/div\u003e\n\n## Prerequests\n\n- Create an account if you don't have on [TMDB](https://www.themoviedb.org/).\n  Because I use its free API to consume movie/tv data.\n- And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key\n- Finally, if you use v3 of TMDB API, create a file named `.env`, and copy and paste the content of `.env.example`.\n  And then paste the API Key you just created.\n\n## Which features this project deal with\n\n- How to create and use [Custom Hooks](https://reactjs.org/docs/hooks-custom.html)\n- How to use [Context](https://reactjs.org/docs/context.html) and its provider\n- How to use lazy and Suspense for [Code-Splitting](https://reactjs.org/docs/code-splitting.html)\n- How to use a new [lazy](https://reactrouter.com/en/main/route/lazy) feature of react-router to reduce bundle size.\n- How to use data [loader](https://reactrouter.com/en/main/route/loader) of react-router, and how to use redux dispatch in the loader to fetch data before rendering component.\n- How to use [Portal](https://reactjs.org/docs/portals.html)\n- How to use [Fowarding Refs](https://reactjs.org/docs/forwarding-refs.html) to make components reusuable\n- How to create and use [HOC](https://reactjs.org/docs/higher-order-components.html)\n- How to customize default theme of [MUI](https://mui.com/)\n- How to use [RTK](https://redux-toolkit.js.org/introduction/getting-started)\n- How to use [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)\n- How to customize default classname of [MUI](https://mui.com/material-ui/experimental-api/classname-generator)\n- Infinite Scrolling(using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))\n- How to make awesome carousel using [slick-carousel](https://react-slick.neostack.com)\n\n## Third Party libraries used except for React and RTK\n\n- [react-router-dom@v6.9](https://reactrouter.com/en/main)\n- [MUI(Material UI)](https://mui.com/)\n- [framer-motion](https://www.framer.com/docs/)\n- [video.js](https://videojs.com)\n- [react-slick](https://react-slick.neostack.com/)\n\n## Install with Docker\n\n```sh\ndocker build --build-arg TMDB_V3_API_KEY=your_api_key_here -t netflix-clone .\n\ndocker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone\n```\n\n## Todo\n\n- Make the animation of video card portal more similar to Netflix.\n- Improve performance. I am using `context` and `provider` but all components subscribed to the context's value are re-rendered. These re-renders happen even if the part of the value is not used in render of the component. there are [several ways](https://blog.axlight.com/posts/4-options-to-prevent-extra-rerenders-with-react-context/) to prevent the re-renders from these behaviours. In addition to them, there may be several performance issues.\n- Replace bundler([Vite](https://vitejs.dev/guide)) with [Turbopack](https://turbo.build/pack/docs/why-turbopack). Turbopack is introduced in Next.js conf recently. It's very fast but it's nor ready to use right now. it just support Next.js, and they plan to support all others as soon as possible. so if it's ready to use, replace [Vite](https://vitejs.dev/guide) with [Turbopack](https://turbo.build/pack/docs/why-turbopack).\n- Add accessibilities for better UX.\n- Add Tests.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifcopilot%2Fdevsecops-netflix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasifcopilot%2Fdevsecops-netflix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifcopilot%2Fdevsecops-netflix/lists"}