https://github.com/rafaesc/reactube-client

A clone Youtube Web Player using React Provider Pattern, React Context and Typescript
https://github.com/rafaesc/reactube-client

context crop-videos google provider react react-context react-router state-management styled-components typescript video without-api without-redux youtube

Last synced: 2 days ago
JSON representation

A clone Youtube Web Player using React Provider Pattern, React Context and Typescript

• Host: GitHub
• URL: https://github.com/rafaesc/reactube-client
• Owner: rafaesc
• Created: 2018-06-18T05:06:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-21T02:09:07.000Z (over 6 years ago)
• Last Synced: 2024-01-30T18:36:37.652Z (9 months ago)
• Topics: context, crop-videos, google, provider, react, react-context, react-router, state-management, styled-components, typescript, video, without-api, without-redux, youtube
• Language: TypeScript
• Homepage: http://rafaelescala.com/reactube
• Size: 21 MB
• Stars: 92
• Watchers: 4
• Forks: 17
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  





  with :rocket: Typescript :rocket:



Reactube-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. 

# [LIVE DEMO (WIP)](http://rafaelescala.com/reactube/)

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/fullplayer1.gif?raw=true)

## Main Features:

* Video player customized

* Playlist

* Preview videos

* Responsive

* It's possible crop videos

* Support with localstorage

## Contain:

- [x] React

- [x] Typescript

- [x] React Context (not Redux)

- [x] Styled components

- [x] React Router

## Build Setup

```` bash

# install dependencies

npm install

# serve with hot reload at localhost:3000

npm run start

````

## Screencast:

:tv: Responsive

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/mobile.gif?raw=true)

___

:scissors: Crop videos

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/fullplayer2.gif?raw=true)

___

:house: Homepage

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/home.png?raw=true)

___

:tv: Video preview

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/video-preview.png?raw=true)

___

:pencil2: Edit video

![](https://github.com/rafaesc/reactube-client/blob/master/screenshots/edit.png?raw=true)

## Contributing :heart:

[Reactube-client](http://rafaelescala.com/reactube/) has been made by love:heart:.

I'd greatly appreciate any contribution to improve this project. Feel free to sent a PR.

## Acknowledgments

* React

* JavaScript

* TypeScript

## Author and license

MIT License

Copyright (c) 2018-present, [Rafael Escala](https://github.com/rafaesc)