Yourtube is an app designed to allow a user to search videos through youtube without the ads and faster. The user can search any type of video that exists on youtube and save his favorites to watch another time.
[DEMO - click here] (https://reactubez.herokuapp.com/)
- BOOTSTRAP - CSS, JavaScript and fonts
- FIREBASE - Firebase provides a realtime database and backend as a service
- NODEMON - Used to monitor for any changes in your source / restart server automatically
- HEROKU - Cloud deployment
- REACT - JavaScript library for building user interfaces
The idea was to search videos faster and without the annoying ads that appear every time at the screen.
git clone https://github.com/2high/ReactTube cd ReactTube npm install
Run `npm run dev` and visit localhost:8080 to make sure everything is working.
![First screen] (https://github.com/2high/ReactTubefinal/blob/master/style/img/Screen%20Shot%202017-02-28%20at%209.05.38%20AM.png?raw=true)
![Favorites screen] (https://github.com/2high/ReactTubefinal/blob/master/style/img/Screen%20Shot%202017-02-28%20at%209.05.54%20AM.png?raw=true)
The structure of the web app:
...
<div className="container">
<div >
<div className="row">
<div className="col-md-3">
<Favorites />
</div>
<div className="col-md-9">
<SearchBar
onSearchTermChange={videoSearch}
videos={this.state.videos} />
</div>
</div>
</div>
<VideoDetail
video={this.state.selectedVideo}
/>
<VideoList
onVideoSelect={selectedVideo => this.setState({selectedVideo}) }
videos={this.state.videos}
/>
<div className="container">
<div className="col-md-12">
<h1 className="soc">Favorites</h1>
<div>
{this.favoritesList()}
</div>
</div>
</div>
</div>
...
Deployed on Heroku
- Shauan Ferreira Leite - LinkedIn
This project is currently in the process of being licensed.