{"id":22559648,"url":"https://github.com/taurusilver7/hyperstream","last_synced_at":"2025-10-18T11:53:32.276Z","repository":{"id":181445551,"uuid":"517402476","full_name":"taurusilver7/hyperstream","owner":"taurusilver7","description":"A popular video streaming application powered by react \u0026 styled with sass","archived":false,"fork":false,"pushed_at":"2024-04-14T13:14:46.000Z","size":3357,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:35:45.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"hyperstream-six.vercel.app","language":"CSS","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/taurusilver7.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":"2022-07-24T18:15:50.000Z","updated_at":"2022-07-25T12:11:05.000Z","dependencies_parsed_at":"2024-04-14T14:26:18.828Z","dependency_job_id":"76c69ce7-966e-4903-8778-1ca54ca78d3a","html_url":"https://github.com/taurusilver7/hyperstream","commit_stats":null,"previous_names":["taurusilver7/hyperstream"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fhyperstream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fhyperstream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fhyperstream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fhyperstream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/hyperstream/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026109,"owners_count":20711581,"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":[],"created_at":"2024-12-07T21:07:48.769Z","updated_at":"2025-10-18T11:53:32.217Z","avatar_url":"https://github.com/taurusilver7.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hyperstream\n\nA popular movie \u0026 TV show video streaming service powered by React \u0026 styled with SASS.\n\n![hyperstream-banner](./public/hyperstream.png)\n\n## Scripts\n\n```bash\nyarn create react-app \u003capp_name\u003e\n#and\ncd \u003capp_name\u003e\n#and\nyarn start\n# dependencies\nyarn add react-router-dom sass query-string swiper axios\n#end\n```\n\n## Build\n\n-  Refactor the started template to suit the application development process.\n\n-  Import [sass](https://sass-lang.com/install) and create the necessary directories for code-splitting.\n-  Import [axios](https://github.com/axios/axios) dependency to execute promise based http-requests \u0026 access the API.\n\n-  Import [swiper](https://swiperjs.com/react) or [swiper@6.8.4](https://www.npmjs.com/package/swiper/v/6.8.4) dependency, to add the animation swipe effect on the Header component.\n\n-  Set the routes between the pages in `config/Routes`.\n\n### Home\n\n-  The Header component has elements that necessaties the navigation between Home \u0026 Catalog pages.\n\n-  The HeroSlide component displays a slide-show on the top movies spliced from the results array. For the Slider component to work in React 18, import `react@rc` and `react-dom@rc` instead of the generic libraries. Wrap the root component in createNode, instead of rendering the dom.\n\n-  The MovieList components slides various categories of movies/tv on the Home page. Each of the item in the component are rendered in MovieCard component, which holds the category \u0026 id of the item result. Each MovieCard navigates to the Details page of the item results.\n-  The footer component remains passive in the application\n\n### Catalog\n\n-  The Catalog page has the list of movies/tv shows, a search component, a `load more` button and the footer text.\n\n-  The pageHeader followed the Header component, and displayed the Catalog category, with a opaque background.\n-  The Search component takes in an input with a `useRef()` and `useCallback()` hook to search for the query-string in the databaase/api.\n-  The MovieGrid component binds the Search, the array of MovieCards, and the load more button.\n-  The loadMore() function increments the page from the results, and request a new array of results from the api, which was then populated in MovieCard components to display on the Catalog page.\n\n### Details\n\n-  The Details page has the detailed information of an item result, along with the trailers, and the cast information.\n-  All the MovieCards hold the category \u0026 item id, which leads to the Details page.\n-  The Header \u0026 footer components are stand-alone components, outside the routes.\n\n-  Pick the id \u0026 category of an item result from `useParams()` hook.\n-  Create an async fun in useEffect to get the item details from `tmdbApi` through the API. Set the window screen to top.\n\n-  Populate the item results in the details page. The background image (banner), the poster container, and the item content-info.\n\n-  Create a component in the detial directory to populate the cast details. Send a req to the API to get the item content cast details.\n\n-  Create a similar component to populate the item trailer videos to play them with youtube.com/embed technique.\n\n-  Add another MovieList with the similar type of the same category as the item results.\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `yarn build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fhyperstream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Fhyperstream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fhyperstream/lists"}