{"id":18510817,"url":"https://github.com/rafaesc/reactube-client","last_synced_at":"2025-04-09T04:33:29.191Z","repository":{"id":44593839,"uuid":"137712029","full_name":"rafaesc/reactube-client","owner":"rafaesc","description":"A clone Youtube Web Player using React Provider Pattern, React Context and Typescript","archived":false,"fork":false,"pushed_at":"2018-06-21T02:09:07.000Z","size":22038,"stargazers_count":90,"open_issues_count":1,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-23T23:33:17.229Z","etag":null,"topics":["context","crop-videos","google","provider","react","react-context","react-router","state-management","styled-components","typescript","video","without-api","without-redux","youtube"],"latest_commit_sha":null,"homepage":"http://rafaelescala.com/reactube","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/rafaesc.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}},"created_at":"2018-06-18T05:06:10.000Z","updated_at":"2025-02-26T13:56:39.000Z","dependencies_parsed_at":"2022-09-07T00:41:33.468Z","dependency_job_id":null,"html_url":"https://github.com/rafaesc/reactube-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Freactube-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Freactube-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Freactube-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Freactube-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaesc","download_url":"https://codeload.github.com/rafaesc/reactube-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980833,"owners_count":21027803,"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":["context","crop-videos","google","provider","react","react-context","react-router","state-management","styled-components","typescript","video","without-api","without-redux","youtube"],"created_at":"2024-11-06T15:25:17.720Z","updated_at":"2025-04-09T04:33:24.136Z","avatar_url":"https://github.com/rafaesc.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/rafaesc/reactube-client/\"\u003e\n    \u003cimg src=\"./screenshots/reactube.svg\" alt=\"drawing\" width=\"450px\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\u003cdiv style=\"text-align:center\"\u003e\u003c/div\u003e\n\u003c!-- Name --\u003e\n\u003ch1 align=\"center\"\u003e\n  with :rocket:\u003cspan style=\"font-variant-caps: petite-caps;font-size: 30px;font-weight: 400;\"\u003e Typescript \u003c/span\u003e:rocket:\n\u003c/h1\u003e\n\nReactube-client is an open source project relying on [React context](https://reactjs.org/docs/context.html) an useful feature of React that it is great for passing down data to deeply nested components. In this project, I tried to show some features of react/react components, react context with Typescript. \n\n# [LIVE DEMO (WIP)](http://rafaelescala.com/reactube/)\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/fullplayer1.gif?raw=true)\n\n## Main Features:\n\n* Video player customized\n* Playlist\n* Preview videos\n* Responsive\n* It's possible crop videos\n* Support with localstorage\n\n## Contain:\n\n- [x] React\n- [x] Typescript\n- [x] React Context (not Redux)\n- [x] Styled components\n- [x] React Router\n\n## Build Setup\n\n```` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:3000\nnpm run start\n````\n\n## Screencast:\n\n:tv: Responsive\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/mobile.gif?raw=true)\n___\n\n:scissors: Crop videos\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/fullplayer2.gif?raw=true)\n___\n\n:house: Homepage\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/home.png?raw=true)\n___\n\n:tv: Video preview\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/video-preview.png?raw=true)\n___\n\n:pencil2: Edit video\n\n![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/edit.png?raw=true)\n\n## Contributing :heart:\n\n[Reactube-client](http://rafaelescala.com/reactube/) has been made by love:heart:.\nI'd greatly appreciate any contribution to improve this project. Feel free to sent a PR.\n\n## Acknowledgments\n\n* React\n* JavaScript\n* TypeScript\n\n## Author and license\n\nMIT License\n\nCopyright (c) 2018-present, [Rafael Escala](https://github.com/rafaesc)\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaesc%2Freactube-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaesc%2Freactube-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaesc%2Freactube-client/lists"}