Skip to content

shauan/ReactTubefinal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

YOURTUBE

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/)

Technologies Used

  • 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

General Approach Used

The idea was to search videos faster and without the annoying ads that appear every time at the screen.

Installation Instructions

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.

Wireframes:

![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)

Code Highlight

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

Deployment

Deployed on Heroku

Author

License

This project is currently in the process of being licensed.

ReactTubefinal

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published