React Node.js Blog App Full Tutorial (Infinite Scroll, User Roles, Filters) MERN Stack Blog Website

Поділитися
Вставка
  • Опубліковано 31 січ 2025

КОМЕНТАРІ • 134

  • @ghostedbyse7en
    @ghostedbyse7en 2 місяці тому +27

    Hey man, I hope you read this comment. I took a lot of help from one of your earlier videos for my full stack project in college, it went really well and I learnt a lot. Thank you!

  • @ader1473
    @ader1473 2 місяці тому +7

    Currently watching your blog tutorial with next13 and now i get the notification for this video 😂

  • @fistewie
    @fistewie Місяць тому

    Loving this video so far! Great features included in the tutorial like infinite scrolling, sort features, etc. Fantastic job!

  • @RobertoN-pl1ec
    @RobertoN-pl1ec 2 місяці тому +1

    Yes! You back brother! as always with a good mentoring tutorial

  • @johnedet2987
    @johnedet2987 2 місяці тому +7

    One significant challenge with React when building a blog is managing dynamic metadata effectively. Unlike Next.js, which has built-in support for handling metadata, finding a solution using only React can be tricky. Since it’s a blog, having dynamic metadata for each post is essential, and I’m exploring ways to address this without relying on Next.js. Maybe a tuts from you to address this, will be helpful

    • @onax1
      @onax1 Місяць тому

      Use ReactHelmet for handling metadata in React

  • @Nikushimi-19
    @Nikushimi-19 2 місяці тому +1

    Finally a Mern Stacked ♥️ Thank you so much Lama Dev, one of the reason I Graduated and found a job ♥️ Thank you so much..

  • @mirazh8216
    @mirazh8216 2 місяці тому +2

    ❤❤❤❤ the best guy on UA-cam is back.🎉🎉🎉🎉

  • @pastorjorgeaguilar
    @pastorjorgeaguilar 2 місяці тому +3

    i loved your channel lama dev. thank you

  • @PETERFILM
    @PETERFILM 7 днів тому

    Thank you very much for your work! You have the best tutorials on all of UA-cam!

  • @muzamilfootballer5682
    @muzamilfootballer5682 2 місяці тому +1

    Sir you are best on YT 😍 i was waiting for your video from many days and this is super 👌🏻Love u sirr 😍😍

  • @KrishnaList
    @KrishnaList 2 місяці тому

    Always upload quality content. Thanks Lama

  • @coder5336
    @coder5336 2 місяці тому +4

    The best blog app on UA-cam so far. Thank you so much.

  • @mahmudulmr19
    @mahmudulmr19 2 місяці тому

    welcome back my mate!

  • @ToumaRenshi
    @ToumaRenshi 2 місяці тому

    what a perfect time to start to make a new project now after my hard day from work. coffee and programming forever. :)

  • @eQ-13
    @eQ-13 2 місяці тому

    Just liked the video before I watch whole of it because I know its awesome.

  • @abhaypundora6841
    @abhaypundora6841 2 місяці тому +1

    Goat with another project 🐐

  • @AbhishekYadav-ch2mn
    @AbhishekYadav-ch2mn 2 місяці тому +44

    When will you start working on a MERN microservice or microfrontend architecture? All your previous projects have been monolithic. Please consider creating an e-commerce application using a microfrontend and microservice architecture.

    • @coder5336
      @coder5336 2 місяці тому +5

      It's not monolithic. He seperates the backend and the React app runs independently.

    • @AbhishekYadav-ch2mn
      @AbhishekYadav-ch2mn 2 місяці тому +4

      @coder5336 this is not a monolithic. Learn first

    • @bilimlink
      @bilimlink 2 місяці тому

      Glad you back to us , Amazing work ❤ thank you ❤

  • @Reel_InsightYT
    @Reel_InsightYT 11 годин тому

    Love you lama 😀😀

  • @Jeff_Geoff
    @Jeff_Geoff 2 місяці тому

    Larma U are amazing I Really learnt a lot from U than u

  • @davronmaxmudov3972
    @davronmaxmudov3972 2 місяці тому

    Such an amazing project and explanation thank you so much

  • @SarcasticPrince
    @SarcasticPrince 2 місяці тому

    Thanks for the video.First 🎉❤

  • @asianfangirl7057
    @asianfangirl7057 26 днів тому

    Timestamps for my use:
    2:06:06
    3:06:49
    3:25:38

  • @snehashishpatra
    @snehashishpatra 2 місяці тому

    I cannot hold and I would like to say that this reactjs video is a real gem for both beginners and also intermediate level. Sir just a small query can you also please delve into the SEO of react.js it would much worth if the pages are indexed on google I hope we will hear soon from you. I particularly want to learn how do we add open graphs and we have social sharing preview card in react. Thank you again☺☺

    • @nikhilpnath
      @nikhilpnath Місяць тому

      you can use react helmet

  • @LinuxDevC
    @LinuxDevC 2 місяці тому +1

    lama the best forever

  • @udy1897
    @udy1897 Місяць тому +1

    Completed 💌

    • @christopherhenry981
      @christopherhenry981 6 днів тому

      Do it work completely

    • @christopherhenry981
      @christopherhenry981 6 днів тому +1

      I haven't tried it but I tried to copy paste completed version so I can check if it's working but that is not working

    • @MuhammadFikri-ds4hm
      @MuhammadFikri-ds4hm 5 днів тому

      i got problem on Add Clerk User, do you know how to fix it?

    • @udy1897
      @udy1897 5 днів тому

      Mention timestamp where you stuck i will help​@@MuhammadFikri-ds4hm

  • @cosmicsoftwares
    @cosmicsoftwares 28 днів тому

    The reason i earn through JavaScript its because of you

  • @muhammadjunaid1628
    @muhammadjunaid1628 21 день тому

    Thank you lama dev.

  • @NHNTV
    @NHNTV 28 днів тому

    Great project, thank you!

  • @tgdb-ace
    @tgdb-ace Місяць тому

    This is a sick idea and an indication of the USA goal and what it's doing.
    Only the silo 1 is the USA

  • @lalitbisht8381
    @lalitbisht8381 2 місяці тому +1

    That would be really helpful if you make an auction website through which user can bid ❤

  • @mDHARYL
    @mDHARYL 2 місяці тому +1

    Great project.
    Next use typescript 😊
    Thank you 🎉

  • @abelmarkos5753
    @abelmarkos5753 2 місяці тому

    Nice project Lama

  • @andyloren4826
    @andyloren4826 2 місяці тому

    awesome project, great job

  • @ACertainWebDeveloper
    @ACertainWebDeveloper 2 місяці тому

    Thanks man, real from zero web apps are disappearing nowadays.

  • @FrontendNerd-lg3oh
    @FrontendNerd-lg3oh 2 місяці тому

    this actaully PRO LEVEL
    thanks

  • @Anonymous0b1000
    @Anonymous0b1000 2 місяці тому

    Let's gooooooo!!!!!

  • @UdayKiran33333
    @UdayKiran33333 2 місяці тому

    Nice content. Please bring more advanced content !

  • @mriswan5806
    @mriswan5806 2 місяці тому +4

    hello sir, can i know how to solve error on navbar and Image, thanks
    An empty string ("") was passed to the src attribute. This may cause the browser to download the whole page again over the network. To fix this, either do not render the element at all or pass null to src instead of an empty string. Error Component Stack

    • @-PrashanthG
      @-PrashanthG Місяць тому +1

      i am also facing the same error, the profile picture is not being saved in the database so it is not being updated in the posts and the comments section. Please do notify me if you solve the issue.

    • @SarcasticPrince
      @SarcasticPrince Місяць тому +1

      I am getting an error 'Missing publicKey during ImageKit initialization' even I gave it already
      Can you please help me?

    • @iq-dev
      @iq-dev Місяць тому +1

      @@SarcasticPrince same here. Let me know if you have fixed it.

    • @MalayalamHub5001
      @MalayalamHub5001 Місяць тому +1

      Did anyone solved this
      I’am also facing the same issue

    • @hassamata2594
      @hassamata2594 Місяць тому +1

      Same issue

  • @AnthonyObi-wr6ro
    @AnthonyObi-wr6ro 15 днів тому

    Thank you for this tutorial. I saw that you used two different domain names in the cloudpanel while registering the backend and the frontend. Please do i need to register two domain names and have their DNS setup for it to work?

  • @betsonwilliam9470
    @betsonwilliam9470 2 місяці тому

    Thank you lama. Please consider downloadable Digital product ecommerce website with nextjs for the future project

  • @CanisLatransMedia
    @CanisLatransMedia 2 місяці тому

    Hiya. Maybe sillly question but why you didn't use new react19'th useActionState with actions? Is it coz you wanted to showcase the whole Tquery functionality or is better to not mix both ? Thank you- great tutorial🙌

  • @KhizarAli-z6v
    @KhizarAli-z6v Місяць тому

    Just like that is permenant bro hehehe 😍😅😅 thankyou so much learn alot

  • @makarydebicki2438
    @makarydebicki2438 11 днів тому

    Great video and tutorial! Always come to you for my coding needs. I do have a question about an issue I'm having though. When I try to populate the username on the PostListItem page I keep getting a "Cannot read properties of undefined(reading 'username') error. I checked and my controllers and models are identical to the source code and the username field is populated in my mongo database. Any idea what could be causing this issue?

    • @nikhilpnath
      @nikhilpnath 10 днів тому

      can you show me the line where you read the username?

    • @makarydebicki2438
      @makarydebicki2438 10 днів тому

      @@nikhilpnath So I figured out the username part and it is working as intended but now I have another issue. Any text I type in the form area of the write page is enclosed by tags when I pull up the single post page and any image or video I upload in the form area shows up as an imagekit link rather than the image itself. I am using {data.content} in singlepostpage.jsx to pull the content from mongo.
      {/* content */}

      {data.content}
      {/* text */}

    • @makarydebicki2438
      @makarydebicki2438 10 днів тому

      @@nikhilpnath I actually figured out the username problem but now I have another issue. I am trying to pass the content from the form in the write page so that it shows user written content on the single post page. However any content I type in the form is enclosed in a tag on the single post page after submitting. Also any image I upload in the form(not the cover image) shows up as an imagekit link.
      Here is the line that calls the content from mongo.
      {/* content */}

      {/* text */}

      {data.content}

    • @nikhilpnath
      @nikhilpnath 10 днів тому

      @makarydebicki2438 I haven't reached here yet, but what are the things this data.content holds? you're just displaying it That's why i asked.
      Enclosed by p tag, rather than showing the plain text its wrapped by p tag and showing it, is that what to mean?
      About the image or video, so far i know we upload these into imagekit and then we display it using the Image component. if i got the problem correctly the issue can be the extension. You have to include that also, like .jpeg, mp4
      Please correct me if I'm wrong

    • @makarydebicki2438
      @makarydebicki2438 10 днів тому

      @@nikhilpnath Do you mind if I email you some pics to show you what Im talking about? I think thatll be easier than trying to explain it on youtube comments.

  • @nthiwafelix7967
    @nthiwafelix7967 25 днів тому

    Thanks!!

  • @john6283
    @john6283 2 місяці тому +1

    heyy how about an employee management system? where features like real time viewing who's employee who already logged in, who are on leave, who are on rest days, like a dashboard. and they have their payslips generated according to how many hours per day they accumulated, and many moreeeeeeeeeeeeeeeee

  • @salifoumoussaabdoulhack3418
    @salifoumoussaabdoulhack3418 2 місяці тому

    You are the best

  • @EuroRenta
    @EuroRenta 2 місяці тому +1

    Thx!

  • @sahranmohammed2700
    @sahranmohammed2700 Місяць тому

    Next time when you upload project to github please add .env.example file. its very usefull to self host the application.

  • @Deva6823
    @Deva6823 2 місяці тому

    I learnt a lot from you sir, can you please make a new project with Next.js and Hono.Js

  • @supersweaty8459
    @supersweaty8459 2 місяці тому

    good course for learning MERN but theres alot you have to fix after it (like a lot of links still dont work and content doesnt show correctly etc.) still worth the time in my opinion as I learnt alot so thank you!

  • @ankitgupta9154
    @ankitgupta9154 Місяць тому

    please guide on how to use the snippet?

  • @ahsankabir6810
    @ahsankabir6810 Місяць тому

    Will there be a second part?

  • @learnprogrammingtip665
    @learnprogrammingtip665 2 місяці тому +1

    Plz make a online video call website, makes online tracking distinction ❤❤❤❤❤

  • @mdsafikulislam9113
    @mdsafikulislam9113 2 місяці тому +1

    How to include your Dashboard in this existing project?

  • @hariprasatht9082
    @hariprasatht9082 2 місяці тому

    thanks man

  • @yerfyyow6220
    @yerfyyow6220 2 місяці тому

    thanks in advance man

  • @CarlosTello-m8h
    @CarlosTello-m8h Місяць тому

    great UI

  • @trieunguyentuan3936
    @trieunguyentuan3936 2 місяці тому

    Can you guide me with Next.js, Node.js with TypeScript, and MongoDB?

  • @dengoes
    @dengoes 2 місяці тому

    Perfect.

  • @Sansysofancy
    @Sansysofancy 24 дні тому

    I'm loving the tutorial but I'm coming across this issue when performing user authorization:
    x-clerk-auth-reason:
    session-token-iat-in-the-future. This is the error indicated in the response header. From my understanding there seems to be a sync issue between the clerk server responsible for generating the JWT and my express server which is causing the req to be rejected causing a 401 unauthorized error. I tried using configuring the clerkMiddleware by using clockSkewInMs but it didn't resolve the issue. I would really appreciate some help 🙏

  • @White_h4y
    @White_h4y 2 місяці тому +2

    Bro want Netflix like clone the old version is too old now ?

  • @sunnysolanki2548
    @sunnysolanki2548 25 днів тому

    JUST LIKE THAT!!!!

  • @malindualwis1905
    @malindualwis1905 2 місяці тому

    Hi, can you please do these projects using redux context?

  • @serkancanbaz1
    @serkancanbaz1 2 місяці тому

    Next ve shadcn ile video bekliyoruz. Authentication, role based ile birlikte. ❤

  • @amitsaini2909
    @amitsaini2909 Місяць тому

    Which languages ​​should I know to make this website?

  • @6ixty9
    @6ixty9 2 місяці тому

    Please create a tutorial on push notifications nextjs using web push for offical docs

  • @funny-g4d
    @funny-g4d Місяць тому

    Can u use the postgresql in another cases

  • @samarthbisen3244
    @samarthbisen3244 2 місяці тому

    At 45:59 ,after signing up ,the login and signin button are still showing , any ideas how to hide them,once we are authenticated

  • @mahdirezaei-o8i
    @mahdirezaei-o8i Місяць тому

    why didn`t use typescript?

  • @AbhishekYadav-ch2mn
    @AbhishekYadav-ch2mn 2 місяці тому

    I respect you a lot for all your efforts. But I think it's time to focus on the microservice microfrontend project. Tell me a single project on your channel based on microfrontend & microservice?

  • @AbbasAkhter101
    @AbbasAkhter101 2 місяці тому +1

    Make projects with windsurf IDE, It will save time and effort!

  • @dafinaaliji
    @dafinaaliji Місяць тому

    Is this tutorial good for beginners?

    • @haythemsaidi91
      @haythemsaidi91 Місяць тому +1

      This is for intermediate level if you want he has another blog project in his channel for beginners.

    • @dafinaaliji
      @dafinaaliji Місяць тому

      @@haythemsaidi91 thank you!

  • @张粤圳
    @张粤圳 18 днів тому

    hey man, mobile mode overflow-x:hidden invaild

    • @张粤圳
      @张粤圳 18 днів тому

      When I accessed the server through the IP address on my phone, I found that overflow-x was invalid.

  • @AkintundeJadesola
    @AkintundeJadesola 2 місяці тому +1

    Is anyone know the reason why clerk website is not opening.. i have tried it several times but the site is not opening

  • @steezefpv
    @steezefpv Місяць тому +1

    you really need to structure yourself a bit. classes are constantly being added, left empty & then continued somewhere else. Later, when you are somewhere else again, you jump back to this class and fill it out. even if you insert svg paths, give the viewer the opportunity to view them briefly without having to look for the github on their own.

  • @James-di6zm
    @James-di6zm 30 хвилин тому

    pff why using clerk... why we don't create our own login method from scratch with a mern stack...

  • @sukhrob-abdullaev
    @sukhrob-abdullaev 2 місяці тому +1

    Hey Lama Dev, thank you for the amazing courses, appreciate your effort and energy, and keep up the good work!
    Could you share your VScode IDE theme? I like it 🤩

  • @Jackkhan-u6e
    @Jackkhan-u6e 2 місяці тому

    I want Crud application using Next js 15 and Primsa , typescript , server action database mongodb

  • @funny-g4d
    @funny-g4d Місяць тому

    Im failed connect to mongodb,

  • @RahulRaj-py6ko
    @RahulRaj-py6ko 10 днів тому

    2:51:20

  • @Chitransh_Singh
    @Chitransh_Singh 23 дні тому

    4:35

  • @itksports
    @itksports 2 місяці тому

    was good until I saw clerk .. it doesn't work in nigeria

  • @kwasiezor1630
    @kwasiezor1630 2 місяці тому

    What I always find unpleasant with this kind of React project is that it uses a third-party service like Clerk for user management when this is a very important aspect of creating an application. Why not set up starter kits such as Breeze or Jetstream as with Laravel. I think it would make more sense, the day we could have this kind of thing in the React ecosystem that would be a step forward.

  • @adarshjamwal3448
    @adarshjamwal3448 Місяць тому

    Your app is not working properly please see it carefully. Especially most in the case of webhook controller. Ja

  • @viccrts
    @viccrts Місяць тому

    I´m scary when i have to open black screens, vietnam memories...

  • @حسنجهاد-ع9ص
    @حسنجهاد-ع9ص 2 місяці тому

    هذا صوت حسين الربيعي

  • @mdsafikulislam9113
    @mdsafikulislam9113 2 місяці тому

    Why Clerk, not JWT?

  • @calvinwilliams729
    @calvinwilliams729 2 місяці тому +1

    Through You I learned MUI and I have become very addicted to it. Now all your videos are with Tailwind. Why have you betrayed us like that?

    • @ToumaRenshi
      @ToumaRenshi 2 місяці тому

      you should learn more than only mui or tailwind. it's good to know more things :)

  • @mobilephotography123
    @mobilephotography123 2 місяці тому +1

    1st pin 📌

  • @sardormahmudov5972
    @sardormahmudov5972 2 місяці тому

    Bro soon you will take Phd for creating Blog videos

  • @KhuyetLe-pp8bw
    @KhuyetLe-pp8bw 2 місяці тому

    omggg

  • @system2072
    @system2072 2 місяці тому +1

    Why are these tutors using third party for authorization
    When in real job companies develop their own features specially for authorization and roles

  • @mudassirsayed8703
    @mudassirsayed8703 2 місяці тому

    Clerk😢

  • @edwardmintah4476
    @edwardmintah4476 2 місяці тому

    Error: @clerk/clerk-react: Missing publishableKey. i get this error can someone help me out

  • @mehrdad1068
    @mehrdad1068 2 місяці тому

    Thank you ❤

  • @hassamata2594
    @hassamata2594 Місяць тому

    hello sir, can i know how to solve error on navbar and Image, thanks
    An empty string ("") was passed to the src attribute. This may cause the browser to download the whole page again over the network. To fix this, either do not render the element at all or pass null to src instead of an empty string. Error Component Stack