Build a COMPLETE Fullstack Responsive MERN App with Auth, Likes, Dark Mode | React, MongoDB, MUI

Поделиться
HTML-код
  • Опубликовано: 2 июн 2024
  • Links:
    Material UI: mui.com/material-ui/getting-s...
    Redux Toolkit: redux-toolkit.js.org/introduc...
    React Router: reactrouter.com/en/v6.3.0/get...
    Redux Persist: github.com/rt2zz/redux-persist
    React Dropzone: react-dropzone.js.org/
    Node: nodejs.org/en/download/
    Nodemon: github.com/remy/nodemon
    NPX: www.npmjs.com/package/npx
    VsCode: code.visualstudio.com/download
    Dotenv: github.com/motdotla/dotenv
    MongoDB: www.mongodb.com/
    Mongoose: github.com/Automattic/mongoose
    JsonWebToken: github.com/auth0/node-jsonweb...
    Multer: github.com/expressjs/multer
    GridFS-Storage: github.com/devconcept/multer-...
    Google Fonts: fonts.google.com/
    Formik: formik.org/docs/overview
    Yup: github.com/jquense/yup
    Code
    completed code: github.com/ed-roh/mern-social...
    assets file: github.com/ed-roh/mern-social...
    input data file: github.com/ed-roh/mern-social...
    theme file: github.com/ed-roh/mern-social...
    -----------
    Subscribe to my channel: / @edrohdev
    for more web development and web 3.0 blockchain tutorials!
    -----------
    Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
    I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
    ======
    Chapters:
    0:00 Build a Fullstack MERN React Responsive Social Media Application from Scratch
    5:07 Backend Installation of Node, Visual Studio Code, and Backend Packages
    7:44 Backend Configurations and Middleware Setup
    16:06 MongoDB Registering, Installation and Setup
    21:31 Data Modeling and ERD Diagrams
    26:08 Authentication and Authorization in Node
    59:07 User Routes Setup
    1:13:33 Post Routes Setup
    1:36:20 Backend Data Add and Demo
    1:42:20 Frontend Installation and Setup
    1:48:34 React Redux File Folder Architecture and React Router
    1:56:10 Redux and Toolkit Installation and Setup
    2:10:56 Color, Theme, Dark Mode, and Styling Setup
    2:26:16 Navbar
    2:48:37 Register, Login Pages, and Form
    3:34:44 Home Page and Widgets
    4:04:17 Posts and Post Widgets
    5:19:41 Profile Page
    5:27:08 Full Stack MERN React Application Complete
  • НаукаНаука

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

  • @EdRohDev
    @EdRohDev  Год назад +62

    Hey everyone! Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

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

      after finishing 5:06:17 It says posts.map is not a function is there any way to fix this??

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

      @@infinity7635 you can wait posts like this {posts && renderPosts()}

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

      @@huyangnhat4959 Hey can you elaborate please, i am new to react and i am facing the same issue.

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

      @@infinity7635 Did you find the solution?

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

      @@pepegachamp684 Make sure you get data is a array! It will not error

  • @mr.daniish
    @mr.daniish Год назад +186

    The amount of value in this video is insane! Thanks Ed!

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

      @@hirahanif8573 I just got to the part you're talking about, I don't think we need to worry about that now as he is just showing us how it would look like and how it works. Instead, you should focus on continuing with him for the rest of the video where I presume he goes through how to create the frontend and connect it with the backend.

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

      CAN THIS PROJECT BE DEPLOYED?

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

      @@hirahanif8573 he was making an assumption and had not even created the frontend by 40:00 he does it later in the video

  • @mikamanelka1326
    @mikamanelka1326 Год назад +19

    the presentation of the project at the beginning is so good! now I know exactly what to expect, perfect! thx!

  • @stark469
    @stark469 Год назад +29

    Dude that's some insane level of coding you have done so far in this project and personally I really loved the UI you created so you didn't only implemented feature's but also took time to work on fluid UI which looks production level ready with minor tweaks.
    Although I understand there are many things left like - comments, search user, notifications, viewed my profile, share button, etc but I understand that would have made course video more than 10 hours.
    I will definitely take this as challenge to work on them and continue developing them further more.
    Thanks again for super easy explanation with complex codes with all latest libraries and tech stacks...

  • @mahinalam8868
    @mahinalam8868 4 месяца назад +1

    Done with this tuitorial! Loved it. I'm glad that I can see many parts of the application that can be improved. On it!

  • @eshw23
    @eshw23 Год назад +34

    this is unreal been looking for modern fullstack apps tutorials this past year, thanks a lot man!

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

      bro can this project be deployed?
      or i have to make changes in the project please help

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

      CAN THIS PROJECT BE DEPLOYED? if yes where?

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

      @@allindiachannel2290 of course you can deploy it, pick any provider. Vercel is pretty easy to use.

  • @plujudramunqk
    @plujudramunqk Год назад +13

    Dude I hope your channel grows up, cuz the value and the quality content you are giving us deserves it! Thank you

  • @vmaheswarlu8767
    @vmaheswarlu8767 Год назад +6

    Very humble tutorial..really learned new and long pending clarifications from this course. Authenthication,Authorization,Jwt,Mongodb ...many are ...thank you very much for your time and efforts.

  • @akj3344
    @akj3344 Год назад +196

    This video is what I hoped a udemy course would be like. They are usually outdated and either too fast or too slow. This one is just amazing. All the libraries are exrtemely useful. This is objectively the best tutorial. Easiest sub of my life

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

      Bhai Ye project ko follow karu toh complete hojayega na... Like baad mai Pata Chala Koi connection Karna ha par isme nhi dikhaya ho?? Bas Puch raha hu

    • @VipinSharma-lx1uj
      @VipinSharma-lx1uj Год назад

      @@hirahanif8573 Have you figured out?

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

      CAN THIS PROJECT BE DEPLOYED?

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

      do u suggest me starting this tutorial without any knowledge in backend side ?

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

      How to run the project?? Please help me

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

    thank you ed ! i managed to finish and follow along with this tutorial, had to search through the comments sometimes for general bugs that everyone encountered, but the app is working just like yours.
    this was my first "trendy" full stack app with MERN or any other trendy stack and you helped understand a lot more how these frameworks and enviroments come together!
    many thanks

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

      Dude can you tell about bugs you encountered?

    • @abhijeetsingh4190
      @abhijeetsingh4190 7 месяцев назад

      Bro if we follow the tutorial will we be able to finish it....what I mean is there are a lot of comments saying it does not work in the end as there are a lot of bugs that are occurring even after following this tutorial line by line

  • @smolahloe
    @smolahloe Год назад +89

    Firstly, Ed - your workmanship is amazing. Your tutorials are of premium quality - please consider adding a "donate" to your videos, saying just thank you does not feel like it’s enough. Secondly, I picked up something that I believe you should update in future videos - as of version 4.16, ExpressJs has a built-in body parser meaning the "body-parser" package is no longer required. bodyParser.json() and bodyParser.urlencoded() should be replaced with express.json($ and express.urlencoded() respectively. 11:54-12:10 thanks once again.

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

    Awesome project Ed, really love your work ❤

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

    wow, your videos are so quality! Love it. thanks for your effort

  • @tud.
    @tud. 10 месяцев назад +6

    Thanks for this tutorial! I went from literally not knowing anything about React and Redux to being able to add more functionalities (posting comments, notifications, etc). It's not recommended to learn something by taking on super complex projects at the start but your tutorial really fast-tracked my React journey. Appreciate it Ed :)

    • @melchizedek79
      @melchizedek79 4 месяца назад

      Wow! You must be a fast learner

    • @tud.
      @tud. 4 месяца назад

      @@melchizedek79 thank you but a student can only learn as fast as how effectively a teacher can teach. in this case Ed’s tutorial did a lot of the heavy lifting

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

      What are you using for posting comments and notifications?

  • @indiancuriousvoice8773
    @indiancuriousvoice8773 Год назад +130

    After watching lama dev i have found your channel. You are also teaching such a big project very easily. Thanks for your time&efforts.

  • @mma-dost
    @mma-dost Год назад +1

    I am gonna start this project !! I was daily searching for a project like this but today after some days I found out your video.
    Thanks a lot sir !!

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

    Thanks @EdRoh . From last few months i have worked on lot's of Mern project but this one is best of all ❤️

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

    Another excellent tutorial. The amount of value is tremendous. Thanks Ed

  • @mildlyoverfitted
    @mildlyoverfitted Год назад +8

    Absolutely love it. I am learning a lot from you! Keep on doing these "from scratch" videos!

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

      bro can this project be deployed?
      or i have to make changes in the project please help

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

    There are a lot of good teachers out there, but sometimes even when they try to explain/simplify code for you, they end up overcomplicating things using big words, and fancy terms. You on the other hand, you make it so easy to grab and understand, an example is when you explained reducers, and even you your said you're not sure why they use fancy terms to describe it😅, those were the issue for real. I'm glad I came across your videos, you made it so much easier for me to understand things that were giving me issues. Cheers 🥂

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

    just came across your channel and oh boy is this valuable content, keep up the good job dude. just earned a new sub

  • @jaktie123
    @jaktie123 Год назад +67

    Someone has literally a guide on udemy on this for 15$ Worth the pay but insane you are putting this knowledge out there completely for free and everyone to learn.
    Just discovered your channel as i am learning Angular, Vue and react this is so valuable to me instantly subscribed.
    Thanks Ed

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

      CAN THIS PROJECT BE DEPLOYED?

    • @jackepner9984
      @jackepner9984 Год назад +3

      I don't consider helping people learn regardless of financial status insane. What's insane is that U.S. higher education institutions charge about 50x more than most countries, where every citizen has a right to education without financial restriction.

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

      why learn all 3, when you can choose one and master it ???

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

      @@allindiachannel2290 yeah man

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

      ​@@jackepner9984he didn't mean literally insane lol, he meant insane as in good

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

    Man, you are so efficient!! This is exactly what I need, wanted to learn auth and how to retrieve info from BE properly.

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

      girl it just simple website that source code is full in github . what efficient . do you live in real world ?

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

    No words could describe how thankful I am to you !

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

    Ed, you are a legend. Thank you so much for this incredible content!

  • @danavzaradel
    @danavzaradel Год назад +138

    Maybe this is not a popular opinion, but youtubers gotta stop doing that "method"... if you're gonna create a project for people to follow along you should go back and forth creating features while you need them. Not BEFORE you need them. Saying "oh, I'm just gonna create this entire file page and import stuff I haven't even created because we'll use it later on the frontend" and not debugging and showing what kind of data and why you need to format it, honestly, it's a waste of time. All I feel doing this tutorial is "I'm copying some dude online while he's copying his notes himself". 4/10

    • @renehoxha6393
      @renehoxha6393 6 месяцев назад +11

      you are so right ! i was lied by the comments too. everyone says its really good but in reality he does not explain anything.

    • @renehoxha6393
      @renehoxha6393 6 месяцев назад +10

      if you have found other youtubers who explain really well please let me know. I am actively looking

    • @user-dq2bb2qi5p
      @user-dq2bb2qi5p 6 месяцев назад

      ​@@renehoxha6393you can check react and next js projects with sahand I just completed his last project real estate and it was great

    • @imromesh
      @imromesh 3 месяца назад +3

      Let me subscribe this comment for some useful links 😅

    • @cyyborgg
      @cyyborgg 3 месяца назад +1

      The biggest problem with this tutorial is that he will write the full code for a feature or let's say homepage and only then will he see if the code is working or not. It becomes hard to debug the code later on.
      Now I have this problem where I create a new post and the posts suddenly becomes undefined and I need to refresh at least once for the posts to displayed.

  • @btstructure
    @btstructure 9 месяцев назад +3

    Hands down one of the best tutorials, other tutorials got me cross eyed, but this was so clean. I always struggled with the backend, especially hated authorization, but now I feel confident to build my own project. Thank you!!

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

      you faced any problem ..any dependencies problems!! or your project working nicely

    • @niteshsaxena1066
      @niteshsaxena1066 7 месяцев назад

      did you faced any big problem in this project code? that took a lot of time to resolve? please tell me

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

    pretty helpful for beginner, highly recommend! thank you Edrod, your work really help. Keep it up

  • @yuktijhawar6729
    @yuktijhawar6729 4 месяца назад

    It was a great experience to build this amazing application with you. Thanks for sharing

  • @joaopereira6435
    @joaopereira6435 Год назад +6

    Thank you so much for this incredible content! Just an idea, add chat ( friend to friend and group chat) plus dashboard for admins in this "social media" app. I think if nothing like this out there. Again, thanks for your work. subbed

  • @kunaldev5274
    @kunaldev5274 Год назад +3

    Awesome Project and superb way of explaining things... I really like his teaching and because he is in Tech for a Decade , he is extremely good with his code quality and presentation

    • @abhiyadav8500
      @abhiyadav8500 11 месяцев назад

      have you completed this project ...because mine is not working

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

      me too i have error when running npm run start@@abhiyadav8500

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

    Dude! This is great! Keep up the great work! Thanks for this amazing tutorial!

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

    This is exactly what I was looking for. Can't wait to watch 😁😁!

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

    Thanks for this course this a REAL fullstack tutorial since youre explaining everything including the styling unlike Javascript Mastery who just installs a bunch of packages without explaining and copy-paste a bunch of css/js styling without explaining 'so we can focus on the logic BS".

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

      Exactly why I dont like javascript mastery's projects.

  • @RishabhSinghCodes
    @RishabhSinghCodes Год назад +8

    Amazing video! I just completed the project following this tutorial and got to learn a lot.
    Thanks Ed!
    For viewers: If you're thinking whether or not to do this project by following this tutorial, just go for it.

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

      Hey can u help me I am stuck my registration form don't submit

    • @journey7710
      @journey7710 Год назад +3

      I can't register and login through the form as when I try to register the form don't submits

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

      All the other things are doing fine I tried the dummy data set it is easily sent to the database but when I try to register the form is not submitting

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

      @@journey7710 Hey, Try using another email to register, & log in again. It should help.

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

      Thanks for this comment, I was looking for reply like this

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

    Thanks man, I really appreciate what you've done here

  • @go_lang_thang
    @go_lang_thang 9 месяцев назад +1

    I have to say you teach well lol.
    I really appreciate what you do, hope you grow and be healthy forever

  • @ravisoni7666
    @ravisoni7666 Год назад +161

    Remember guys, to get the OUTPUT of navbar at 2:47:00 you need to remove const fullname at line 42 of index of navbar and all values too which include fullname as it is required and the first scene he creates is Navbar, and after seeing the output, place everything same as it was before..

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

      Exactly. Or put a dummy value, e.g. "first last" hardcoded, to see the navbar.

    • @FullStackDad
      @FullStackDad Год назад +3

      @@idanlib definitely helped haha! If you don't do this, you'll get a very large error. Thank you!

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

      how you doing, i hope you can help im stuck at this section i even copy and pasted navbar/index.jsx from the github but nothing is appearing on the :3000/home but when i get rid of most of the code socipedia logo appears but as soon as i add in the rest of the code. it will go back to being a blank page. no errors show but when i check inspect element it mentions the fullName but i remove them and still nothing shows

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

      @@adamwaleed8400 Hey buddy, not sure exactly from your description. But comment everything out, and then comment back in, line-by-line if need be, until you find what's causing the problem. YOu can also copy-paste parts from Ed's code until you find which part makes the difference.

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

      @@idanlib yeh i managed to do that and it came down to
      dispatch(setMode())} >
      {theme.palette.mode === "dark" ? (
      ) : (
      )}
      if i remove everything in between icon button it just goes back to being white if i put and only this it still goes blank however if i remove the icon button and add that line somewhere else it then comes back to the screen. i really hope you can help been stuck on this for a while

  • @codie12
    @codie12 9 месяцев назад +3

    If you're working with the Navbar and encounters errors like "MUI: cannot setup LIGHT mode" in the dev console, in the themeSettings function, change { pallete: { mode, ... } } to { pallete: { type: mode, ... }} . It works for me.

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

    These are absolutely the most useful videos I have found on learning to code and using best practices, thank you!

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

    Thank you for this awesome tutorial!! Will keep re-watching it.

  • @yngeshraman2636
    @yngeshraman2636 Год назад +13

    A small enhancement at 1:06:10, instead of using multiple api call, you could have used '.populate' feature of mongodb, since you already have the ids of friends in an array.

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

      He always get user id from req.body or req.params instead of this he can authorise user id front verified token middleware he created

  • @bendevweb89
    @bendevweb89 Год назад +3

    I see that you also carry out web3 projects it would be really great if you could offer us this type of project. You explain your code very well so it would be very easy for those who want to learn how to create Dapps (And there are many of them). 👍

  • @enjamurisagar3554
    @enjamurisagar3554 9 месяцев назад +2

    Thank you so much, I've learnt so many things in this video and never got this much knowledge from anywhere. 💝

    • @niteshsaxena1066
      @niteshsaxena1066 7 месяцев назад +1

      did you faced any big problem in making this project?....that took a lot of time to resolve?....please tell me

  • @bahtitashpaev7285
    @bahtitashpaev7285 Год назад +8

    this challange was not easy,,,, thank you!!!!

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

    Hello, I discovered your channel and subscribed recently. 🎉
    I find the project really great and you explain very well the code you write it's really great to learn. I wanted to know if once the project is finished it is possible to deploy it on Vercel for example? Thanks

    • @RahulKumar-xl3dd
      @RahulKumar-xl3dd Год назад

      Did you deploy it on Vercel ??? If you did then please say what did you use to deploy.
      I think only the front-end part can be deployed over Vercel and you can use Render to deploy your backend part.

    • @0xbobbyboy
      @0xbobbyboy 3 месяца назад

      @@RahulKumar-xl3ddI will be deploying it in the coming days, will let you know, I did deploy a similiar MERN project last week and it works really good. You need to deploy backend and frontend there separetely (check a guide on how to deploy a mern project or vercel). then replace all the frontend localhost paths with your deployed backend server. and a vercel.json config file added to backend / server

    • @0xbobbyboy
      @0xbobbyboy 3 месяца назад

      @@RahulKumar-xl3ddAlso a very good tip for deploying, first try deploying a simpler page, maybe just an mern app or dumbed down version with one api get call to show posts or something, much easier to catch mistakes than on an entire huge project for the first time using vercel

  • @gabriel-xc8hp
    @gabriel-xc8hp Год назад

    You are phenomenal brother. Thank you for this tutorial!

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

    Amazing tutorial,Thx so much EdRoh! U make me fall in love with coding again 😅 Subscribed with respect 👍🏻

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

    EdRoh, this is a great tutorial, and I love it. What's your vscode them and the font?

    • @63prasadsolunki32
      @63prasadsolunki32 Год назад

      have you completed your code i got some error can you helped mi with that pleased

  • @NicolaMarble
    @NicolaMarble Год назад +3

    This was a great video Ed, thanks so much! I read a lot of comments below about deployment and if you decide to take that on, I would be so interested in watching. After trying a bit myself, I noticed that there is a security vulnerability in multer as it depends on dice and it currently doesn't have a fix. If you know any industry standard replacements for multer, I would enjoy seeing how that would be implemented in the current structure you have! ~

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

    Thanks for your tutorial. One suggestion is for projects like this, from my point of view, the project could start from the front-end build first, then the backend. However this project starts from MongoDB, Router, and Redux, sometimes it makes me feel what the specific code snippets are used for without any UI even though you showed the actual UI you already implemented, but the users who follow this tutorial don't. From a front-end developer point of view, it sometimes makes me confused

  • @user-jj4dw5rh3q
    @user-jj4dw5rh3q 10 месяцев назад

    Thanks, dude. It helped me a lot practice Redux toolkit.

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

    @EdRoh : Is it really beginner course? I am a beginner and to be honest I found it little overwhelming! Bdw, in the next project can you show how to use Passport for third party authentication ?

    • @mzpls
      @mzpls Год назад +3

      its not a beginner course

  • @ilyukchiljin7640
    @ilyukchiljin7640 Год назад +3

    thanks for the video, really enjoyed watching it. Just a thought but when you're working on the FE content, It would be great if you can render after completing certain sections of the page instead of writing a huge chunk of code in one go and rendering it at the end as it can be difficult for people to understand what each section of the code is doing.

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

    What an excelent video! Absolutely loved it!

  • @DW-tx6pg
    @DW-tx6pg Год назад

    Amazing tutorial Ed! Thank you!

  • @arnabsamanta3053
    @arnabsamanta3053 10 месяцев назад +10

    Remember to see the output at 2h:47m in this video ,the output of navbar because the user has not connected the backend line 42 in navbar(index.jsx) will show a big error so place it with a dummy value just for the output and then re do the code as it was it will work fine when the backend is connected :Thank me later

    • @GaneshDaBLiYuLalW874
      @GaneshDaBLiYuLalW874 9 месяцев назад +1

      thankyou

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

      omg thank you!!!!!!

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

      I had one more thing , I am facing an error @ 3hr:28min also email cannot read properties of undefined and same with password Please help ASAP I really need to finish this and apply for jobs.

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

      @arnabsamanta3053 hope that you look into this

    • @kaiiemsawat2415
      @kaiiemsawat2415 7 месяцев назад

      Thank you for posting this!!!! yo are the best!!!

  • @ngocnhanpham831
    @ngocnhanpham831 Год назад +12

    For people stuck at 5:07:20 in the video with the error:
    friends.find is not a function
    at Friend (Friend.jsx:22:1)
    like me 2 days ago, the error comes from the database, because Steve Ralph does not have password( don't ask me why, idk).
    Solution: copy field password and paste it in the Steve Ralph or whatever user you want in database, or create a new user and add new post, this new user can add friend normally.

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

      for me it have a password, but it still doesn't work. I've used it with Array.from(friends), but it doesn't patch, gives error 404 not found, any ideas?

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

      @@vnm_8945 first, use console log to check whether it has array list or not.
      Second, using diffchecker to check whether you have any typos, lack of code or not.
      Third, try to create a new user by sign up, then create new post by that user, and try to follow new user using your existent user.

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

      @@vnm_8945 I had to change the steve ralph email because it was a duplicate

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

      I got it, I had and empty string as an friend in database, thx for the reply.

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

      @@ngocnhanpham831 I got it, I had and empty string as an friend in database, thx for the reply.

  • @josephmaxveve7857
    @josephmaxveve7857 5 месяцев назад

    That's dope! Good stuff man!

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

    Been waiting for this video!

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

    Do you think you could do a video showing you building an App (with MERN for example like this), but at the end you actually show us how to deploy the App. I find nearly all tutorials don't show the deploying part, which can be the trickiest thing to do. Thanks

    • @EdRohDev
      @EdRohDev  Год назад +8

      hey, I will be working on figuring out the best options for deployment on the next videos! been a long time in my back log to figure out the optimal way so I'll be approaching that next

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

      @@EdRohDev Thanks, if you could do a project which has deployment I'd find that so useful. None of these clones / projects show the deployment part & therefore if I do the project I can't deploy them. Thanks for the reply.

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

      @@EdRohDev Yes, can you deploy and show the changes that need to be made for the current project for it to be deployed in the next video .....

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

      @@EdRohDev we're waitng

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

    Hey I seem to keep getting an error when trying to see my navbar ex: TypeError: Cannot read properties of null (reading 'firstName') any ideas why?

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

    Wonderful tutorial really concise and what is expected of a tutorial ! great work man

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

      can you tell me @ 40 min he connect front end with backend when he created this frontend and how connect it with backend also is this frontend code is on github ?

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

      @@hirahanif8573 he was testing the backend with frontend he already made , so if you are starting with backend and have no frontend , you can testing using postman or any such tool to test your API's .

    • @azzayshakya
      @azzayshakya 7 месяцев назад

      Bro did you get any error?

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

    OMG!! I'm doing this tutorial and I'm feel like a young studen againg, I love that emotion to make me love this carrer, I call it "The Fire", I'm learning a lot, thanks for that, bless

  • @miguelowd
    @miguelowd Год назад +3

    In case anyone has the error when trying to start up the server: "MongoServerError: bad auth : authentication failed did not connect". Remember the password is the one you created for that specific db, not your mongodb account password.

    • @bigchhet
      @bigchhet 11 месяцев назад

      Can you explain thus further, i think I am having this issue

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

    Wow! 🤩 Best video tutorial Content. Thank you EdRoh for this effort.

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

    Amazing job! I like it. Thank you, bro)

  • @khateebanwer7466
    @khateebanwer7466 Год назад +6

    To get the output of Navbar after its creation at around 2:47:03, Simply replace the value of fullName with
    user === null ? "Default User" : `${user.firstName} ${user.lastName}`
    This won't break your code when you are trying to see the output of your navbar where the code breaks because it requires some value for fullName which is supposed to be pulled from backend when a user logs in but currently as we haven't made further progress in respect to registering and logging in a user so user's value always remains as defined in state file i.e null.

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

      Thank u brother. I was stuck at that point. Much Appreeciated

    • @DaYomstar
      @DaYomstar 11 месяцев назад

      Thank you bud. This got me too. Thanks for sharing!

    • @karna6634
      @karna6634 11 месяцев назад

      i have vulnerabilities on server multer did u have it too ? how to fix this ? is app still okay even with this vulnerability ?

    • @alperdemir8657
      @alperdemir8657 11 месяцев назад

      thanks sir

    • @gaoxianglyu3450
      @gaoxianglyu3450 11 месяцев назад

      My navbar doesn't show up. It still shows loginPage when I put /home after localhost:3000

  • @John-di8md
    @John-di8md Год назад

    This is one of the best MERN tutorial. Thanks a lot. It helped me so much.

    • @RahulKumar-xl3dd
      @RahulKumar-xl3dd Год назад

      Did you complete it ?
      Have you deployed your completed project ?

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

    Hi Sir, So as a beginner Its a great project to learn. And thanks to your teaching i learnt a lot. Though the only issue i faced is posts.map So .map is throwing an error when it states posts.map is not a function. I thought this error must only be in my code as i was not able to resolve it. But then I downloaded your code from github and tried running it in my local system and the same error is there. as per my understanding This is happening if we login to website first time and we don't have any post I think this is the reason. Can you let me know if that is correct.

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

      i got the same error

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

      Koi solution mila ho to btana mere ko bhi aur iske baad friends.map bhi error throw karega

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

      Null handle krna pdega dono jgh posts ka bhi aur friends ka bhi

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

      @@sachinrana11449 code ka snippet share karde bhai

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

      @@kunalsingh5000 Haan bhai pehle bna toh lun

  • @roshannair5071
    @roshannair5071 10 месяцев назад +3

    very much disappointed
    The site not working even if i copy each and every line of code and no one in discord to help out

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

    The best channel for projects >_

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

    this is incredible! thanks for providing good lectures!

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

    Really appreciate for your sharing to give me power building full stack application! Thanks~

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

    This is an amazing Project Great work Man, Thanks for sharing it here for free

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

    One of the best video I think best in terms of quality of neat and clean code

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

    you are sick man!

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

    great effort! 🙏 I have learned something new ❤️

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

    Thank you so much for this project! I really learned a lot! I appreciate your effort :)

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

      ​@@hirahanif8573 Ed actually used the API he created at the first part of the video to the front end. The full source code of the project is in the description :)

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

    You deserve a lot of subscribers, thank you

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

    very valuable course, you are such a good teacher

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

    Just finished this incredible tutorial. Thanks so much!

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

      you finished in how many days

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

      @@hirahanif8573 you connect the front end and backend with http fetch requests using your custom made routes/endpoints (look them up in the server folder) using methods like POST, GET, PATCH, DELETE etc. The server/controller folder contains the methods used over the routes for “how” the data is being collected/manipulated on it’s way to and from the database.

    • @unseenshankar2157
      @unseenshankar2157 5 месяцев назад

      Tell us plz , how many days it took you to complete it?

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

    Thanks Ed, very good explanation. I'm waiting for another MERN tutorial

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

      bro can this project be deployed?
      or i have to make changes in the project please help

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

    @ 2:09:02 truest shit man, I've watched a lot of tutorials and I usually use them as a way to jump start a much more complex project and it always sucks when they throw bunch of cutting edge/unproven packages at you which really can box you in further down the road.

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

    This is amazing, Thank you very much.🤩

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

    Man love your video this is a huge bang and thank you for that next time please do it with typescript that will be the best video on youtube for sure

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

    Just starting this tutorial, after watching first chapter, I think my journey with this video will go very well as a beginner. thanks for adding redux , sir. take love from Bangladesh.

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

      @@hirahanif8573 I have faced this same situation too. He should not go through this as because we do not have that front end code and it distracts the concentration from the tutorial.

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

    This is what I'm looking for, MERN from scratch. Thank u for this!

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

    Awesome. Just now completed the whole project. Make more videos like this
    Love and support from India

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

    Thank you for sharing this information. Very good course.

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

    Wow. Mine blowing tutorial. Thank you so much for this wonderful content.

    • @Dr.mandell
      @Dr.mandell Год назад

      ☝🏼✍🏻

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

      bro can this project be deployed?
      or i have to make changes in the project please help

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

    As a beginner is a real challenge I'll do my best thank you for your time and your explanations Mr

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

    you are amazing guyyy ,thank you for your work

  • @Dan-Levi
    @Dan-Levi Год назад +1

    Great video, Top notch!

  • @user-zi3ut6kw1o
    @user-zi3ut6kw1o 10 месяцев назад

    Thank you very much. I built this along to completion.

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

      Hey can you help me to run the project?

  • @user-pu7nk4vx1d
    @user-pu7nk4vx1d Год назад

    this is the valuable lecture!!! i've ever watchin

  • @silva-nd2po
    @silva-nd2po Год назад

    Amazin project. It's really help us to deep understand how the parts of a real procjet work togheter

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

    The value in this video is real 100% 🤩

  • @2010akatsuki
    @2010akatsuki Год назад +1

    Excellent video, mate! I'm not able to follow through, because I'm just starting and my knowledge of JavaScript is still too shallow. I'll study some more and I'll come back for this video in a couple of weeks.

    • @63prasadsolunki32
      @63prasadsolunki32 Год назад

      have you completed your code i got some error can you helped mi with that pleased

  • @vedangop4918
    @vedangop4918 5 месяцев назад

    Took me months to complete this. DOne finally. Thanks Mate!

    • @unseenshankar2157
      @unseenshankar2157 5 месяцев назад

      Where did you deployed it?

    • @vedangop4918
      @vedangop4918 5 месяцев назад

      @@unseenshankar2157 did not deploy it yet

    • @vedangop4918
      @vedangop4918 5 месяцев назад

      @@unseenshankar2157 I'll deploy it using linode probably

    • @ashwani6527
      @ashwani6527 3 месяца назад

      Can you send link

    • @vedangop4918
      @vedangop4918 3 месяца назад

      @@ashwani6527 bro this project doesn't have the friends connection or anything so I dropped it has too many bugs as well