React Node.js Booking App Full Tutorial | MERN Stack Reservation App (JWT, Cookies, Context API)

Поделиться
HTML-код
  • Опубликовано: 14 июн 2024
  • React Booking / Reservation System tutorial from scratch for beginners. MERN stack hotel reservation app project. React Node.js MongoDB full-stack app using Context API, JWT, custom hooks, and React calendar.
    You are watching the 2nd part.
    Watch part 1 (React Design): • React Booking | Reserv...
    If it is valuable to you, you can support Lama Dev.
    Join: / @lamadev
    Buy me a coffee: www.buymeacoffee.com/lamadev
    Source Code (updating - coming in 2 hours): github.com/safak/youtube2022/...
    0:00 Introduction
    01:59 Installation
    05:27 Node.js MongoDB Connection
    11:54 Create Your First API using Node.js
    18:07 Node.js MongoDB CRUD Operations
    32:40 Node.js Express Understanding Middleware
    36:24 Node.js Express Error Handling Best Practice
    42:19 Node MongoDB Authentication (Login / Register)
    56:47 How to Use JWT with Cookie in Node.js
    01:01:45 Node.js JWT Role-Based Authorization Verification
    01:13:54 Node MongoDB Model Relations
    01:25:28 Installing React App
    01:27:44 Node MongoDB How to get Count of Documents
    01:32:33 How to Fetch Data using a Custom Hook
    01:39:00 React Fetch Data from Node Express API
    01:51:21 React Search using a Backend API
    01:58:43 Reach Fetch using URL Location
    02:02:46 How to Use React Context API
    02:14:17 React Login Auth Context API
    02:26:33 React Hotel Reservation Component
    02:55:48 React Node Admin CRUD Operations
    04:48:26 Outro
  • НаукаНаука

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

  • @LamaDev
    @LamaDev  2 года назад +252

    Hi friends, I checked your comments in the previous video. And majority of people wanted Node.js and MongoDb as backend. However, that doesn't mean we won't build other apps using different technologies. Let me know in the comments what else you'd like to see for the next projects. Love ya

  • @pedro.zurita
    @pedro.zurita Год назад +3

    I seriously like your teaching style...like a sensei...voice is calm and reassuring... documentation use is spot on...helps remind us that this is all a process not magic...wax on...wax off

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    One of the most comprehensive tutorials of yours, Lama.
    You have such a good design combined with complex functionalities in that booking app.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    My favorite channel. Thanks a bunch for putting a lot of effort into making such instructive videos. The quality of your videos is as always top-notch. I can't thank you enought!

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

  • @hobbiekhn3713
    @hobbiekhn3713 2 года назад +7

    Lama, Brother. Your techniques for modularity and overall problem solving are insane. Love you. I hope I will have the same after a year.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

  • @ravisinghit
    @ravisinghit Год назад +38

    Why we like Lama Dev
    1. Easy to understand
    2. Point to Point tutorial
    3. No time waste - less talk more code
    4. Good projects used in example

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

      TRUE

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

      AMAZING

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

      did u found the solution??? Please do give the solution also@@SwarnarkaDas

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

    This is my new favorite channel, thanks for this amazing tutorial Lama Dev!...

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

    Thank you lama for your wonderful contents. I can only imagine how difficult it is to produce them. God bless you

  • @godfreyndiritu9062
    @godfreyndiritu9062 2 года назад +8

    Man I appreciate the time you take to bring to us this informative yet valuable content with clear explanation, His mode of delivery reveals that he is knowledgeable about the topic.
    Thanks Lama Dev

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    That's a huge project for a RUclips video, it's almost impossible to find something like that, please keep up with your work.
    I would also love a big project like that with Typescript, too see how you manage all the types and interfaces.

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

    After a lot of search I've found the best course on mern on RUclips (as per I've found). Lama's teches us the every word he uses in his video and that's the most amazing part. Just love it 💕💕

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    Thank you lema, it was really helpfull for me. perhaps this is the best learning method i have seen. good job lema. i would really be glad to pay for such kind of tutorial.

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

    It's always good to see such a useful complete tutorial for absolutely free.
    Lama if you are willing to provide courses where people can learn the technologies you use in your videos.
    I'm sure many will be willing to pay and support you.

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

      I could not connect to mongoDB please help me bro

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

      @@abiddawar7519 in your .env, use 'equal to' sign instead of colon...

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

      @@vaalarivan_p Hey I got a problem while doing this project can you please help me

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

      @@sayanmaity2694 What kinda problem??

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

      Why m i getting like this nodemon app crashed - waiting for file changes before starting...

  • @eminm6383
    @eminm6383 2 года назад +44

    Hello Lama, I am a junior full stack dev and you have a contribution in my learning process before I landed my first job. Amazing content, rally easy to follow. Thanks a lot.
    Also, maybe some postgres involved content would be awesome for learners as it is crucial to know to attract more employers.

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

      Hi bro, what project did you create to show the interviewer?

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

      Junior full stack...hmmm.. you are a genius!!!

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

      @@karenmelikyan377 Thanks, but I am not genius at all. Not a necessity.

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

      Hello please can you tell me that in this project how we logout from website

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

      @@harshsinghal8527 whenever I get the time, I will check.

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

    Another awesome project Lama. You're the best.

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

    I would like to share this kind of content, but it's take so much time and efforts. This man deserve a medal.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

  • @katepeng3610
    @katepeng3610 Год назад +44

    Hi Lama, thank you so much for your wonderful videos, I learned a lot and made my job easier. Also, I have a small suggestion, can you add a difficulty level to each video, like between 1-5? Because after one video, I move on to the next one, but you have so many videos that I don't know which one is right for my skill level. But if you have a difficulty level, it might be easier for me to find the next video to learn from. Hope you can think about it if you have enough time. Thanks

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

      @@SwarnarkaDas c'mon man don't you have some access to gpt?

  • @peteromotosho7328
    @peteromotosho7328 2 года назад +11

    Nice Job Lama! Your projects are really inspiring and has been of great help to me. I think the next tutorial should be on making "An appointment booking website using react". I already made a research on this (RUclips & internet generally) and the ones I found are either made in WordPress or employed a plug-in. I think making this could really be helpful to take this channel to it next bigger audience as you could possibly be the first to implement it on a RUclips channel. Merci beaucoup once again!

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

      Yes this is a great idea. I’ve been looking for a similar project.

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

      Are you talking like one that interacts directly with your webcam? That would be cool. I feel just making the appointments is an easy adaptation from the skills learned in this one.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    I've been waiting for it past 2 weeks so bad 😍

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

    Keep it up, man. You are the inspiration of many developers like myself!

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    if you are having problem at 1:38:15, list of array is being fetched from insomnia/postman but not showing in React app. You gotta update the packages 'npm update --force', and remove '/api' from the proxy field and add it in the useState url's place

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

      Can you give your insta id i faced one problem in this project

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

      Heyy, im facing the same problem. Could I connect with you over any other medium ???

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

      thank you so much I was facing this problem and it is fixed now.May God bless you.

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

      @@akotech79 please describe your solution and post the code if possible

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

      my solution, I add cors in api and after change useFetch
      const Featured = () => {
      const { data, loading, error } = useFetch(
      "localhost:8800/api/hotels/countByCity?cities=berlin,madrid,london"
      );
      console.log(data)

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

    For those who are getting stuck at 1:46:20 where they are not getting the desired results of 'limit'. You can try this: Use destructuring to get limit and featured from req.query like this---> const {limit,featured}=req.query; and then while fetching data write fetching line like this---> const hotels=await Hotel.find({featured:featured}).limit(limit);. After this getHotels code will be look like this :
    export const getHotels=async(req,res,next)=>{
    try {
    const {limit,featured}=req.query;
    const hotels=await Hotel.find({featured:featured}).limit(limit);
    return res.status(200).json(hotels);
    } catch (err) {
    next(err);
    }
    }
    Hope it helps!

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

      Thank you

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

      @@SwarnarkaDas check you "countByCity" function in "api/controllers/hotel.js" It should be like this:
      export const countByCity = async (req, res, next) => {
      const cities = req.query.cities?.split(",");
      if (cities) {
      try {
      const list = await Promise.all(
      cities?.map((city) => {
      return Hotel.countDocuments({ city: city });
      })
      );
      return res.status(200).json(list);
      } catch (err) {
      next(err);
      }
      }
      };
      after this check its route in "api/routes/hotels.js" make sure that coreect route is present for the function It should be like this:
      router.get('/countByCity',countByCity);
      If you've done both of these things correctly then code must be run properly

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

      Why I will not get data in console 1:36:57

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

      @humanity7880 thanks for the help brother 👍

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

    Thank you so much safak for such valuable tutorials.

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

    Thanks alot Lama. You are great. Great job, well done.

  • @johnedet4551
    @johnedet4551 2 года назад +9

    So glad you chose the MERN architecture for the project.. God bless you.. Pls can you add one last series in the video that involves email notifications or text message notification when a reservation is made for both the user and the admin.. and finally can you upload the project with a domain on a server.. I would be very grateful if any of this feature I requested above is implemented.. thank you in advance . I appreciate the impact once more...

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    I am learning a lot from you. I think your first approach was right for not using ''next'' in verifyToken under verifyUser and verifyAdmin function. Because, now it will go to next outer function instead of inner function, if I understood correctly.

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

      yes agreed!
      there is the same problem which I was solving :D

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

      can you please explain this to me? We aren't invoking the next function by adding () but it's still sending it out of the verifyUser function. How?

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

      How it solve it? Can anyone help me?

    • @Thomas-no7ek
      @Thomas-no7ek Год назад

      @@hershey92 Hi bro not sure if you still need this but I had the same issue and figured it out, I think. Inside of the verifyUser function we call verifyToken, which takes 3 parameters: req, res and next. if you give it 4 parameters in the nested function it will not executed the callback function and it will go directly to the next middleware(updateUser, updateHotel etc etc). however if no cookie is in place it will have no information for req.user.admin( which is required in the body of the nested callback). anyways it is solved by checking of req.user exists.
      I am just a humble intern so I think this is how it works, pls correct me if I am wrong, anyway my code works as it should.
      export const verifyUser = (req,res,next) =>{
      verifyToken(req,res,()=>{
      if(req.user.id === req.params.id ||req.user?.isAdmin){
      console.log(req.user.isAdmin)
      next()
      }else{
      return next(createError(403, "You are not autorized"))
      }
      })
      }
      export const verifyAdmin = (req,res,next) =>{
      verifyToken(req,res,()=>{
      if(req.user?.isAdmin){
      next()
      }else{
      return next(createError(403, "You are not admin autorized"))
      }
      })
      }

    • @Thomas-no7ek
      @Thomas-no7ek Год назад

      By placing the question markt there it will return false if its undefined

  • @WillSmith-qt7me
    @WillSmith-qt7me Год назад

    Handy MERN tutorial, especially the booking function, dates, and filtering. Thanks, friend!

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    Best MERN project tutorial on youtube

  • @abdell_rb4519
    @abdell_rb4519 2 года назад +7

    Can you make a complete full bug tracker web app please that would be Soo helpful, we really appreciate what you're making, quality content for free 🔥.

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

    It would be interesting with Redux, Typescript and PostgreSql as most companies use it.

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

    Amazing, I love mern stack from your tutorial

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

    I am unable to remove error at 27:00 kindly help

  • @pradeepbb1729
    @pradeepbb1729 2 года назад +50

    Another great content from Lama sir, Can i expect a React-Native course from you because your explanation is superb, I would like to see a React-Native course from you sir, Thank you❤

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

      I will love that sir

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

      I couldn't connect to mongoDB please help me

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

      @@abiddawar7519 how can i help you ?

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

      @@sohailraza2005Why m i getting like this nodemon app crashed - waiting for file changes before starting...

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

    THANK YOU SOO MUCH. YOUR VIDEOS REALLY HELP ALOT. YOUR VIDEO REALLY UNDERSTANDABLE

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

    Hi Lama Dev .. thank you for the time you spend in creating such useful, creative & educative content. May God Bless you Tremendously. Please, Can you do some/add some sought of notification first to the user when a reservation is made stating that "he just made a reservation" and to the admin saying that he has a new message in his dashboard. secondly, can you add features where the user has his own dashboard that helps him fast-track his reservations. Also can payment gateways be incorporated and can the project be hosted on a VPS using Nginx. thank you in advance. I really appreciate the good work. God Bless you once more.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

    • @akashjagadale9798
      @akashjagadale9798 26 дней назад

      ​@@SwarnarkaDas if you have solve this problem then can you please help me out Actually i'm also getting like this

  • @dipsapkota9299
    @dipsapkota9299 2 года назад +11

    @Lama Dev sir please do a big project like LMS(college management system) using redux toolkit, nodejs , and reactjs MERN(technology). Your tutorial is so nice. Thank you so much for this wonderful effort

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

      Yes! That would be so helpful. I've never seen any video with that kind of project

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

      I am totally agree with you :)

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

    You have helped me in moulding my MERN stack skills.And as a beginner your tutorials are awesome and simple to learn.Keep up the awesome work!

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

    • @sanjanapanwar3844
      @sanjanapanwar3844 Месяц назад

      @@SwarnarkaDas initially my local storage is undefined how to solve that problem

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

    Best EVER mern stack tutorial

  • @brentlombaard7573
    @brentlombaard7573 2 года назад +19

    At the timestamp 3:10:33 the users table doesn't show up and gives an error of rows is undefined in console
    You can fix this by adding qoutations in the useState in the DataTable.jsx on line 12 like this const [list, setList] = useState("")

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

      I encounter this same problem but rather get xhr.js:220 GET localhost:8800/api/users 401 (Unauthorized); I tried this but where do I use the list state. Thank your for your feedback

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

      @@amacodes7347 Hi, if you get a 401 unauthorized it probably means your user is not an admin

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

      @@brentlombaard7573 kind of strange because if the user was not the admin then he can't access the dashboard, besides it works in Postman but on the client site it doesn't

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

      Did you guys completed this project ?

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

      @@surajchandramauli yes i Did

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

    Hi @LamaDev, Can you help me at 1:46 as per video I have passed featured=true&limit=2 in the url in thunderclient but my mongodb query returns zero results. Mongodb query not taking limit as limit field instead it is checking for featured=true and limit=2 in database which results zero result and there is no field like limit in the table.

    • @balajis.r9038
      @balajis.r9038 11 месяцев назад

      i have a same issue

    • @sanjeevmurmu6505
      @sanjeevmurmu6505 11 месяцев назад +7

      just destructure the req.params for one more value limit and use it in limit part of hotels.find function so right now we have const{min,max,...others}=req.query and change it to const{min,max,limit,...others}=req.query and in the Hotels.find function change the part "limit(req.query.limit)" to "limit(limit)"

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

      ​@@sanjeevmurmu6505thank you so much for your help.

    • @maerin-5560dt
      @maerin-5560dt 5 месяцев назад

      thanks bro @@sanjeevmurmu6505

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

    Thanks Lama. Finished it a while ago. It felt a bit rushed at the end but it was a nice tutorial.

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

    Thank you so much, I followed this tutorial and it's very help me a lot.

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 2 года назад +11

    Awesome stuff as usual but two quick questions:
    1. Can you add payment with PayPal or stripe or flutterwave
    2. Is the context api better than redux?

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

      adding stripe payment is very easy go through their docs and just see any video that do payment through stripe in your tech stack u will get the idea

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

      @@namansharma1448 Okay. Thank you.

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

    great project just i small remark it would have been awsome if you shared with us the architecture of the project before coding so that we can get a global overview

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

      Is the project completed in this tutorial?

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

    • @user-lr5bi9gf9x
      @user-lr5bi9gf9x 9 месяцев назад

      @@SwarnarkaDas hey, have u solved this error, i have similiar problem

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

      @@user-lr5bi9gf9x I removed the Featured components

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

    Thank you safak for this awesome project..

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

    Thnks a lot man. We appreciate the quality content.

  • @kushalkc9128
    @kushalkc9128 2 года назад +9

    At 01:13:16 once the 'next' is added to the argument, the function to check 'isAdmin' doesn't work as expected

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

      remove next from verify token()

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

      @@arunkumara9398 In the admin function...?

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

      @@brianmurithi2985 did you comleted this project ?

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

      Can anyone explain why is it happening

    • @RakeshSahu-cr9ks
      @RakeshSahu-cr9ks Год назад

      @@kumarsrijan7566 next in the function parameter means once completed go to the next middleware function. In this case if you add next in verifyToken function's parameter, the next will refer to the middleware after verifyToken function from the routes -- but your routes doesn't have verifyToken, but it has verifyAdmin, so ideally you want the next () -> to refer to your verifyAdmin, so that the next middleware, which in this case is updateHotel is executed.
      @01:13:15 Lama said it, that the next is referring to verifyToken --> that is the catch.
      So if you should add next as an parameter to verifyAdmin middleware function and not the verifyToken middleware function. Hope it helps!

  • @VishalMaharathy
    @VishalMaharathy Год назад +7

    1:13:19, by adding next here, you are allowing non-admin to be passed as admin(try running the checkAdmin controller using a non-admin account). Please check and fix the code here.
    Instead I just checked the condition (req.user && req.user.isAdmin) to see if the user exists and not throw "isAdmin is not defined".

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

      Do you have the solution for it?

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

      Will i face any problem in the next parts if i do what you did?

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

    Hi Lama Dev. Thanks for your sharing knowledges to us.

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

    Best MERN teacher on RUclips

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

    In 02:54:00, if I click reserved, it will push the data into unavailableDate, it pushed the data successfully but it didn't compare the date. For example, I choose the date from 5.27-5.28, then it pushed the date array ['2022-05-26T14:00:00.000Z', '2022-05-27T14:00:00.000Z'], saved, and I choose the same room, same date, and click reserve, it will push the same date array as array1, doesn't compare the date.

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

      And I tried to print the 'isFound'. it shows undefined, why is it?

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

      @@neilhong7133 did you guys completed this project ?

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

      If this issue s resolved please let me know, what you did, In my case it is not disabling the checkbox

  • @edwardyeow7688
    @edwardyeow7688 2 года назад +7

    Hi Lama, thanks for the tutorial. At 01:13:16, I noticed that once the 'next' is added to the argument, the function to check 'isAdmin' doesn't run anymore.

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

      True, try removing the 'next' parameter in verifyToken inside verifyAdmin / verifyUser

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

      @@kennedymwangi5880 Heyyy...could you please elaborate...I'm stuck here..

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

      if (!req.user) {
      return res.send('No user token is availible.');
      }
      i remove next and added this at the top of the function,now it seems cool..

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

      @@jswarrior_ whats function?

    • @lavitzwind6709
      @lavitzwind6709 2 года назад +6

      Replace the both verifyAdmin and verifyUser functions with these:
      export const verifyAdmin = (req, res, next) => {
      verifyToken(req, res, () => {
      if (req.user.isAdmin) {
      next();
      } else {
      return next(createError(403, "You are not authorized!"));
      }
      });
      };
      export const verifyUser = (req, res, next) => {
      verifyToken(req, res, () => {
      if (req.user.id === req.params.id || req.user.isAdmin) {
      next();
      } else {
      return next(createError(403, "You are not authorized!"));
      }
      });
      };

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

    you are absolutely amazing, keep going

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

    This project is awesome 👍👍, looking forward for such videos in future for Inventory Management System using React and Spring Boot

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    For those that verifyAdmin is not working, that is happening because when we call the func verifyToken it returns a next() at the end, so it enters the route func before even initializing the verifyadmin. I hope it helps

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

      Kaio, mesmo depois de fazer isso, recebo erro 500 dizendo que não é possível ler a propriedade "isAdmin" de undefined... consegue me ajudar?

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

      Can you please explain further?

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

      @@Patinhow100 I'm also having this issue, did you ever end up fixing it?

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

      @@wtcprotoss did you solve it?

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

      hey did you find the solution please ?

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

    hey Lama, amazing tutorial. But when I make the PropertyList component ( 1:43:02 ) , the page breaks, and I get a warning in console that data is undefined. Any ideas? anybody? EDIT: actually if I comment the map in the data for the h2 and h1, it reloads ok. EDIT2: solved with the question mark! sorry!

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

      npm audit fix --force if it persists

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

      i think u have to use return in map function

    • @RakeshSahu-cr9ks
      @RakeshSahu-cr9ks Год назад +2

      Solution: repalce data[i].type with data[i]?.type
      Reason: optional chaining
      Edit -- apologies didnt see that you got it fixed

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

      @@RakeshSahu-cr9ks thanks anyway, dude

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

      @@RakeshSahu-cr9ks 😅 I'm stuck here and decided to sleep, now that there's a fix i'm lazy to wake up....

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

    Thank you very much for your effort. awesome tutorial!

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

    You are awesome, thank you so much for this awesome project

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

    Hello mate. Have problem im on part Insomnia program. when add city adress and etc. and click to test on insomnia show Cannot POST /api/hotels. Hotel.js is currect.
    Hotels.js is "import express from "express"
    import Hotel from "../models/Hotel.js";
    const router = express.Router();
    //CREATE
    router.post("/api", async (req,res)=>{
    const newHotel = new Hotel(req.body)
    try{
    const savedHotel = await newHotel.save()
    res.status(200).json(savedHotel)
    }catch(err){
    res.status(500).json(err)
    }
    })
    //UPDATE
    //DELETE
    //GET
    //GET ALL
    export default router"

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

      I have same problem

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

      I resolved it by just putting the url as :localhost:8800/hotel

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

      @spikerrbg 22 Check your index.js file. Perhaps your endpoint is wrongly typed. It should be "/api/hotels" not "api/hotels". Also your hotels.js routes file should be '/' for the insomnia to work at 27:02

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

    2:13:24 I have a problem with endDate : Uncaught TypeError: Cannot read properties of undefined (reading 'endDate'); I'll hope anyone here can help with the solution to this bug: Never mind there's no bug, simple just go back to the home page rather than refresh id page. The bug is because there's no date data when u refresh the page as oppose to when u return to the home page and select the date, thus making ur state able to store the date data and pass it to the useContext state react API which can be assess anywhere in the app

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

      Hello. I faced the same issue. And the author further in the video shows how it can be solved. With the help of local storage. Lama wrote this for authentication, and for storing date data - the principle is almost the same. I did it. The main thing is then to replace in the function for the simplicity of days: datex.getTime() with Date.parse(datex). I hope this helps you.
      //In SearchContext edit INITIAL_STATE like below.
      const INITIAL_STATE = {
      city: undefined,
      dates: JSON.parse(localStorage.getItem("dates")) || [],
      options: JSON.parse(localStorage.getItem("options")) || {
      adult: undefined,
      children: undefined,
      room: undefined,
      }
      }
      //And in SearchContext in function SearchContextProvider add useEffects like below
      export const SearchContextProvider = ({children}) =>{
      const [state, dispatch] = useReducer(SearchReducer, INITIAL_STATE);

      useEffect(()=>{
      localStorage.setItem("dates", JSON.stringify(state.dates));
      }, [state.dates]);

      useEffect(()=>{
      localStorage.setItem("options", JSON.stringify(state.options));
      }, [state.options]);
      return (

      {children}

      )
      };
      //At last in component Hotel.jsx change dayDifference function
      const dayDifference = (date1, date2)=>{
      const timeDiff = Math.abs(Date.parse(date2) - Date.parse(date1));
      const diffDays = Math.ceil(timeDiff / MILLISECONDS_PER_DAY);
      return diffDays;
      };

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

      @@lunyx5856 Большое спасибо, пытался использовать parseISO и были баги

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

      @@ggindinson
      @Андрей Курзанцев I face this problem but I can not solve this problem.

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

      @Mah Fuz same with me if u get the answer tell me

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

      @@aryanshaw2462 me too,,i don't get value of dates,, it's showing empty array

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

    Node js and MongoDB
    Your are amazing Sir love you

  • @synt-x6458
    @synt-x6458 2 года назад

    Congratulations on the 100k subs💯🔥🔥🔥

  • @Imnotsoumyajit
    @Imnotsoumyajit Год назад +24

    Making it mobile responsive is a nightmare

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

      Did he make it responsive?

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

    Thank you so much Lama!

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

    best teacher on youtube, with best content💯

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

    Thanks so much for this video. It was really helpful.

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

    Hi Lama, Thanks you so much for such great videos. I learned lot of things in a single vidoe and I know it will increse my cofidence in the these technologies more.

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

    Your projects are awesome

  • @ManishYadav-pr9qi
    @ManishYadav-pr9qi 2 года назад

    Bro @LamaDev
    You really deserve the massive respect.
    Respect 🫡 ya 3000 !

  • @Rejaulkarim-lf5xb
    @Rejaulkarim-lf5xb 2 года назад

    Thank you Lama and also Good Luck for you,

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

    You are gift from god teacher lama dev❤

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

    Amazing explanation. really good project. i think the in depth explanation is what makes this video different than others.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    Thank you so so so much , as usual awsome content ❤👍👌👏🙌

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

    amazing work! excellent!

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

    This is a very nice project thankyou and i would like to see firebase storage and authentication for bigger apps like this

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

    Thank you so much.. you are content are amazing !!!

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

    Greate Tutorial ,thank so much

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

    The good thing about Lama is that you will never find errors,code is easy to understand and write ,,,keep up the good work,you have helped me alot
    🇰🇪🇰🇪🇰🇪

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

    Another great and priceless tutorial as usual. Thank You, Would love to learn node and express using Typescript.

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    I am still waiting for this video.. Thanks sir...

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

    Thank you for your work!

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

    Nice tutorial. Node + Express + Mongodb + React + Material Ui

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

    Thank you very much bro. You are my teacher.

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

    Great Tutorial.. thank you very much

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

    Thank you very much bro. You are my teacher...

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

    thank you a lot for this great content
    it is so impressive thank you so much
    we are waiting for next project

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

    Thanks so much sir, you are the best teacher I have met in RUclips! We will like project on react native.

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

    Your work is amazing. I would like to know if I can combine part of this with a next Js project

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

    Great tutorial I'm completed this tutorial with in 4 days thank you so much I learned lot of thing watching this tutorial ❤️

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

      Hii bro I'm beginner should I start admin project first then this? Bcz admin must to manage the product? Please reply

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

    The way this guy goes from easy to complex should be studied.... Top Tier!

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

    Thanks for sharing great tutorial 😃🤩

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

    Its beautiful content, and i have subscribe and thanks for your time make this video.

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

    Great work. Please make some next js tutorial too. Like where to use which render strategy. I am confused about the use case of ssr csr isr ssg

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

    Best tutorial example 🔥

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

    The best video in the youtube!

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

    i really appriciate your work
    perfect tuto

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

    Thank you for this. 🍻

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

    It took me almost one and a 1/2 month to complete this project I would say I have learned a lot from it 1 thing I would recommend that to use semantics in your HTML

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

      bro can you send Source Code link plz

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

      at 1:52:21 instead of fetching data on the basis of city it only fetched data only whose 'featured:false' hotels ... const { data, loading, error, reFetch } = useFetch(`/hotels?city=${destination}`).....i am getting stuck here..please help me

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

    Hi from Peru. I like how you teach

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

    This course is amazing...