Node.js App From Scratch | Express, MongoDB & Google OAuth

Поделиться
HTML-код
  • Опубликовано: 6 сен 2024

Комментарии • 1 тыс.

  • @TraversyMedia
    @TraversyMedia  4 года назад +285

    Intro - 00:00
    Database Setup - 3:41
    Install Dependencies - 6:10
    Initial Express Setup - 10:26
    Connect Database - 14:00
    Morgan Logger - 17:27
    Template Engine & Layouts - 18:22
    Index Routes & Views - 21:44
    Materialize & Font Awesome - 25:54
    Set Static Folder - 26:55
    Login Layout - 29:13
    Login Page Template - 31:55
    Start Google Login - 33:57
    Passport Intro - 36:46
    Passport Config & Sessions - 39:00
    User Model - 42:49
    Passport Google Strategy - 45:41
    Auth Routes - 49:50
    Save Google Profile Data - 55:06
    Logout - 59:54
    Navigation - 1:01:11
    Auth Middleware - 1:03:22
    Store Sessions In Database - 1:08:36
    Story Model - 1:12:27
    Dashboard Stories - 1:14:44
    Add Story - 1:21:57
    Format Date Handlebar Helper - 1:33:35
    Public Stories - 1:36:40
    Truncate & StripTags Helpers - 1:44:10
    Edit Icon Helper - 1:47:04
    Edit Story - 1:54:21
    Method Override For PUT Requests - 2:02:30
    Method Override For DELETE Requests - 2:10:56
    Single Story Page - 2:18:46
    User Stories - 2:24:36

    • @TraversyMedia
      @TraversyMedia  4 года назад +17

      @@arielcg_ Wow I did not even know about this. Some RUclipsr I am haha

    • @cherulast7998
      @cherulast7998 4 года назад

      @@arielcg_ I'm trying to execute this:
      $ npm install express --save or any dependency i cant install it it show me the below error type please help me brad !!!
      And I'm getting this log:
      > npm
      > ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request
      > to npm.jibo.com:8080/express failed, reason: connect ETIMEDOUT
      > 10.0.0.106:8080 npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or
      > have bad network settings. npm ERR! network npm ERR! network If you
      > are behind a proxy, please make sure that the npm ERR! network 'proxy'
      > config is set properly. See: 'npm help config'
      I have no Idea what I'm doing with Node and npm because I'm new to this
      I have tried to look for a solution, but nothing points me in the right direction, probably because I'm asking wrong questions.
      i have try to excute this :
      Npm config set registry registry.npmjs.org/
      But i cant install express or any other dependency
      I am student in college i use wifi does this have problem?
      Please guys help me out one of you pleases 🙏🙏🙏🙏🙏🙏🙏🙏

    • @imaneziani4016
      @imaneziani4016 4 года назад

      Ariel, is this tutorial for beginners? Someone who knows some JS only.

    • @allanalexander8049
      @allanalexander8049 4 года назад

      Handlebars: Access has been denied to resolve the property. I've been getting this warning. So I'm using handlebars/allow-prototype-access to pass in the data. But this seems to be vulnerable to security risks for a production level application. Anybody who's been able to solve this issue?

    • @TraversyMedia
      @TraversyMedia  4 года назад +2

      @@allanalexander8049 Are you using .lean() on the query? Check this page - stackoverflow.com/questions/59690923/handlebars-access-has-been-denied-to-resolve-the-property-from-because-it-is

  • @brooke946
    @brooke946 Год назад +69

    Awesome tutorial!
    To others doing it in 2023, here are fixes for a few errors I got due to updated versions of Mongoose:
    - One is around the Authentication section of the video: 'MongooseError: Model.findById() no longer accepts a callback'. I had success changing the code to deserializeUser at the end of passport.js to:
    passport.deserializeUser(async (id, done) => {
    done(null, await User.findById(id))
    })
    - Another error was the DELETE request section, in the stories.js file: 'TypeError: Story.remove is not a function'. Here I had success changing Story.remove() to Story.deleteOne()

    • @gimmethat21
      @gimmethat21 Год назад +10

      OMG! Thank you so much! You're a GODSEND. I hope your pillow is always cold at night.

    • @aaronsimpson4250
      @aaronsimpson4250 9 месяцев назад

      THANK YOU!!

    • @pavelasbulatovas3520
      @pavelasbulatovas3520 8 месяцев назад

      Also after mongoose v6+ the mongoose.connect(uri, options), for options:
      useUnifiedTopology: true,
      useNewUrlParser: true,
      useCreateIndex: true,
      useFindAndModify: false
      there is no need to add these.
      basically, you can use: mongoose.connect(uri), because these methods are now used as default.

    • @57Sauce
      @57Sauce 2 месяца назад

      Thank you!

    • @ABHISHEKRANA-zs7jr
      @ABHISHEKRANA-zs7jr 2 месяца назад

      router.get('/logout', (req, res, next) => {
      req.logout((err) => {
      if (err) {
      return next(err);
      }
      res.redirect('/');
      });
      });
      for errror
      req#logout requires a callback function

  • @DaKingOfBall23
    @DaKingOfBall23 2 года назад +30

    const { engine } = require("express-handlebars");
    app.engine(
    "hbs",
    engine({
    extname: "hbs",
    defaultLayout: false,
    layoutsDir: "views/layouts/",
    })
    );
    app.set("view engine", "hbs");
    app.set("views", "./views");
    This should work if anyone stuck

    • @shivani9840
      @shivani9840 2 года назад

      Hey Ajay! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?

    • @neko669
      @neko669 2 года назад

      Thanks for the help but mine is still not working, I am getting this Error: No default engine was specified and no extension was provided.

    • @user-nj4dc2tr4e
      @user-nj4dc2tr4e 2 года назад

      Thanks!!

    • @bethe4957
      @bethe4957 2 года назад

      Thank you!

    • @alessioperrone3907
      @alessioperrone3907 2 года назад

      dont u have problems with MongoStore? it told me this
      MongoStore.create({mongoUrl: process.env.MONGO_URI,}),
      ^
      TypeError: Cannot read properties of undefined (reading 'create')

  • @desoga
    @desoga 4 года назад +315

    The timestamp feature is really user friendly. Good one from youtube.

    • @TraversyMedia
      @TraversyMedia  4 года назад +92

      I know right? I just found out about it. I will be using it quite a bit from now on

    • @desoga
      @desoga 4 года назад +1

      @@TraversyMedia Awesome!

    • @natharamgorakhram361
      @natharamgorakhram361 4 года назад

      @@TraversyMedia I am getting error 'TokenError: client_secret is missing'.

    • @_.sunnyraj._
      @_.sunnyraj._ 4 года назад

      agreed

    • @kazcode1937
      @kazcode1937 3 года назад

      @@TraversyMedia how to deploy this project

  • @fvgoya
    @fvgoya 4 года назад +32

    Brad is the type of person that, when delivery something, delivery much more than expect. Thank you for always help us with amazing contents.

  • @ShogoMakishimaxx
    @ShogoMakishimaxx 2 года назад +16

    Honestly, it seems that we all love the videos like this. It's raw, shows that even the most seasoned get tired, burnt, and still have to google, and it encompasses the REAL process. I know that this is not advantageous for you, especially being tired, but we love the rawness. Keep em coming if you desired to! If not, then your regular tutorials work out just as well. :) Thanks Brad!

  • @crypt0z
    @crypt0z 4 года назад +40

    2 days ago I made the decision to change my life and become a full stack dev. Then Brad drops the mother of all node tutorials. BOOOOM. Thanks Brad, your my favorite teacher!

  • @naeemtahir5036
    @naeemtahir5036 4 года назад +106

    It's difficult to live in a third world country and buy udemy courses to keep up with modern technologies. But your videos on different issues and technologies are so much helpful for me and I needed a video like this so badly, Thank you so much, Brad. Love from Pakistan.

    • @jellycoding
      @jellycoding 3 года назад +12

      Now Udemy has become very expensive. Normal price I get for Node and React corses are 95-100 Euro (~120 dollars). And I live in Sweden and can't afford that. So everyone be sure to don't block adds on RUclips so we can keep this RUclips learning alive.

    • @aaaaaaaaaa9837
      @aaaaaaaaaa9837 3 года назад +6

      @@jellycoding WOW here in Brazil it's just 4 euros on sale

    • @jellycoding
      @jellycoding 3 года назад +2

      @@aaaaaaaaaa9837 Ohh .... I was just looking at Griders "The Complete Developers Guide to MongoDB". For me it is 99.99 Euro (~ $119). it's an insane price that I sadly can't afford.

    • @siddhantraj5323
      @siddhantraj5323 3 года назад

      in india we get for less that 7 $'s approx

    • @jellycoding
      @jellycoding 3 года назад

      @@siddhantraj5323 Really? Why is it so expensive in Sweden? I checked right now and Traversy course MERN is 149.99 Euros (~179 dollar). That's crazy.

  • @TheAremoh
    @TheAremoh 4 года назад +123

    That introductory sound. You're the BEST Brad.

    • @RexGalilae
      @RexGalilae 4 года назад +4

      Ngl I get chubbed up every time I hear it

    • @sonarsphere
      @sonarsphere 4 года назад +3

      It drives me nuts. Always skip.

    • @TraversyMedia
      @TraversyMedia  4 года назад +34

      @@sonarsphere Sorry :( I tried to make as short as possible. I also stopped sponsors for now so you guys don't have to watch a 30 sec ad

    • @saoudeltelawy8971
      @saoudeltelawy8971 4 года назад

      This is so great .. so this is a topic for anyone “Front end “ and want to know about Backend as newbie of BAckend using “Node.Js” ... am i right???

    • @TraversyMedia
      @TraversyMedia  4 года назад +12

      @@saoudeltelawy8971 Yes, this is using server side templates as opposed to rendering a JSON API and using a frontend framework. I may do the same app using React on the frontend at some point

  • @gogoikabir
    @gogoikabir 4 года назад +30

    I was looking for passport and google Oauth yesterday 🙃. Now I have a tutorial from by fav instructor ❣️.

  • @abdulsamadgomda4387
    @abdulsamadgomda4387 2 года назад +53

    In the new version of passport, req.logout() is now an asynchronous function, whereas previously it was synchronous. Hence you need to modify the logout route from the tutorial.
    The logout route was previously:
    router.get('/logout', (req, res, next) => {
    req.logout();
    res.redirect('/')
    })
    should be modified to:
    router.get('/logout', (req, res, next) => {
    req.logout((error)=>{
    if (error) {return next(error)}
    res.redirect('/')
    });
    })

    • @zedshockblade7157
      @zedshockblade7157 2 года назад

      What is the use of the accessToken and refreshToken in the callback? Since you only need the profile to set up the session.

    • @carosendahl
      @carosendahl Год назад +2

      The code:
      router.get('/logout', (req, res, next) => {
      req.logout((error)=>{
      if (error) {return next(error)}
      res.redirect('/')
      });
      })
      should be
      router.get('/logout', (req, res, next) => {
      req.logout((error)=>{
      if (error) {return next(error)}
      });
      res.redirect('/')
      })

    • @athbuys3588
      @athbuys3588 Год назад

      thanks, this helped me out

    • @majidjamili2157
      @majidjamili2157 Год назад

      Hello, in the stroy POST route when you define -> req.body.user = req.user.id, It keeps seding an error : BSONTypeError: Argument passed in must be a string of 12 bytes or a string of 24 hex characters or an integer
      When I know that the id send to mongo is not an onbjectId type and that's wht it doesnt work, but how it worked for your code?
      Any help please ????

    • @michaelrandazzo1957
      @michaelrandazzo1957 Год назад

      Hey, thanks! Going over this again and def won't work the old way. I do have a question. I understand 'async await' to be used when the function needs to wait for something. I don't see the words "async' or 'await' here. and I'm guessing maybe we wait a beat for whether or not we have an error? Am I totally out in left field? That's where you'll usually find me.

  • @jellycoding
    @jellycoding 3 года назад +28

    *If you get ERROR* ... MongoStore cannot be invoked without 'new'.
    Solution is to change two lines of code:
    *OLD* const MongoStore = require('connect-mongo')(session)
    *NEW* const MongoStore = require('connect-mongo')
    *OLD* store: new MongoStore({ mongooseConnection: mongoose.connection })
    *NEW* store: MongoStore.create({ mongoUrl: process.env.MONGO_URI })
    Be sure you have the name MONGO_URI in your env-file.

  • @Sam-eh8eg
    @Sam-eh8eg 4 года назад +54

    I love how you leave the mistakes in the video, debugging is such a big part of the process.

    • @arijitroy8390
      @arijitroy8390 3 года назад

      did u notice any?

    • @volodymyr7214
      @volodymyr7214 2 года назад

      These are not mistakes, but changes in some packages over time )) The older tutorial you use, the more problems you encounter.

    • @seedme
      @seedme 2 года назад +1

      @@arijitroy8390 there are and there should be in real life programming. e.g., at @ the date should be story.createdAt not date now.

    • @seedme
      @seedme 2 года назад +1

      @@volodymyr7214 and after two years there are even more, but it is the process of making everything running really makes you progressing isn't it?

    • @volodymyr7214
      @volodymyr7214 2 года назад

      @@seedme For sure! I like challenges )

  • @aakashtiwari3677
    @aakashtiwari3677 2 года назад +10

    1.) MongoParseError: option usefindandmodify is not supported
    If above error occurs in your code. Just remove useFindAndModify: false this from your code.
    2.) app.engine('.hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}));
    app.set('view engine', '.hbs');
    If you use above code and if TypeError: exphbs is not a function this error occurs, just use "exphbs.engine( )" instead of "exphbs( )"

    • @sampro1993
      @sampro1993 2 года назад

      Thank you :)

    • @chittychitty15
      @chittychitty15 2 года назад

      Cheers buddy.

    • @alessioperrone3907
      @alessioperrone3907 2 года назад

      do u know ho to solve this error it gaves me?
      store: MongoStore.create({mongoUrl: process.env.MONGO_URI,}),
      ^
      TypeError: MongoStore.create is not a function

    • @LucasLima-qq5yd
      @LucasLima-qq5yd Год назад

      Thanks mate!

  • @projectcarver
    @projectcarver 6 месяцев назад +3

    The logout function for Passport no longer works since version 0.6.0. You'll want to use:
    router.get('/logout', function(req, res, next) {
    req.logout(function(err) {
    if (err) {
    return next(err);
    }
    res.redirect('/');
    });
    });

  • @evenzero
    @evenzero 4 года назад +20

    YEAH!!!!! more long form content from Brad is what we need, GO BRAD!!!!

    • @evenzero
      @evenzero 4 года назад

      i'm getting a "MongooseServerSelectionError: bad auth Authentication failed." despite following all the steps, full error log here pastebin.com/R5ACrSaj in case anyone wants to help.

    • @Techjd
      @Techjd 4 года назад

      @@evenzero Maybe it's due to that authentication link. Try MongoDB with a different account.

    • @DevilsDaddy1
      @DevilsDaddy1 4 года назад

      @@evenzero remove < > these angled brackets surrounding password and dbname in the connection URL

    • @kazcode1937
      @kazcode1937 3 года назад

      @@Techjd bro how to deploy this...im getting error in heroku while deploy

  • @bobobobbyboy
    @bobobobbyboy 2 года назад +5

    As per an update to passport, in /routes/auth.js, in the logout helper, replace
    ```
    req.logout();
    res.redirect();
    ```
    with
    ```
    req.logout(function(err) {
    if (err) { return next(err); }
    res.redirect('/');
    });
    ```

  • @hemant3123
    @hemant3123 5 месяцев назад +4

    const exphbs = require('express-handlebars');
    app.engine('.hbs', exphbs.engine({extname: '.hbs'}));
    app.set('view engine', '.hbs');
    This should work if anyone stuck

  • @serpent9361
    @serpent9361 2 года назад +3

    If anyone is doing this currently, there have been some package changes, just copy Brad's package.json file and do `npm i` instead of installing from the terminal. Good exercise would be to do this, then update the packages and fix the changes.

  • @RobinJesba
    @RobinJesba 4 года назад +14

    Just now, I spoke with my friend about learning nodejs.
    And here they are.
    Man! This is Awesome 🤘🏻
    Love your content ❤️

  • @SreeramVenkitesh
    @SreeramVenkitesh 4 года назад +2

    I swear to god I took the entire last week making a webapp with Node, Express, and Google Oauth with Passport. It was challenging to find resources for all of these, but I had fun. I finally pack up everything and release the project and decided to chill, and I get the notification for this video!
    Eventhough I just completed a project I'll surely try this out Brad! Thanks for all the effort you're putting in!

  • @namlasyruhdwohc6340
    @namlasyruhdwohc6340 2 года назад +13

    *UPDATE:* For "Logout", the new way should be:
    router.get('/logout', (req, res, next) => {
    req.logout( (err) => {
    if(err){return next(err)}
    res.redirect('/')
    } )
    })

    • @braindrainfactor
      @braindrainfactor 2 года назад

      Does it remove session in MongoDB? In my case this method doesn't remove session and req.session.destroy() either. I'm using passport-local instead of GoogleOAuth.

    • @cdialpha
      @cdialpha 2 года назад

      Thanks this helped! What was the update that made this necessary ?

    • @MrOregonCurtis
      @MrOregonCurtis 2 года назад

      Confirmed that this fixed the "req#logout requires a callback function" error message that I was getting. Thanks Namlas!

    • @vitoracacio1
      @vitoracacio1 2 года назад

      Also fixed it for me. Thanks!

  • @dev_willyy
    @dev_willyy 8 месяцев назад +1

    The part of the video 02:05:02 where Brad said, "let's actually replace the var with let..i don't like the sight of var" really got me laughing & chuckling.
    This ia an awesome video altogether! It helped me gain mastery of google-auth. Thanks a ton from Nigeria!

  • @jonathanself1263
    @jonathanself1263 2 года назад +39

    15:20 Mongoose 6+: useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. Mongoose 6 always behaves as if useNewUrlParser, useUnifiedTopology, and useCreateIndex are true, and useFindAndModify is false. Please remove these options from your code.

    • @rbdtrades9790
      @rbdtrades9790 Год назад

      thanks, fixed my bug

    • @snehgupta5720
      @snehgupta5720 Год назад

      how much i have to remove , it will be great if you can share the code

    • @KaranKumar-hs1fu
      @KaranKumar-hs1fu Год назад

      then instead of these options , what i"ll add?

  • @sardorjumanazarov441
    @sardorjumanazarov441 4 года назад +2

    It is immpossible to believe, Brad made over 2 hours course for youtube. awesome

  • @punjabitech5546
    @punjabitech5546 3 года назад +3

    My whole semester in 2:30 hours
    Thanks Brad

  • @BarakAlmog
    @BarakAlmog 3 года назад

    Anyone else has the urge going on a buying spree on Udemy of all of his courses?...
    I already bought the Angular in-depth, waiting for a good deal to buy the NodeJS and React in-depth courses.
    So happy I found this channel!

  • @srdjagunjic
    @srdjagunjic 4 года назад +10

    Brad, to escape text formatting when pasting, use CTRL+SHIFT+V ;)

  • @LeoMiranda
    @LeoMiranda 3 года назад

    Thank you Brad, you are the best!
    At 2:00:00, instead of creating "select" Helper, I created a "ifEqual" Helper:
    ifEqual: function (input, value) {
    return input == value
    }
    These are my options in edit.hbs:
    Public
    private

  • @ctushr
    @ctushr 4 года назад +33

    I needed this so badly. 😭

    • @kazcode1937
      @kazcode1937 3 года назад

      bro how to deploy this...im getting error in heroku while deploy

  • @consoledoterror971
    @consoledoterror971 3 года назад +1

    The one main thing I wanted from this video is to how to maintain user login session using mongodb as the session store, and I got it at 1:09:36.
    Thanks Brad

  • @samuelnmeje
    @samuelnmeje 4 года назад +25

    Nice one, almost the Equivalent to an Udemy Course.

    • @kazcode1937
      @kazcode1937 3 года назад

      bro how to deploy this...im getting error in heroku while deploy

    • @tejasvigupta07
      @tejasvigupta07 3 года назад +1

      @@kazcode1937 How can you expect someone to answer you if you don't put the type of error you are getting?

  • @prakashreddy3311
    @prakashreddy3311 4 года назад +1

    I was probably the 968 or 986th person to hit the like button. I was happy to see zero dislikes 2 hours ago. Now I see 1 dislike. Wonder if that guy really watched the video before hitting the dislike button. Anyways I really owe a big thanks to Brad. Watched couple of videos from his channel. A lot more to learn. Thanks a lot Brad. You are one of those rare teachers. Respect.

  • @sharminoomatia
    @sharminoomatia 4 года назад +5

    This is just so amazing, I learn a lot from all your videos. Thank you so much for all the efforts you put in to make all these videos that help your viewers so much. It's just amazing. Thank you so much Brad Traversy Sir. Thanks a lot . You are one of my favorite instructors

  • @jafetguzman5012
    @jafetguzman5012 Год назад +16

    At 1:09:00 you need to change MongoStorore to this:
    const MongoStore=require("connect-mongo")
    and your app.use(session) code to:
    app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false,
    store: MongoStore.create({
    mongoUrl:process.env.MONGO_URI,
    mongooseConnection: mongoose.connection}),

    }))

    • @JD-hq1kn
      @JD-hq1kn Год назад +1

      Thanks for this quick fix.🤗

    • @aakmsh
      @aakmsh 9 месяцев назад

      Thanks mate❤

  • @brilliantatosam
    @brilliantatosam 4 года назад +1

    Hello Brad! I am your student from Ghana. I just want you to know that, you're the best. I picked up your JavaScript course on udemy and I loved it.

  • @EwanHC
    @EwanHC 4 года назад +21

    Very helpful tutorial, thanks!
    When I go to create an API key I first have to go through the OAuth consent screen which requires me to choose a User Type and gives me two options, Internal and External and then requires some config such as setting an application name. Might be worth mentioning this in the comments or description since it's not included in the video.

    • @adarshkunwar8139
      @adarshkunwar8139 4 года назад

      Heyy Ewan is that going to charge for API services on usage? I m stuck.

    • @surfoyb8727
      @surfoyb8727 4 года назад

      has anyone got anymore information on this?

    • @EwanHC
      @EwanHC 4 года назад +4

      @@surfoyb8727 I just chose external, as the internal option was disabled, then set an application name and everything worked fine

    • @adarshkunwar8139
      @adarshkunwar8139 4 года назад +1

      @@surfoyb8727 I went on to chose external and set up everything else that was required and its working all well even when I have not added any billing account. I don't know why.

    • @FullOfCompassion
      @FullOfCompassion 4 года назад

      I chose external as well and for now it seems to be working. But as far as I understand, once you reach 100 signed up users, the verification process is implemented.

  • @unklewigglez
    @unklewigglez 4 года назад +1

    Thank you so much for this Brad! I'm one of those that bought your dev to deployment course a while back and have to say that this is an absolutely incredible gift! I will definitely be updating my story books app!
    Thank you! Thank you! Thank you!

    • @TraversyMedia
      @TraversyMedia  4 года назад +1

      There are a few things missing including the comment functionality. I may do a part 2 with comments and add some new stuff as well like a local login option

  • @dean6046
    @dean6046 4 года назад +6

    Thank you Brad. This is literally exactly what I was waiting for. I will forever be a patreon!

  • @awrjkf
    @awrjkf 4 года назад +1

    @2:02:11: "Told you this wouldn't be polished" Sir, we don't care if it is polished or not. We love any content that you put out because you are an ocean of knowledge for us devs. Thank you.

  • @matthewvaccaro8877
    @matthewvaccaro8877 3 года назад +8

    I love how raw this video is. It shows the honest view into engineering and not this "pro" fake view that good engineers just coding a million miles an hour. Great video!

  • @ytabhigan
    @ytabhigan 4 года назад +1

    Oh man, I watched this video a week ago and it completely converted me from being a full time C#/JAVA developer into a a Node.js one, ever since Node.js released it was like a mystery to me, I watched tutorials before but man you can teach. I started a new project (commissioned by an old customer of mine) using Java a month ago, then I watched this and now I'm redeveloping the whole project using Node and Express and guess what I'm enjoying it. I can't think of a reason why you don't create for Udemy, I would definitely buy some of your courses. Thanks man you just made my work so easy.

    • @humankind5627
      @humankind5627 4 года назад

      He actually has many udemy courses

    • @ytabhigan
      @ytabhigan 4 года назад

      @@humankind5627 I'll definitely check it out.

    • @ytabhigan
      @ytabhigan 4 года назад

      @@humankind5627 Just bought "Electron From Scratch: Build Desktop Apps With JavaScript" by Brad.

  • @kushagrsharma4398
    @kushagrsharma4398 4 года назад +3

    A great video for those of us trying to learn backend development. Thanks for making such great tutorials Brad!

  • @Kaylaanngrace
    @Kaylaanngrace Год назад

    I really appreciate this "unpolished" tutorial because it gives a realistic look into the process of developing an application. Thank you for sharing!

  • @khamphone86
    @khamphone86 4 года назад +6

    long time no see
    missed you so much
    busy with two daughters these days

    • @TraversyMedia
      @TraversyMedia  4 года назад +5

      Congrats! Daughters are the best :)

  • @mukey
    @mukey Год назад

    Thanks for taking the time to explain all of the steps. Lots of videos, but not all of them take the time to thoroughly explain everything.

  • @sheel6
    @sheel6 4 года назад

    who are these people who dislike such a great tutorial video? they don't deserve to be here.

  • @bonchan4404
    @bonchan4404 4 года назад +56

    Actual Tutorial : 2:28:42
    Me: 3 days . HAHAHA

    • @JordanAF808
      @JordanAF808 4 года назад +3

      Me: 4 days. 2 days of fixing typos, smh.

    • @tarunsankhla2328
      @tarunsankhla2328 3 года назад

      Same it took me 3 days 😄

    • @saadmughal2185
      @saadmughal2185 3 года назад

      @@tarunsankhla2328 bro aik error a rha hai 25:54 pr views folders sa files match nhi ho rhi
      Links pr visit kro tokich show nhi hota

  • @LongJourneys
    @LongJourneys 3 года назад +1

    the "clienID" at 47:30 was driving me nuts. Also it's comforting to know that I'm not the only one who does stuff like this.

  • @colinprincipe6293
    @colinprincipe6293 2 года назад +1

    One of the best tutorial videos I’ve ever watched. I feel like I learned more in this video than I have in the past year of front end development

  • @MrOregonCurtis
    @MrOregonCurtis 2 года назад +3

    At 1:44:13 I wasn't getting the profile images loaded. Google was returning a 403. When I placed referrerpolicy='no-referrer' in the image element inside of index.hbs it worked.

  • @aashiqahmed5273
    @aashiqahmed5273 4 года назад

    This shows why you are the best,
    Crystal clear explanation which lacks in other youtubers.You are the best!

  • @aesthetic.sixteen
    @aesthetic.sixteen 4 года назад +5

    //Deploying this app on heroku
    remove cross-env from start script while deploying app on heroku
    this will help
    Add your app uri (domain on which you are going to host your webapp) to Google O auth ' s authorized urls by this change your url is verified to use Google O auth service
    it will take some time !!!

  • @mitchellfoley8331
    @mitchellfoley8331 4 года назад

    I recently started to learn JavaScript to fill some unexpected free time (thanks COVID.....) and I have to say that you are one of the instructors I have ever found on RUclips! You have a knack for explaining what you are doing at just the right level of detail to understand what is going on without getting bogged down. Thank you!

  • @firebrickfilmstv
    @firebrickfilmstv 4 года назад +4

    I love your project based approach to your videos :) Really helps to show a full and realistic development workflow in a way that a lot of online programming courses/tutorials don't.

  • @ZeusTheKid
    @ZeusTheKid 4 года назад +1

    It's crazy that I was searching for Traversy MongoDB videos and he literally made a new one today :)

  • @aswinsampath3773
    @aswinsampath3773 3 года назад +4

    For People facing error of connect-mongo @1:10:21 install connect-mongo version 3.2.0
    npm uninstall connect-mongo
    npm install connect-mongo@3.2.0

    • @LeoMiranda
      @LeoMiranda 3 года назад

      You save me man, thanks

    • @mceloooooo
      @mceloooooo 3 года назад

      tried almost everything and this one was the one and only ty bud.

    • @jasonlee7227
      @jasonlee7227 3 года назад

      Thank you so very much for the solution. I have been searching around trying to figure out a solution. And nothing worked. So I appreciate your help

  • @LucXX36
    @LucXX36 4 года назад

    Man, can't believe it. I just started an app where I want to use Node, Express, MongoDB and thought about to use next to an user authetification Google OAuth. You can imagine how I got excided when I saw this video. ))) Thank you

  • @sudipshrestha9377
    @sudipshrestha9377 3 года назад +3

    stuck at edit icon helper 1:53:03 , throw me an error : " Cannot read property '_id' of undefined ", while click on public stories. Help me out..

    • @shubhamverma192
      @shubhamverma192 3 года назад +1

      Same have you found the solution yet??

    • @shane27099
      @shane27099 2 года назад +1

      i am also stuck there...did any one find the solution

  • @worldwideflyby
    @worldwideflyby Год назад +1

    Fantastic tutorial, took me weeks to get through (a few mins at a time here and there) but this is fantastically in depth and delivered so clearly. Thanks!

  • @nishanttyagi9342
    @nishanttyagi9342 4 года назад +6

    Brad's 2 hour course = other's 5-6 hour's

    • @badripaudel77
      @badripaudel77 4 года назад +1

      Yes that's true. I feel the same.

    • @awekeningbro1207
      @awekeningbro1207 4 года назад +2

      i am pretty sure it took him longer than that to record the video

    • @maskman4821
      @maskman4821 4 года назад

      true, unlike maximilliam's super long courses, brad's short courses completely outperform !!!

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 4 года назад

      Can we get a celebrity boxing match from all the -grift- course sales companies.
      Idk if some of these comapnies are like "sister comapnies" or however one would phrase that.
      Pluralsight vs Udemy coursemakers celebrity boxing.
      Stefan Mischook could be the referee.

  • @drivenbycuriosity
    @drivenbycuriosity 3 года назад

    Just completed building this. Took me like ~6Hrs. Totally understand your handwork behind creating such an amazing tutorial. Learned a lot of things. Actually this is my first time ever implementing google sign-in.
    Thank you so much

    • @soumyadipdas4245
      @soumyadipdas4245 2 года назад

      Is it deploy you in any platform like heroku

  • @girlsincode9255
    @girlsincode9255 3 года назад +3

    Easier version for edit story form select:
    Public
    Private
    and in utils:
    export function select(selected, option) {
    return (selected == option) ? 'selected="selected"' : '';
    }

  • @FabioGiacomini
    @FabioGiacomini 6 месяцев назад

    Brad you are a talented teacher and programmer. This tutorial is very complete, I think I have to watch more and more times to understand everything well. Thanks

  • @troymitchel4790
    @troymitchel4790 4 года назад +7

    Great content! This would also be cool to use MySQL as an alternative to MongoDB.

  • @vndosapp
    @vndosapp 3 года назад +1

    that debugging at 1:32:00 was epic, a really important skill.

  • @reedhimes
    @reedhimes Год назад +4

    couldnt get the handlebars working as shown in the video... something must have changed since it was created. what worked for me was replacing "const exphbs = require('express-handlebars')" with "const { engine } = require('express-handlebars')" and "app.engine('.hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' }))" with "app.engine('handlbars', engine({ extname: '.hbs', defaultLayout: "main" }))"... was getting an error exphbs is not a function. found the solution here: ruclips.net/video/VSDZvQeR34M/видео.html

  • @AngelCodes95
    @AngelCodes95 2 месяца назад

    here from 100Devs Class 45 Homework! Thanks for making this!

  • @patrickconrad4023
    @patrickconrad4023 4 года назад

    Dude you're incredible. I got really discouraged starting with backend stuff. I feel like I'm 10000times more understanding of whats going on now. Thank you!

  • @braindrainfactor
    @braindrainfactor 2 года назад +2

    To deploy it on Heroku, first of all Git installation is required on your local machine. Next, you have to modify the packages.json file. Find your node and npm version. In my case 16.11.1 for node and 8.0.0 for npm. Add in the packages.json the following lines :
    "engines": {
    "node": "16.x",
    "npm": "8.x"
    },
    Remove cross-env from start script and modify it like this:
    "scripts": {
    "start": "node app.js"
    },
    Next in command line:
    heroku login -i
    cd my-project/
    git init
    heroku create
    heroku git:remote -a

  • @ubarjaktarev
    @ubarjaktarev Год назад

    Took me around 5 hours to go through this in one sitting, except I used EJS instead of handlebars, but really learned a lot. The Google OAuth part is invaluable. Thanks Brad

    • @jerryronnau3560
      @jerryronnau3560 Год назад +1

      happen to have a git repo I could peek at for EJS set up? I'm not understanding why mine isn't rendering properly

    • @HM-ty2ec
      @HM-ty2ec Год назад +1

      Hey, can you give the repo link / source code if possible

  • @thomasogden8581
    @thomasogden8581 4 года назад

    This may be the best advanced web dev tutorial on youtube. Top work Brad

  • @deepestbars3889
    @deepestbars3889 Год назад +1

    Thank you so much! I have finally finish this tutorial

  • @lakshjadhwani6933
    @lakshjadhwani6933 4 года назад

    You are THE BEST INSTRUCTOR I have ever seen!!! I watched sooooo many of your RUclips tutorials and also have completed 3 of your Udemy courses!!! I just love your workflow!!!!
    Please please make complete tutorial on MERN stack app on Ecommerce webapp or a social media webapp!!!!🙏🙏🙏🙏🙏

  • @Halom8co
    @Halom8co 4 года назад +1

    In regards to the Oauth consent page issue, choose external. Then, you only need to type in the name of the application and scroll down and save. In not filling out all of the information, it does cap the number of users that can log in to the app to 100, but it should be fine for the sake of completing the tutorial.

  • @_tgwilson_
    @_tgwilson_ 2 года назад +1

    navigation @1:01:30

    StoryBooks


    Public Stories
    Dashboard
    Logout

  • @tapansonak1431
    @tapansonak1431 2 года назад

    Thanks a lot Brad, this is by far the most complex application that I have made. Please make more tutorials like this.

  • @nilanjandeb1020
    @nilanjandeb1020 4 года назад

    TRAVERSY MEDIA is the best web Dev explaining channel and Instructor I have ever seen...!!

  • @user-fy4qe7so3o
    @user-fy4qe7so3o 4 года назад +1

    Dude slow down I'm trying to keep up, Each day I'm adding another video of yours to my watch later list..
    All jokes aside now I'm having so much fun watching you keep up with the good work.

  • @blessdarah1256
    @blessdarah1256 4 года назад +1

    Brad, You have finally shown me why I need to learn node! Oh my... this tutorial is like a whole course mehn....

  • @andresfelipeh7586
    @andresfelipeh7586 4 года назад

    You are really an awesome teacher. I have learned with you ( React & Node ) and I did my first project with your course. Now, I'm thankful with this tutorial. Thanks so much.

  • @shashwatgupta_
    @shashwatgupta_ 4 года назад +3

    can somebody tell me is it better to use ejs as our template engine or express-handlebars ? and please recommend any good documentation of express-handlebars because npm's doc of exphbs is not good

    • @jackfrost8969
      @jackfrost8969 4 года назад +1

      both are fairly similar. They only differ in syntaxes.

  • @Agong22067
    @Agong22067 Год назад

    Finished 7/10/23 , god this was really tiring!!! wow!! lots of information to take in, definitely gotta go back and understanding everything through. As always, thanks for the amazing content Brad!

  • @illiaantonenko1866
    @illiaantonenko1866 4 года назад

    Man, you're awesome. I'm now writing on php Laravel and trying to find something useful about Node JS and it is just it. Everything I want to know about Node at the beginning is here and in other your videos about that topic. Thank you!

  • @stealth_chain
    @stealth_chain 4 года назад

    i literally just downloaded a basic express + typescript starter code to get working on my next API project. Good timing.

  • @alwaysgrowww
    @alwaysgrowww 4 года назад +1

    When I saw notification as nodejs from scratch... I thought Am I getting three old video notification... But now only I confirmed this is a new video! LOL

  • @fahdfilsuf4632
    @fahdfilsuf4632 4 года назад

    I don't like posting a comments on RUclips ,
    but brad?
    You forced me . Because You're the best
    ( developer, teacher, youtuber, content creator , person)
    You deserve more then 100M subscribes
    And infinity number of likes ..
    I wish you all great success in your life

  • @puky4685
    @puky4685 4 года назад +1

    Can't wait to wake up and start learning. You're the man, Brad.

  • @kysper50
    @kysper50 4 года назад +1

    So the only way I could get the stripTags and truncate to work is to swap them around.
    Instead of {{stripTags (truncate body 150)}} I had to use {{truncate(stripTags body) 150}} I know it's something I did just wanted to mention it incase anyone's having the same issue. I'm glad I can watch your videos though helps me with my job.

    • @dharvesh408
      @dharvesh408 4 года назад

      Thank you so much 😊, I was also having issue with it. I was searching for comment related to it. It worked. Thanks again...

  • @okanyldrmop
    @okanyldrmop 4 года назад

    It is probably one of the most impressive tutorails that I have ever did, thank you! I hope that you do more tuts like that about node js!

  • @hamzaseif4992
    @hamzaseif4992 3 года назад

    Bro thanks for this comprehensive tutorial , this guy should be given a Nobel prize

  • @mehulmorker8347
    @mehulmorker8347 4 года назад

    Just about to start a project using google oauth and you uploaded this. Thanks man. You are saviour

  • @claude.detchambila
    @claude.detchambila 4 года назад

    Thanks, Brad. I have been watching you since my early days as a student in software development. You have inspired me a lot. It's true that I'm mostly into .Net development but I always find good takeaways from your all tutorials.

  • @harz9556
    @harz9556 Год назад +5

    Check out for 1:12:10 where the {{name}} never shows up.
    -When i made the 'name: req.user.firstName' request, firstName property was never returned, so I tried to console.log the req.user and it did return me the "Id" stored in mongo.
    -So after a chat with a GPT friend we discover a way to make it work and here it's the code modified from the routes>index.js file
    `router.get('/dashboard', ensureAuth, async (req, res) => {
    try {
    const user = await User.findById(req.user.id).select('firstName');
    res.render('dashboard', {
    name: user.firstName,
    });
    } catch (error) {
    console.error(error);
    res.render('error');
    }
    });`
    be sure to add this to the top of the file `const User = require('..User/models/User')`.
    Hope it helps! Great video Brad :)

    • @jeffriley5434
      @jeffriley5434 Год назад +2

      Helped me! Only my file structure was different: `const User = require('../models/User')`
      That was the easy part though!

    • @JD-hq1kn
      @JD-hq1kn Год назад +1

      Awesome !! thanks you saved my precious time

  • @paulgallovich8823
    @paulgallovich8823 4 года назад +1

    I have been looking for this for sometime now, this is awesome and perfect timing! I needed this right now. Brad delivers so much value, that's why I purchase all his courses.

  • @philipmcdonnell7168
    @philipmcdonnell7168 4 года назад +1

    Awesome. You’ve become my goto in inspiration for all things code. I’m still working my way through your Udemy React Front to Back but this has a lot of the functionality my project could use once I have the structure sorted. Many thanks from the UK.

  • @r-i-ch
    @r-i-ch 4 года назад

    Took me a whole day, but got through it.
    Brad - This tutorial is EPIC!!!
    You are a legend!

  • @A1996ARP2075
    @A1996ARP2075 4 года назад +1

    Thank you Brad for making all great videos to help junior developers improve

  • @k.alipardhan6957
    @k.alipardhan6957 2 года назад

    Thank you for long videos like this. They maybe not get views, but they ar good for competent people to dive head first.
    I was your dec 2021 vlog, one thing your could do is break have 60 mins for node/express, 60 mins react, and 60 mins for mongo, password, security, OAuth...

  • @DuyTran-ss4lu
    @DuyTran-ss4lu 4 года назад

    Long or not doesn't matter. We watched it all, Brad.