Skip to content

Instantly share code, notes, and snippets.

@Rb-tech-byte

Rb-tech-byte/index.html

Created August 11, 2020 11:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rb-tech-byte/bd6e16f15d0cfe3855cbf24d157aed83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rb-tech-byte/bd6e16f15d0cfe3855cbf24d157aed83 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube clone app using React
Raw
index.html
<!-- If you are watching on Imac im sorry but it will cut off a little bit as i added padding to cover the ugly side bar in windows :( -->
<!-- Still a work in progress, I did not have enough time to add a little bit of interaction but I will add all of that and maybe i will try to add the Youtube API -->
<div id="app"></div>
Raw
script.babel
class TopBar extends React.Component {
render(){
return(
<div className="topBar">
<div className="logo">
<img src="http://img1.hvg.hu/image.aspx?id=b2dcf4e3-4124-4eb9-a474-9cb25c3175cd&view=da658e97-86c0-40f3-acd3-b0a850f32c30" alt="yt-logo"></img>
</div>
<div className="nav">
<ul>
<li className="record"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/huge-business-icons/512/Camcorder.png" alt="record"></img></a></li>
<li className="search"><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgcGSdmZD7uR_9DVkHmx8S_yc3MwW50SYRaTGNNsbwc-04QLkdNg" alt="search"></img></a></li>
<li className="userr"><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLK0bUKIQe_qhTfFQQ64krBfSWew_VG2uWG1kxPe15GpKrNe6_rQ" alt="userr"></img></a></li>
</ul>
</div>
</div>
);
}
}
class BottomBar extends React.Component {
render(){
return(
<div className="bottomBar">
<div className="buttons">
<div className="home">
<a href="#">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1775478-200.png" alt="home" />
<p>Home</p>
</a>
</div>
<div className="trending">
<a href="#">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1126650-200.png" alt="home" />
<p>Trending</p>
</a>
</div>
<div className="subscriptions">
<a href="#">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/456174-200.png" alt="home" />
<p>Subscriptions</p>
</a>
</div>
<div className="inbox">
<a href="#">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1677613-200.png" alt="home" />
<p>Inbox</p>
</a>
</div>
<div className="library">
<a href="#">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1783984-200.png" alt="home" />
<p>Library</p>
</a>
</div>
</div>
</div>
);
}
}
class Posts extends React.Component {
render(){
return(
<div className="videoPost">
<div className="thumbnail">
<img src={this.props.videoImg} alt="video"></img>
</div>
<div className="userInfo">
<div className="userPicture">
<img src={this.props.userImg}></img>
</div>
<div className="videoInfo">
<p className="videoTitle">{this.props.videoTitle}</p>
<p className="username">{this.props.username} · {this.props.views} · {this.props.timePosted}</p>
</div>
</div>
<hr className="divider"></hr>
</div>
);
}
}
class MyInput extends React.Component {
render() {
return (
<div className="console">
<div className="screen">
<TopBar />
<Posts videoImg="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRviATU397zWIcuAAsNhPDrGRtbmy-SY-uaZIGDYC2f95fNV_Ev" userImg="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLK0bUKIQe_qhTfFQQ64krBfSWew_VG2uWG1kxPe15GpKrNe6_rQ" videoTitle="Do you like Jeeps?" username="Diego" views="12 views" timePosted="2 mins ago"/>
<Posts videoImg="https://code.visualstudio.com/assets/docs/nodejs/reactjs/extra-semi-error.png" userImg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K" videoTitle="How React is changing the world" username="ReactJs" views="1k views" timePosted="4 days ago"/>
<Posts videoImg="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTcQBZLAUzrOXmD3ivBElKpQnrDmlSm9e9UjxP35X2MW4DggxYnA" userImg="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbYa0Us9u8V22NMZmtyG1tFRjT93Ms0TWW3je0LlQGz9jW-tNirA" videoTitle="Is KD the GOAT?" username="NBA" views="12m views" timePosted="1 month ago"/>
<Posts videoImg="https://dy98q4zwk7hnp.cloudfront.net/1969-Chevrolet-Camaro-Muscle%20&%20Pony%20Cars--Car-100886573-eb4a4b3bd67913a5fbac3352034925ee.jpg?w=1280&h=720&r=thumbnail&s=1" userImg="https://wallpapercave.com/wp/1DcAB24.jpg" videoTitle="Chevy 69 you will never get bored of this beast" username="Chevy" views="1m views" timePosted="2 months ago"/>
<Posts videoImg="https://nebula.wsimg.com/obj/RjUyMTk4NDMyOEIyRjZDRkU1MzA6MmVlYWJmMTEyNmQwNWI5ZmUwODBkMmFlMDA5MDg5ZmY6Ojo6OjA=" userImg="https://nebula.wsimg.com/obj/RjUyMTk4NDMyOEIyRjZDRkU1MzA6ZDQ4ZWVkNzM4OTIxMmMxNjc0MGNlZTU5ODU0YWM1YjY6Ojo6OjA=" videoTitle="0-60 in 2 seconds??" username="Import Drag" views="2m views" timePosted="3 months ago"/>
<Posts videoImg="https://i.ytimg.com/vi/UZjgD-xTz9Q/maxresdefault.jpg" userImg="https://cdn.shopify.com/s/files/1/0747/3829/products/mGR0304_1024x1024.jpeg?v=1485013802" videoTitle="Buying my dream car at 25!!" username="Nr32" views="30m views" timePosted="4 months ago"/>
</div>
<BottomBar />
</div>
);
}
}
// Render to DOM
ReactDOM.render(<MyInput />, document.getElementById('app'));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
Raw
style.css
/* Global settings */
body {
margin: 0;
background-color: #eee;
}
.console {
width: 340px;
height: 610px;
overflow-x: hidden;
overflow-y: auto;
margin: 100px auto 100px auto;
background-color: #fff;
}
.screen {
width: 357px;
height: 556px;
overflow-y: scroll;
/* padding: 20px 20px 0 20px; */
}
p {
margin: 0;
}
.divider {
border-top: #eee;
margin: 0 0 20px 0;
}
a {
color: black;
text-decoration: none;
}
/* Thumbnail settings */
.videoPost {
margin: 0 20px;
}
.videoPost .thumbnail img {
width: 100%;
height: 180px;
}
/* User pic and username settings */
.videoPost .userPicture {
width: 20%;
float: left;
}
.videoPost .userPicture img {
width: 44px;
height: 44px;
border-radius: 50%;
}
.videoPost .username {
font-size: 14px;
color: #555;
}
/* Video title settings */
.videoPost .userInfo {
overflow: hidden;
height: auto;
margin: 10px 0;
}
.videoPost .videoInfo {
width: 80%;
float: left;
}
.videoPost .videoTitle {
margin-bottom: 4px;
font-size: 18px;
}
/* TopBar Settings */
.topBar {
height: 50px;
overflow: hidden;
box-shadow: 0 1px 4px .4px #eee;
margin-bottom: 20px;
}
.topBar .logo {
width: 40%;
height: 50px;
float: left;
}
.topBar .logo img {
width: 120px;
height: 50px;
}
.topBar .nav {
width: 60%;
float: left;
height: 50px;
}
.topBar .nav .userr img {
width: 25px;
height: 25px;
}
.topBar .nav .record img, .topBar .nav .search img {
width: 20px;
height: 20px;
}
.topBar .userr img {
border-radius: 50%;
}
.topBar ul {
margin: 0;
padding: 0;
float: right;
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
.topBar li {
display: inline-block;
padding-right: 20px;
}
/* Bottom bar settings */
.bottomBar {
width: 100%;
height: auto;
border-top: 1px solid #eee;
position: relative;
bottom: 0;
right: 0;
left: 0;
padding: 8px 0;
margin: 0;
}
.bottomBar .buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
text-align: center;
}
.bottomBar .buttons img {
width: 25px;
height: 20px;
}
.bottomBar .buttons p {
font-size: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment