We have to give the option to the user whether they want to watch this in dark mode or light mode @manikandanraji

They are larger than the screen and require the user to scroll down to see them

TypeError: channels is undefined
Subscriptions
src/components/Subscriptions.js:44
41 | const {channels} = useSelector((state) => state.user.data);
42 |
43 | return (

44 |
| ^ 45 | {channels.length > 0 &&

Subscriptions

}
46 |
47 | {channels?.map((channel) => (

(problem solved)

Hello,

I was wondering how we can allow a user to view certain pages like the home page/trending etc. without signing in, much more like YouTube. Currently, the user needs to sign in to view anything.

Add Logo where it is written You Tube Clone

I'm running the app locally and am logged in. But I want to log out so that I can see what the user experience is for someone coming to the website for the first time. How do you logout to sign up as another user?

Typically you would be able to click on the account image in the upper right, scroll down, and then click on Logout.

When you first open up the server and then client, are you supposed to signup initially? I get the following error when I try to sign up - attached.

I put an .env in the frontend root:
REACT_APP_BACKEND_URL="http://localhost:5000/api/v1/"
REACT_APP_CLOUDINARY_ENDPOINT="https://api.cloudinary.com/v1_1/funniestpets"

I put an .env in the backend root:
JWT_SECRET="I love shrimp with mayonnaise"
JWT_EXPIRE=30d // or any reasonable value that you prefer
DATABASE_URL="postgres://postgres:password@localhost:6432/dev?sslmode=disable"

Also your demo doesn't work either. When I try to sign up, it doesn't do anything.

I'm on firefox 68, when I click to signup there is this

Hi, I'm learning React and I wanted to say thank you guys for this amazing repo, I definitely learn a lot!

A question, I noticed that the original youtube website doesn't have the bottom bar and the actual toggle button on the top left (the "hamburger") is on the whole time no matter what's the size of the window.

Do you know how can I do the same on this clone version and keep that toggle button on as well?
Thank you!

node:internal/validators:120
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "url" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:372:5)
at validateString (node:internal/validators:120:11)
at Url.parse (node:url:168:3)
at Object.urlParse [as parse] (node:url:155:13)
at new Sequelize (/home/am-pc-29/ganeshProjects/youtubeclone-backend/node_modules/sequelize/lib/sequelize.js:57:28)
at Object. (/home/am-pc-29/ganeshProjects/youtubeclone-backend/src/sequelize.js:11:19)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
code: 'ERR_INVALID_ARG_TYPE'
}

README.md file is a bit big, therefore I think that is better add a table of contents into that.
An table of contents will be useful when someone reads it.

What do you think at this? Discuss it before create a PR.

Entire video content is loaded at once before playing them(or simply, long before user finishes it fully). This is clearly inefficient method for playing videos with larger size. Cloudinary can support synchronous HLS streaming for videos of size upto 40MB(on free account). All we have to do is to replace the code at line 23 with the below 4 lines of code.

if (previewUrl) {
      const segments = previewUrl.split('.');//Assuming it is a valid url that is received on successful upload(not any blob uri)
      const length = segments.length;
      const m3u8_url = previewUrl.replace(segments[length - 1], "m3u8"); 
      vjsPlayer.src({ type: "application/x-mpegURL", src: m3u8_url });
  }

Hello guys,
I'm new at this repository, and I didn't find a CONTRIBUTING.md file. It's very important have contributing guidelines.
There is someone agree with me?

When login or Signing up , error is logged DOMException: The URI is malformed.

Hi, you included in the Readme file for the server instructions on how to deploy to heroku. But you didn't give specifics on how to for client. I did basically the same thing, but get the h10 erros. I also added a Procfile, but that didn't fix it. See the logs:

Logged in as [email protected]
Brads-MBP-2% git add .
Brads-MBP-2% git commit -m "add Procfile"
[master 7b7ee66] add Procfile
1 file changed, 1 insertion(+)
create mode 100644 Procfile
Brads-MBP-2% git push heroku master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 287 bytes | 287.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 12.x...
remote: Downloading and installing node 12.20.1...
remote: Using default npm version: 6.14.10
remote:
remote: -----> Restoring cache
remote: - node_modules
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote:
remote: > [email protected] postinstall /tmp/build_815875c8/node_modules/babel-runtime/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > [email protected] install /tmp/build_815875c8/node_modules/webpack-dev-server/node_modules/fsevents
remote: > node install.js
remote:
remote:
remote: Skipping 'fsevents' build as platform linux is not supported
remote:
remote: > [email protected] install /tmp/build_815875c8/node_modules/watchpack-chokidar2/node_modules/fsevents
remote: > node install.js
remote:
remote:
remote: Skipping 'fsevents' build as platform linux is not supported
remote:
remote: > [email protected] postinstall /tmp/build_815875c8/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > [email protected] install /tmp/build_815875c8/node_modules/jest-haste-map/node_modules/fsevents
remote: > node install.js
remote:
remote:
remote: Skipping 'fsevents' build as platform linux is not supported
remote:
remote: > [email protected] postinstall /tmp/build_815875c8/node_modules/core-js-pure
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote: added 1721 packages in 27.414s
remote:
remote: -----> Build
remote: Running build
remote:
remote: > [email protected] build /tmp/build_815875c8
remote: > CI= react-scripts build
remote:
remote: Creating an optimized production build...
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist@latest --update-db
remote: Compiled with warnings.
remote:
remote: ./src/components/EditProfile.js
remote: Line 6:10: 'SignoutIcon' is defined but never used no-unused-vars
remote:
remote: ./src/App.js
remote: Line 6:10: 'darkTheme' is defined but never used no-unused-vars
remote: Line 10:8: 'Navbar' is defined but never used no-unused-vars
remote:
remote: Search for the keywords to learn more about each warning.
remote: To ignore, add // eslint-disable-next-line to the line before.
remote:
remote: File sizes after gzip:
remote:
remote: 224.37 KB build/static/js/2.f1016167.chunk.js
remote: 21.94 KB build/static/js/main.7f033cf6.chunk.js
remote: 11.56 KB build/static/css/2.3a60762f.chunk.css
remote: 786 B build/static/js/runtime-main.9c408c88.js
remote:
remote: The project was built assuming it is hosted at /.
remote: You can control this with the homepage field in your package.json.
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: npm install -g serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote: bit.ly/CRA-deploy
remote:
remote:
remote: -----> Caching build
remote: - node_modules
remote:
remote: -----> Pruning devDependencies
remote: audited 1721 packages in 12.082s
remote:
remote: 62 packages are looking for funding
remote: run npm fund for details
remote:
remote: found 5000 vulnerabilities (4996 low, 4 high)
remote: run npm audit fix to fix them, or npm audit for details
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> web
remote:
remote: -----> Compressing...
remote: Done: 75.4M
remote: -----> Launching...
remote: Released v9
remote: https://floating-fortress-68904.herokuapp.com/ deployed to Herok
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/floating-fortress-68904.git
bcf0d2f..7b7ee66 master -> master
Brads-MBP-2% heroku logs --tail
2021-01-16T02:08:33.927064+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.150.230/
2021-01-16T02:08:33.927587+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2021-01-16T02:08:33.927703+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2021-01-16T02:08:33.927811+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2021-01-16T02:08:33.928060+00:00 app[web.1]: Starting the development server...
2021-01-16T02:08:33.928061+00:00 app[web.1]:
2021-01-16T02:08:34.025661+00:00 heroku[web.1]: Process exited with status 0
2021-01-16T02:08:45.802909+00:00 heroku[web.1]: Starting process with command npm start
2021-01-16T02:08:49.706568+00:00 app[web.1]:
2021-01-16T02:08:49.706643+00:00 app[web.1]: > [email protected] start /app
2021-01-16T02:08:49.706644+00:00 app[web.1]: > react-scripts start
2021-01-16T02:08:49.706645+00:00 app[web.1]:
2021-01-16T02:08:54.758151+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.119.70/
2021-01-16T02:08:54.759220+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2021-01-16T02:08:54.759570+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2021-01-16T02:08:54.759732+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2021-01-16T02:08:54.760354+00:00 app[web.1]: Starting the development server...
2021-01-16T02:08:54.760356+00:00 app[web.1]:
2021-01-16T02:08:54.949507+00:00 heroku[web.1]: Process exited with status 0
2021-01-16T02:08:55.012817+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-16T02:08:56.279196+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=f19b20e1-5177-48d8-84d3-752a0dac4fe9 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:08:56.847505+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=c88b11be-a789-4023-b401-33be40dc7238 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:08:59.051406+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=3cc72829-f861-43b4-885c-9143c0e613c1 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:08:59.347323+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=a608c666-61a6-4032-9481-f45f771e04a9 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:16:53.000000+00:00 app[api]: Build started by user [email protected]
2021-01-16T02:18:53.552901+00:00 app[api]: Release v8 created by user [email protected]
2021-01-16T02:18:53.552901+00:00 app[api]: Deploy bcf0d2f1 by user [email protected]
2021-01-16T02:18:54.445583+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-16T02:19:02.000000+00:00 app[api]: Build succeeded
2021-01-16T02:19:04.026566+00:00 heroku[web.1]: Starting process with command npm start
2021-01-16T02:19:06.982699+00:00 app[web.1]:
2021-01-16T02:19:06.982717+00:00 app[web.1]: > [email protected] start /app
2021-01-16T02:19:06.982718+00:00 app[web.1]: > react-scripts start
2021-01-16T02:19:06.982718+00:00 app[web.1]:
2021-01-16T02:19:09.316390+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.121.142/
2021-01-16T02:19:09.317216+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2021-01-16T02:19:09.317331+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2021-01-16T02:19:09.317438+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2021-01-16T02:19:09.317703+00:00 app[web.1]: Starting the development server...
2021-01-16T02:19:09.317704+00:00 app[web.1]:
2021-01-16T02:19:09.439317+00:00 heroku[web.1]: Process exited with status 0
2021-01-16T02:19:09.492187+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-16T02:19:09.496377+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-16T02:19:17.221806+00:00 heroku[web.1]: Starting process with command npm start
2021-01-16T02:19:19.338363+00:00 app[web.1]:
2021-01-16T02:19:19.338380+00:00 app[web.1]: > [email protected] start /app
2021-01-16T02:19:19.338385+00:00 app[web.1]: > react-scripts start
2021-01-16T02:19:19.338385+00:00 app[web.1]:
2021-01-16T02:19:21.365309+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.214.98/
2021-01-16T02:19:21.365654+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2021-01-16T02:19:21.365733+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2021-01-16T02:19:21.365801+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2021-01-16T02:19:21.365975+00:00 app[web.1]: Starting the development server...
2021-01-16T02:19:21.365976+00:00 app[web.1]:
2021-01-16T02:19:21.473384+00:00 heroku[web.1]: Process exited with status 0
2021-01-16T02:19:21.509923+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-16T02:19:22.477912+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=11e9d785-a529-4199-b725-6c61338581e0 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:19:23.052918+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=c956620a-46dd-4979-bd1b-057e89080dad fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:19:46.791586+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=240b5d7e-4413-48d8-91cd-f93b50188b74 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:19:46.978251+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=2d9e9c7a-faae-4047-8330-8573d0c4ecdc fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:34:16.509806+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=1dd51568-cfd4-446b-98b5-d0305b105697 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T02:34:16.687752+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=cf3fba58-a2d6-4d68-b9f5-6ff2789df7b5 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T03:27:20.637069+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-16T03:27:31.868446+00:00 heroku[web.1]: Starting process with command npm start
2021-01-16T03:27:34.939611+00:00 app[web.1]:
2021-01-16T03:27:34.939668+00:00 app[web.1]: > [email protected] start /app
2021-01-16T03:27:34.939669+00:00 app[web.1]: > react-scripts start
2021-01-16T03:27:34.939669+00:00 app[web.1]:
2021-01-16T03:27:38.331932+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.81.214/
2021-01-16T03:27:38.332439+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2021-01-16T03:27:38.332551+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2021-01-16T03:27:38.332642+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2021-01-16T03:27:38.332889+00:00 app[web.1]: Starting the development server...
2021-01-16T03:27:38.332891+00:00 app[web.1]:
2021-01-16T03:27:38.470345+00:00 heroku[web.1]: Process exited with status 0
2021-01-16T03:27:38.526515+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-16T03:34:30.000000+00:00 app[api]: Build started by user [email protected]
2021-01-16T03:36:21.448635+00:00 app[api]: Release v9 created by user [email protected]
2021-01-16T03:36:21.448635+00:00 app[api]: Deploy 7b7ee669 by user [email protected]
2021-01-16T03:36:21.700557+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-16T03:36:30.000000+00:00 app[api]: Build succeeded
2021-01-16T03:36:33.423178+00:00 heroku[web.1]: Starting process with command node index.js
2021-01-16T03:36:36.789327+00:00 app[web.1]: internal/modules/cjs/loader.js:818
2021-01-16T03:36:36.789364+00:00 app[web.1]: throw err;
2021-01-16T03:36:36.789365+00:00 app[web.1]: ^
2021-01-16T03:36:36.789365+00:00 app[web.1]:
2021-01-16T03:36:36.789366+00:00 app[web.1]: Error: Cannot find module '/app/index.js'
2021-01-16T03:36:36.789367+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
2021-01-16T03:36:36.789368+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:667:27)
2021-01-16T03:36:36.789369+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
2021-01-16T03:36:36.789369+00:00 app[web.1]: at internal/main/run_main_module.js:17:47 {
2021-01-16T03:36:36.789370+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2021-01-16T03:36:36.789370+00:00 app[web.1]: requireStack: []
2021-01-16T03:36:36.789370+00:00 app[web.1]: }
2021-01-16T03:36:36.888310+00:00 heroku[web.1]: Process exited with status 1
2021-01-16T03:36:36.954018+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-16T03:36:50.960064+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=d69ebd12-9228-49eb-b064-7d98e2dd28ef fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T03:36:51.154347+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=959b0c39-e0e9-4fcd-bf25-4d885db3922d fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T03:36:54.893743+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-fortress-68904.herokuapp.com request_id=81d6d11d-a4c6-4bf5-894d-967451d14721 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https
2021-01-16T03:36:55.045087+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=floating-fortress-68904.herokuapp.com request_id=0c22bfbf-a5ee-4f41-93a6-506c35165e93 fwd="135.180.174.90" dyno= connect= service= status=503 bytes= protocol=https

When running 'npm run dev' the error is: Err Missing script: "dev"

Can you show me how to fix?