git clone https://github.com/benjaminadk/youtube-clone.gitcd youtube-clonenpm installcd clientnpm install- create
client/config/dev.js - add your personal keys
- initialize project and install express, babel, etc
- endpoints, graphql, graphiql, schema, resolvers
- setup graphiql GUI
- setup mlab and mongoose
- basic user model
- finish models install passport
- create a google app
- test it out and summary of google oauth20
- mongoose basics
- align with mongoose values
- install concurrently and create react app
- install latest material ui and apollo
- basic setup
- first apollo react component
- cors, typos, npm packages
- material ui appbar and drawer
- link to upload, classes
- component style and layout
- use resource upload background
- create video model on backend
- create a json web token on login
- fetching jwt on frontend
- finalize jwt fetching
- transfer jwt to backend
- add user to context
- bucket config
- aws sdk
- send the video to aws
- axios
- video details and save to database
- finally play a video on the frontend
- views, likes, dislikes, user and video info added to view
- find and update a videos views when the video loads
- thumbs up and thumbs down
- complete implementation model, schema, resolvers, mutations, refetchQueries
- modal/dialog for sharing to social media
- react-share package
- more explanations and implementation
- setup embed option and time query param
- use momentjs and query-string
- total refactor of Upload component
- add dropzone for poster
- show poster in Video component
- refactor Video main div into two sub components
- adjust height of certain components
- comment model, schema, resolvers setup
- use of mongoose.populate
- expand our big query for video to include comments
- slow explanation of client code around comments
- remove comments from user model
- implement sub comments
- further explanation of sub comment mutation
- see below for setup instructions
- getToken
- backend admin
- build the My Channel View
- install react-swipeable-views in client
- build the about tab
- install country-list package
- implement simple search of videos
- implement basic video list to right of player
- uses moment to check date and add NEW icon
- add onClick play/pause toggle to video component
- use react-transition-group to add animated icon
- add ability to display video duration on thumbnail
- uses componentDidUpdate lifecycle method
- set up menu basics
- more css crapola
- some additional explanation of Video 46 points
- models, schemas and resolvers for playlists
- overview of what it looks like in the app
- frontend code - state, menu, popovers, checkboxes
- using componentDidMount
- playlists tab - overlay method
- mutation for adding and removing videos from playlists
- allow user to create new playlist when uploading video
- refetchQueries and moving some reused queries to their own file
- search bar is universal - built into routes/index where BrowserRouter is located
- basic functionality and landing page for results
- upgraded to Material-UI v1 (was beta)
- refactor around breaking changes
- different prop names for MUI components -
onClosevsonRequestClosefor modals, menus - use or
variantinstead oftypeprops typography - covert inline style props to className using MUI's
withStylescomponent - work with theme creation
- different prop names for MUI components -
- upgraded React and ReactDOM
- refactored backend - removed babel and thus
importstatements- use CommonJs
requirestatements - no great advantage and an extract build step with babel
- use CommonJs
- added aws credentials to resolver files in aws s3 instansiation
- credentials go into
dev.jsnow
- credentials go into
- fixing small bugs
- improving Video Component and all its sub components
- authenticate mutation to avoid making a user log in over and over
- Private Routes so unauthorized users cannot use the cool parts of the app
- general styling, upgrading and bug fixing
"proxy": {
"/auth/*": {
"target": "http://localhost:3001"
}
},
- Upload Background
- YTC Notification Logo
- Sample AWS S3 Bucket Policy
{
"Version": "2012-10-17",
"Id": "S3-Console-Auto-Gen-Policy-1501076877929",
"Statement": [
{
"Sid": "S3PolicyStmt-DO-NOT-MODIFY-1501076877929",
"Effect": "Allow",
"Principal": {
"Service": "s3.amazonaws.com"
},
"Action": "s3:PutObject",
"Resource": "arn:aws:s3:::<your bucket name>/*",
"Condition": {
"StringEquals": {
"aws:SourceAccount": "056188042019",
"s3:x-amz-acl": "bucket-owner-full-control"
},
"ArnLike": {
"aws:SourceArn": "arn:aws:s3:::<your bucket name>"
}
}
}
]
}
- Sample Bucket CORS Policy
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin><your website url></AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>10000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
-
Firebase Cloud Messaging
-
Frontend
-
npm install -S firebasein client directory -
create
firebase-messaging-sw.jsin client/src/public -
add
"gcm_sender_id": "103953800507"tomanifest.json- number is universal -
create
fire.jswith config information in client/src -
import config into your root javascript file - webpack will bundle
-
Example fire.js
import firebase from 'firebase' const config = { messagingSenderId: "<your sender id>" } export default firebase.initializeApp(config)
-
-
Backend
npm install -S firebase-adminin root directory- firebase settings - Firebase Admin SDK - Generate New Private Key
- create a file the configs admin
- keeping privateKey hidden is important
- Example firebase/index.js
import admin from 'firebase-admin'
import keys from '../config/keys'
admin.initializeApp({
credential: admin.credential.cert({
projectId: "<your project id>",
clientEmail: "<your firebase email>",
privateKey: keys.firebaseKey
})
})
console.log('FIREBASE INITIALIZED')
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
