amazing-In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)

Affiliate Disclosure:When you buy via links on our site, we may earn an affiliate commission at no extra cost to you.



Learn React by building a beach resort website project. The project uses React router for routing, React context API for state management, Contentful headless CMS for data management, and Netlify to host the application.

💻 Setup Files:
💻 Finished Project:

🎥 Tutorial from Coding Addict. Check out the Coding Addict YouTube channel:

🔗 React Udemy course from Coding Addict:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

amazing-In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)
amazing-In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)
47 Comments
  1. This video is almost 6 hrs long. I can't watch the whole video in one session. I wish I can bookmark this so I can continue where I left off.
    Please make timestamp bookmark so I can jump to any specific topic covered in this video.

  2. I have correctly placed the images folder in src but I can see this error – Module not found: Can't resolve './images/defaultBcg.jpeg' in 'D:resortsrc'
    Kindly Help!!!

  3. Did anybody else get a "Module not found: Can't resolve 'contentful' in….." error when they first ran the app?

  4. No price for this tutorial one thousands thank you

  5. What about room size inputs having the same id?

  6. how can we add API key & Backed by MYSQL

  7. ALL YOU DO IS COPY OTHER PEOPLE VIDS AND PUT THEM ON YOUR CHANNEL😢😢

  8. What is best react practice between class base components and functional components?

  9. I just want to say thank you!

  10. Actually I not able to see Banner though I am following the instructions🤔😕

  11. does this project contain backend?

  12. Hi guys! At 2:16:00 I'm getting an error saying "rooms" is undefined. I put a console.log with 'rooms' to debug and it seems that on the React lifecycle it renders first with 'undefined' and only after that it renders (2 times) the object with the featured rooms. I'm not sure if it's something to do with the 'componentDidMount' on the context.js or something else changed with React Lifecyles. The problem might be something simpler to be honest. Can someone help me pls?

  13. I'm getting an error at 2:45:56 saying "TypeError : getRoom is not a function" ! anyone has a clue what could've gone wrong ?

  14. Cool tutorial, Thanks you so much

  15. Thank you so much for this beautiful project. I have learned so many things about react & understand different techniques to use.

  16. Just wanna know did u guys build admin panel?
    Admin who can increase or decrease prices n also set discounts .

  17. This video is perfect for the intermediate front-end developer.

  18. very thnx for this project this will help me for my future Project, thre have a lot go good resources

  19. Thank you so much for putting out this free, highly informative tutorial! I am coming back to coding after taking a brief hiatus (I had only been programming/ learning web technologies for about a year prior to hiatus), and this not only got me caught back up, but I finally put together some things that I had never figured out! Can't thank you enough for this free content. Also, something about listening to this guy talk is very relaxing.

  20. anyone have been able to successfully install this project from his github?

    i install node_modules and then i try to run the project (npm start) and i only catch errors

  21. Without question the best free React tutorial on the web, thanks so much mate! I have learnt so much from this.

  22. Not only explanation he teach how to write Elegant code and some refactoring techniques. Good man

  23. Does selecting the first one of array working for anyone else? <img src={images[0]} alt="single room" />. I have a TypeError: Cannot read property '0' of undefined

  24. thanks so muchhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  25. I have a problem with contentful because
    json editor returns "this message "this is not valid json "
    but in your course things work perfectly

  26. Too Good!!!! I loved this course!!! THANKS

  27. Would at least a part of this site work if i converted it to Typescript? I need it in TypeScript for a school project..
    Thank you

  28. how could i call filterRooms as second parameter using hooks? 🙁 im trying to do all but when i try to change the select nothing happens 🙁

  29. Thanku pls guide how to create e-learning website

  30. I am facing one issue when retreiving data from Contentful, it's not showing up the image, rest all the data is showing up successfully.
    When i see in console, it stores the image data as below , and thats why not able to load the image:i mages: Array(1)

    0: "//images.ctfassets.net/cy4c81f037zy/13La8NIyEqMfCbny7n77u9/0692b505a5e84136fb14c52ab5dc6792/details-1.jpeg"

    length: 1

  31. Hello sir, great tutorial! It's indeed in-depth react tutorial,
    I was coding along while following the tutorial but then I got stuck somewhere between 2:46:002:50:00, my code is exactly as your code but it's not working, everytime is displaying the page 'no such room could be found'
    Please guide me to get through it

  32. Any plans to make this on Gatsby

  33. Can you please include the coupon code as said.

  34. really enjoyed this video, thank you. contentful is really powerful and at the same time very simple. I liked it.

  35. Hi felow programmers, please recommend similar React tutorials, really enjoyed this one.

  36. Is this for beginners too ?

  37. Are you just using class component so that you can use state? This can be just a functional component with useState?

  38. i am not getting faalignright icon don't know why please someone tell whats the problem ?

  39. Anyone who can answer. When to use class-based component and the function-based component

  40. I got an error when I run the complete project.throw new TypeError('Expected parameter accessToken'); can someone assist me

  41. Its Very helpful my semester final project Thank you sir

  42. thank you so much man, this was really helpful.

  43. Thank you very much for this vedio.

  44. Great tutorial, very insightful. Just one question… if I have more than one content_type and I need to access different one in different components, can I somehow pass it as a prop?

  45. sir kindly enable cc option

Leave a reply

chuanfly
Logo
Compare items
  • Cameras (0)
  • Phones (0)
Compare