Complete MERN Stack Project: Build a Hotel Booking App Like a Pro Developer Step-by-Step Course 2024

[@ChrisBlakely]

‼I'm working on the next KZbin course where we build an enterprise level microservices app using next.js, node.js, docker, postgresql and AWS! Join the mailing list to stay updated, get early access, and be part of our community when it's released. 🔔 Want to know more? --> jschris.com/ecommerce-course What we're building - 🐳 install docker / setup docker compose dev environment - 🔥 how to setup Next.js Frontend, Node.js in microservices setup - 🛍 Users can search/view products in bulk from our (products service) - 🔒 Authentication (auth service) - 🛒 Cart saving functionality (cart service) - 📧 users will make orders (order service) - 📦 users will receive email updates as their order progresses (notification service) - 👤 Admins can view the dashboard, update orders, and view products - ☁ Deploy to AWS ECS The tech we're using - 🔥 Next.js Frontend, Node.js for backend microservices - 🐰 AWS SQS for microservices sending/consuming messages - ☁ AWS ECS (like kubernetes but easier to use) - ☁ AWS S3 (storing images - 📚 Postgres for Databases

[@wavesofficial5191]

@ChrisBlakely at 4:12:06 when you add a user in auth.spec.ts file your test is passed but when i did the same thing i changed the password but it is giving me the error continously on testing what should i do now?

[@Education_hub23]

Hii Chris sir, I'm getting error on npm run dev

[@mjylove2]

cant wait!

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@akashdutta1620]

As a senior engineer, I can say this is the best video I have watched so far, that follows all the industry-level standards... Highly recommend it to new developers..

[@ChrisBlakely]

Hey thanks for the feedback! Means a lot 😀

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@akashdutta1620]

​@@waw8499Sure can u upload the code to some vcs and share the repo link

[@hoangng16]

May I have a question? The authentication approach in the video doesn't provide a verification feature (e.g., email). So, what if somebody uses somebody else's email to register?

[@AnandShukla-ti3sw]

I'm getting a lot of errors while deploying the app on render. in my developer environment code runs well, but in render it is showing a lot of errors, mostly related to typescript. Can any one help me telling, how to handle these errors? I can't understand what those errors are actually about! I searched on google too, but still not working. I'm stuck at @7:10:00 ... Here in this video He doesn't get any error. which makes it very easy. Actual learning is when we learn to debug errors too.

[@magicsinhindi9628]

10:09:58 If someone is wondering why searching using the "destination" param isn't working for them, and it's displaying "6 Hotels found" every time, no matter whatever param you choose, it's because of an editing mistake. Chris probably accidentally edited the part out where he constructs the "constructSearchQuery" part in the backend routes file, "hotels.ts". You can check at 10:39:02, the code looks different in the vid, if you try to match with your own file. So hopefully this helps out some fellow developers, keep up the amazing work Chris 🙏

[@ChrisBlakely]

Hey thanks for the kind & understanding response! This was indeed a mistake on my part so apologies. I appreciate you taking the time to try and help others!

[@magicsinhindi9628]

@@ChrisBlakely This ain't nothing compared to what you're doing for the community mate! Keep it up ❤

[@abhaytiwari6411]

@@magicsinhindi9628 bro can you help me , i am getting error in search feature (404 not found and error fetching hotel) although my code is same.

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@nk23_]

yeah..i copied the file from source code..but its still showing 0 found while search..can you tell me how to correct this?

[@arllycavalcanti8722]

Oh, god! Finally! No Sponsorship Clerk and setups that Works only in Vercel, no packages that nobody uses. Thank you, Sensei!

[@ChrisBlakely]

You're welcome! My latest video here on KZbin uses Auth0, which is what a lot of companies use so feel free to check that out if you want! And let me know if you hit any issues or have suggestions for content :D

[@SupriyoGhosh-gz3fs]

I am stuck while implementing the search functionality, can you please help me out?

[@LokmaneElhakimBaslimane]

@@SupriyoGhosh-gz3fs where exactly are you stuck ?

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@Xiraex]

5 hours into the course. This tutorial is Gold content on KZbin. Testing is just cherry on the top. Love it. Thank you.

[@ChrisBlakely]

Thanks so much for taking the time to watch, I really appreciate it! Let me know if you hit any issues or anything

[@think_it_again]

How much time it take @Xiraex

[@Xiraex]

@@think_it_again it depends on how much things u already know or how fast you can take things. But as a side project, for me, giving it 2-3 hrs a day, it'll take me about 13-14 days I guess.

[@KJ-ve3ld]

Did he make a different web application for Admin or the User is adding the new hotels?

[@Xiraex]

@@KJ-ve3ld I completed it. It's a good project but your answer is no. The user can add hotels but I modified a bit and made it so that only a type of people can add hotels like the owners

[@akkahshhagarwaal2056]

48:38 - User Registration API 1:18:03 - User Login API 1:32:35 - User Registration Form Feel free to add more timestamps in the comments

[@lokeshnegi5051]

thanks a lot man

[@malishasandeep8256]

2:17:10 - app context and toast notification 2:37:48 - checking user login state 3:04:32 sign in and sign out 4:45:39 - add hotel feature oveview

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong (10:00:00)

[@syedammarali108]

@@waw8499 Can you please tell me how to initialize dist folder in the project?, currently, I am on timestamp 4:26:18.

[@waw8499]

@@syedammarali108 hey so you need to run "npm install && npx tsc" in the backend terminal and also make changes in the package.json as him or you can just create the dist folder and make changes like him in package.json and then type "npm run" as shown

[@FarazRohaila]

I was amazed to find this course free. You have put so much detail in this video. I am a PHP developer struggling to switch to MERN but this video gives me surety, that I can with in no time. Each minute is a gem, you just can't skip even if you are good at another language. I am expressing my thoughts first time for a KZbinr & you are the one. Good Luck in your Life.

[@ChrisBlakely]

Thanks for the kind words ! It means a lot ! Wishing you all the best

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@charlesfarris4318]

Excellent job -- I found this course far more helpful than most paid courses I've seen. Thanks for creating this!

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@kitty8170]

at 4:26:20 the command in terminal for getting dist folder in backend "npm run build"

[@kamruzzamanchowdhury894]

thank you

[@danieleliyahu3014]

Thanks, I just got stuck on this.

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@kitty8170]

@ end to end tests? No its not necessary

[@codewisersahil2280]

Finally I found the best industry standard based MERN project after the stressfull searching.

[@ChrisBlakely]

Wait until you see the next one 😄 thanks for watching!

[@syedammarali108]

Can you please tell me how to initialize dist folder in the project?, currently, I am on timestamp 4:26:18.

[@jayanthaitha8497]

@@syedammarali108 run "npm run build" in the backend it will create .dist folder

[@salmamhadhbi3409]

11:26 Frontend setup 13:25 mangoDb setup 24:09 final project 1:32:34 user registration form 2:11:34 test authentification terminal 3:02:32 test 9:29:34 search bar

[@aloSolo]

Thanks for clarifying the code's functionality. Many get stuck in tutorial hell due to a lack of real-world explanations. Your teaching style, emphasizing the "why" in projects, is valuable and appreciated in breaking free from endless tutorials. Thank you.

[@ChrisBlakely]

This is great feedback, thank you! Glad you found this useful !

[@trueintrue2429]

​@@ChrisBlakelysir, your great 🫂

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong (10:00:00)

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@developer-1828]

"Just like this"! I've watched a fair few of these 12+ hour courses on youtube and yours are the best by far. My small donation is no where near enough to match the value of the content covered in this course, but wanted to send my thanks in some way, shape or form. Super excited for the next course you are working on, and will be buying the pro version as soon as it lands. Thank you!

[@ChrisBlakely]

Wow thank you so much ! This is super generous of you and I really appreciate it 🙌

[@ritusingh8578]

I'm 2 hours in this course and its the best one I've come across. Deserves so many more views! The explanation is perfect

[@ChrisBlakely]

Thanks for the kind words ! Let me know if you hit any issue !

[@mjylove2]

Thank you, thank you so much for this amazing video. I've got a huge value out of this MERN project. Keep up the good work! looking forward to seeing the next Next.js project ! 😀

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@ChrisBlakely]

Thank you all for the support so far! I hope you're enjoying the course, if you hit any issues, bugs, or errors please leave a comment below and I'll try and help. Would also love to hear any feedback/suggestions on what you'd like to see next on the channel!

[@proudmoroccan8164]

Thank you for sharing. immensely appreciated

[@ajassharafudeen]

I quit a boot camp few days ago due to high fees and outdated syllabus. Now, all I need is to learn by doing projects and this is what I was looking for. Thank you very much. I hope I can become a good instructor like you. It's a gift you have.

[@ChrisBlakely]

Thanks for the kind words!

[@mythcrafts]

​@@ChrisBlakely Thanks a lot for this tutorial, if I may give a suggestion for a future video, could you make a tutorial on creating an accounting ELECTRON app similar to sage50 or freshbooks that includes the following: Invoices UI: includes CRUD, Name (optional), Date, invoice number, item, Item description (input box should be big enough for two sentences), quantity, unit price, total amount, amount paid at sale, net due, reference invoice (optional). Should include a Retainer fee system so it tracks customers who have paid partial amount of the total price. and when making an invoice for the rest of the amount the invoice will include a reference invoice for the first invoice. When a customer pays a partial amount it will be categorize as a retainer fee invoice. Expenses UI: includes CRUD, Store Name, Date, item, total amount. Item Creator: lets you create item so you can quickly choose from frequent items. Interface page to view all invoices, expenses and Retainer fees. Dashboard: can view invoices, expenses margins in a span of a month and other information. (not necessary to make) Database: has to be Mongodb, or local pc. Keep in mind for a carpentry store items are not fixed price. So prices and items should not be stuck fixed with each other. CRUD: create, read, update, delete All inputs are editable, and make it so if you hit tab it goes to the next input box (optional): means does not need to be filled but present if needed Edit: The interface for the app does not need to look good, just want it to be functional. I know you created a budget planner app but this is more sophisticated and suitable for any store I hope this is not too big of an ask for a tutorial, I searched most of the internet and youtube did not find a single electron app or Mern stack app for an accounting project like this, I found a php tutorial but I am not ready to learn php and have only experience with javascript. Love your videos

[@kirtisharma3259]

@@ChrisBlakely i don,t know anything about typescript, so can i start this? or should i learn it first?

[@aniksaha8108]

Completed this project FINALLYYYYY!!!! Learnt many new things like useForm, useQuery, integrating stripe etc also had many challenges also forget some of the parts, will revise this again, thank you so much for this amazing free project! Please make new projects using AWS, Microservices Archi., Docker, etc, Thanks for this project Chris!

[@abhivyaktiyadav4960]

hi request if you could help me with this: at 11:00, i followed all the steps but as i do npm run dev i get this error: import express from 'express'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module.m._compile (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Object.require.extensions. [as .ts] (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:1207:32) at Function.Module._load (node:internal/modules/cjs/loader:1023:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) at phase4 (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\bin.ts:649:14) [nodemon] app crashed - waiting for file changes before starting...

[@Onto.walking]

@@abhivyaktiyadav4960still facing ?

[@Education_hub23]

​@@abhivyaktiyadav4960 Hey have u resolved the error? I'm getting the same error , why??

[@Navkaran04]

​@@Education_hub23Add type as module in package.json

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@RishabhSinghCodes]

Amazing project Chris 🙌 I have completed it and got to learn a lot. Your explanations are just perfect. Thank you.

[@syxshooters3121]

Man this is just awesome. I am finishing 6 hours. and honestly saying this is cool project for resume Thank you for such amazing content

[@ChrisBlakely]

That’s great! Let me know if you have any issues or hit any problems - the full code is on GitHub too if you need to reference it. Thanks for watching!

[@joelgeorgesam7982]

is this ok for those only know HTML CSS and a liitle JavaScript?

[@syxshooters3121]

@@joelgeorgesam7982 learn react first if you have idea of node js express js mongodb then you can go through it... otherwise I can't suggest you this

[@fahad_hassan_92]

For those facing errors around 10:30 when running for the first time, run this command: npx tsc --init This will create a tsconfig.json file, which will hopefully resolve relevant issues (worked for the import error in my case).

[@AyushDas-t7y]

best course so far! looking forward for more such content from you, thanks

[@ChrisBlakely]

Thanks for watching!

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@zhouhou3702]

I've completed around 4 hours of video content step by step, and I've learned a lot, especially in the testing part, which has me feeling very excited. I've always heard that testing is a significant aspect and will be very useful for actual job. Currently, I'm working as an insurance agent and learning coding in my spare time. Your video content, which is a comprehensive full-stack tutorial, is something I really enjoy. I'm currently in the process of designing an app for my agency that can manage check-ins, check-outs, and allow managers to view employee sign-in/sign-out records, calculate wages, and perform other functions. I really hope to see a similar app in your future video tutorials, as it would greatly assist me in completing my own employee management app design.

[@ChrisBlakely]

thanks for the suggestion I'll keep that one in mind !

[@k303k]

I really appreciate your efforts putting into this kind of tutorial

[@ChrisBlakely]

No problem, let me know if you hit any issues. Thanks for watching I appreciate the support!

[@SupriyoGhosh-gz3fs]

Hii! Is this site mobile friendly and responsive?

[@webdevLover727]

There are many ppl who make Web dev videos on youtube regularly but they don't explain small details like you. You are a great teacher Chris. Thanks for b2b mega projects and please make more Mern stack projects with React and PostgreSql

[@ChrisBlakely]

Thanks! My next video will use Postgres !

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@praulayar4805]

It is amazing in-depth project. Completed upto Hotel management. Learnt lot of things . In future need more such real-world application project. It helps build confidence to learn more and code.

[@ChrisBlakely]

nice! thanks for watching!

[@SupriyoGhosh-gz3fs]

Hii! Is this site mobile friendly and responsive?

[@okaforamandifavour1369]

Hi Chris, thank you for your encouragement. I read some of your articles and decided to say hi.

[@rajmalla5310]

at 4:26:29 , u wonder why dist folder doesnt appear it is beaucse u have to install npm install && npx tsc

[@DarkBerry-l1s]

Issue encountered on deployed website during sign-in process 4:43:00 .. Token not fetching to the frontend

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@karimovanar]

It's a great course. Let the continuation come❤

[@zhouhou3702]

Here's the corrected version: "Such a good video! I've watched all the project videos you've posted, and this one is particularly good. After I complete it, I will start my own project - an Employee Check-In Management App. If you haven't decided on the next video topic yet, you could consider doing one on Employee Check-In Management Apps. It could teach us how to do time and schedules

[@deepentimalsina1067]

anyone who is having problem when deploying, in the start command section where it was npm start, make it cd backend && npm start, it worked for me

[@abhivyaktiyadav4960]

hi request if you could help me with this: at 11:00, i followed all the steps but as i do npm run dev i get this error: import express from 'express'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module.m._compile (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Object.require.extensions. [as .ts] (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:1207:32) at Function.Module._load (node:internal/modules/cjs/loader:1023:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) at phase4 (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\bin.ts:649:14) [nodemon] app crashed - waiting for file changes before starting...

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@danieleliyahu3014]

Chris you are amazing. This tutorial is so enriching and high level. After completing this tutorial I ready for any full stack position.

[@wasifkhan2377]

**EDITED* When i do "npm run" idk why it's not making "dist" folder like you did on 4:26:19 i added ""outDir": "./dist"" in compiler-options also added scripts in pckg.json "build": "npm install && npx tsc", "start": "node ./dist/index.js", sorry i was typing wrong command "npm run" while it's "npm run build"

[@OmarFaruk-bz4gw]

❤❤❤❤ Sir you can explain very well. I hope to get more loads of good projects from you. May Allah make your life beautiful

[@ChrisBlakely]

Thanks for watching! I really appreciate it !

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong (10:00:00)

[@ofiradany4432]

תודה מישראל!

[@ChrisBlakely]

Thank you for the super thanks ! 🙏

[@sherwinmontanez5481]

4:26:22 maybe somebody searching on why my dist folder does not appear in case, it's "npm run build" not "npm run" it took me an hour of figuring out what's the problem😅😅

[@ChrisBlakely]

ah sorry about that, good job figuring it out!

[@sherwinmontanez5481]

Wow! I'm happy you noticed me😊😊😊

[@ChrisBlakely]

since you take the time to watch my content the least I can do is reply to your comments :) and I appreciate you sharing solutions you find to any problems! thanks again for watching! @@sherwinmontanez5481

[@Sanjeev8880]

I was also stuck in same problem, Thank you

[@abhivyaktiyadav4960]

hi can u please hep, at 9:53:00 nothing is appearing in the console for me as I click on the search button

[@anonymousname791]

It was great learning by building this project, now I'm gonna implement the admin portal for hotel-adding feature, email verification, rate limiting feature by own.

[@sakshamjain6180]

Just Completed whole 15:08:38 and am very Happy about it . Its very good lecture and really enjoyed it . Thanks chris 🙂🙂

[@adityavalvi6746]

Any error u face??

[@SupriyoGhosh-gz3fs]

Need your help. Is there a way to connect with you?

[@sakshamjain6180]

@@adityavalvi6746 yes some small errors but rewatching that part and doing some work by myself they were solved

[@abhivyaktiyadav4960]

hi request if you could help me with this: at 11:00, i followed all the steps but as i do npm run dev i get this error: import express from 'express'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module.m._compile (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Object.require.extensions. [as .ts] (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:1207:32) at Function.Module._load (node:internal/modules/cjs/loader:1023:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) at phase4 (\Abhi's\Mern Booking App\Backend ode_modules\ts-node\src\bin.ts:649:14) [nodemon] app crashed - waiting for file changes before starting...

[@Onto.walking]

@@abhivyaktiyadav4960git repo?

[@Onto.walking]

Finally done, nice and running Completed in 4 days. I do procrastinate a lot. Thank you for such content Will add more features Learned a plenty of new stuff Thank you

[@khkhashsjsb7wo2i3u]

Hello . Did you deploy it? Is it running and working well? I wanna do it as well to add to my portfolio. Will you recommend it?thanks

[@fezekile228]

I'm just a Django Developer who wants to explore MERN stack 😊. Hope this will help

[@velvephimbo7040]

There are no words to describe my appreciation and gratitude. The best MERN course by far. Thank you Sir!

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@visheshdadhich6636]

At 4:26:20, the code is npm run build

[@eminavchill]

I'm currently 6 hours in, and I have a feeling my girlfriend hasn't been able to give me what I've been missing for the past three months.

[@emgodas]

Teach her react so she can satisfy you more

[@thisisCloaked]

Hell yeah

[@sostheneshamamba3486]

😂😂

[@ArpitKumar-ym7kw]

Give ur gf

[@khushisdances6179]

can you please tell me if the tests between 3:30 and 4-45 are imp.. i need to make this project as soon as possible..do i need to watch it?

[@gyaniyoda4608]

This video is lengthy, but every second is worth it. ❤❤

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@raki0125]

He knows we are stuck in tutorial hell

[@Sky-yy]

So did he pulled us out?

[@RahulPanchal-p8w]

This is the best MERN stack project that use the current industry level technology and also e2e testing is covered and best part everything is explained in detail with the reason behind using it.❤

[@VanPetersonKpoti]

Thank you very much for your hard work. I enjoyed it so much. May God bless you abundantly.

[@ChrisBlakely]

Thanks for watching, much appreciated !

[@SAFEERALAM-dd2ny]

Thank you @chrisBlakely for providing such industry standard course for free .

[@mrjosh65]

Chris. thank you so much for this video. You really don't know how much this has helped me. I will say it again, you really don't know how much this has helped me. This is great!!! Much appreciation

[@ChrisBlakely]

Glad it helped, thanks for watching !

[@mrjosh65]

it helped in ways I never imagined before watching the video.@@ChrisBlakely

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@sa27ph]

3:36:03 - 3:36:08 The UI has not changed right away for me. I cannot see the "My Bookings", "My Hotels" and "Sign Out" buttons after the user login, the screen still shows "Sign In" button and the page has been redirected to "Home page". However, when I refresh the page, i can see the 3 links/buttons. I have compared your code from github with mine and i'm unable to spot the difference. (Edit: it is working as expected, i just had to follow along the video - i have not invalidated the "validateToken" query which was shown in the video further)

[@MukundaHandage]

thanks , saved my day

[@MukundaHandage]

still i am facing the same issue, could you please help

[@visheshdadhich6636]

@@MukundaHandage try replacing the validateToken with validate-token.

[@prashlovessamosa]

Thanks I have completed willl try to deploy this on AWS creating CICD thanks man you are great can't wait for next one your explanation is top notch.

[@ChrisBlakely]

Awesome bro , let me know how deployment goes and if you hit any errors

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@khushaljain4923]

2:17:05 App-context and Toast-Notifications

[@khushaljain4923]

4:27:00 Npm Run Build

[@wzup23]

Dude! My respect to you for this great realistic tutorial!

[@ChrisBlakely]

Hey thanks for watching !

[@wzup23]

@@ChrisBlakely Sure dude! This is really gold!

[@keyurgupta2685]

i rewatched the search and pagination from start many time but i think you missed to record the part of adding destiantion and other think in backend. the only time you did backend in the search and pagiantion part is while intial setup with page number and all and directly in sorting and filter part, constructquery function and searching with destiantion and other thing were already present

[@ChrisBlakely]

Yeah my mistake you can look at the code to see how it’s done

[@sakshikarnarts6638]

Can u please help me with that part...I am stuck in this part and I dont know what part of code to add in backend

[@waw8499]

hey could you tell where is it search destination part

[@ericcapiz6516]

@@ChrisBlakely can you post which part of the code was missing from the video please. im not getting an error but the pagination isnt working. i have 7 hotels and it always displays the 1st page. getting 200 status in network tab

[@romaniacelvin9831]

Hello, thank you for offering us the best video... I have two questions. 1) how to create a booking hotel calendar for users to check availability and also to allow hotel owners to connect with other calendars(PMS system) in the platform like this 2) how to create an invoice method when the user makes a room reservation and sends those details including contact to the hotel owner's email

[@mahdizangeneh6178]

Excellent tutorial! Your explanations are clear and thorough, making it easy to follow along. Thank you for your hard work and dedication. For your upcoming MERN tutorial, could you possibly include instructions for creating a multilingual website with both left-to-right (LTR) and right-to-left (RTL) versions? I'm eager to learn about best practices for data storage in MongoDB and implementing RTL CSS.

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@yashkhd1100]

Thanks for very high quality. It would be great in your next build if you can setup a mono repo for client, server and a shared type lib which both can refer too.

[@adach790]

Finished the course! I learned a lot, like, really a lot and I feel like I need to make some revision and dive deeper into concepts you used in this course. Thank you! You tried your best at explaining things in a simple way and I really appreciate this, not everyone can do that. Now during your next course, I'll try and build some stuff by myself first and then check with your solution. Keep this up! (or AI will replace us all... [although I'm not a developer, yet... if I'm lucky]

[@SujitKumar-pw1sl]

@adach790 Hey i am facing issue in automated test login in e2e, could be plz help me?

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong (10:00:00)

[@sunilping484]

Big Thank You i completed this course, feeling great, your teaching style is awesome . Thank you again from India

[@nk23_]

Hey hii...stripe payment method is working for you ?

[@adach790]

33:37 I don't remember writing this code. Of course it's a small inconvenience but I just wanted to point it out. I think it's going to be a great course.

[@ChrisBlakely]

Lol I don’t remember writing a lot of this code either looking back! Sorry for the mistake - there’s one or 2 issues like that I’ve added a pinned comment for reference. Will have to up my video editing skills before I do the next one 🤦

[@IamNature4You]

cant export type registerFormData , showing error , "Modifier can't be use here (2:01:00) Help pls

[@milanb8989]

if you have encountered the error above for initial setup of the backend server then try tsc --init it will generate generate a tsconfig.json file

[@mohamedrghay2424]

as i'm diving into this video to recreate the whole project , i'm gratfull to all the effort that you're putting on ! i'm taking a second to write this comment as i will continue the project :D thank you so much , for someone like me , i just did a boot Camp in MERN stack and i'm willing to change my career path , this's helping me a lot , to have a different perspective of what i've learned sharing your experience and knowledge with us , is something really special ! thank you again sir

[@KJ-ve3ld]

Did he make a different web application for Admin or the User is adding the new hotels?

[@kavindugunasekara448]

Great tutorial, I have complete this step by step, I am waiting for the Microservice Project, Thank You, Sir.

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@kitty8170]

I got selected as developer with Your project thanks sir🎉👍🏻

[@Sky-yy]

Really ? Share your resume

[@3alaamohamed603]

thank you for the course i have just finished it

[@meetrawal7615]

Will you help me run this on my pc

[@3alaamohamed603]

@@meetrawal7615 ???

[@AgozieOkechukwu]

great stuff.... though I had issues with the cookies using my chrome, it brought up the issue of same site and secure property, my logout wasn't clearing out the cookie as expected and also the the isError variable in the context wasn't working as expected

[@sakibb71]

I am also facing this problem. Did you solved it?

[@vitamash4389]

Just finished this course. Just had a minor bug with the totalCost on the backend(or maybe its just on my end) that I couldnt fix. By far one of the best tutorial and great explanation that covers almost everything a beginner need to know. Thank you Chris 🤝👊

[@ChrisBlakely]

That’s awesome man, thanks so much for taking the time to finish the course I appreciate the feedback! I have it on my TODO list to see if I can replicate your issue , if I find a resolution I’ll let you know. Thanks again, hopefully see you in the next one !

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong (10:00:00)

[@abhivyaktiyadav4960]

@@ChrisBlakely hi can u please hep, at 9:53:00 nothing is appearing in the console for me as I click on the search button

[@abhivyaktiyadav4960]

@@waw8499 hi can u please hep, at 9:53:00 nothing is appearing in the console for me as I click on the search button

[@waw8499]

@@abhivyaktiyadav4960 check for errors or anything you missed while importing

[@smartdriver2990]

Finally done. Thanks for the tutorial you've made. It is awesome

[@IsyathuIshrath]

hey did u encounter any issue adding the card to the render ?

[@smartdriver2990]

@@IsyathuIshrath I focused to development app, skipped the deployment

[@AE-qj5xi]

Use railway if you don't have credit card checkpoint : 4:40:37

[@lamhoang6198]

Hi Chris, thanks for the great tutorial. I actually finished it but there is still something that I haven't got yet. at 9:33:06 you said that "we don't wanna save updated states of the form field in the searchContext component cause it can cause the whole app to re-render, so we save them in the searchBar component". but as what I've read, the component will be rerendered when contexts changed, and we actually made the context in the searchContext component change by implicitly updating the context by passing values to the saveSearchValue function, so I figure eventually that will make context value in the searchContext component change and cause rerender. I'm still struggling to understand this point, could you please give a more clear explanation about that?

[@ChrisBlakely]

Hey so what I was trying to say is that we don't want to store the values in global state as the user is typing, or as they change the inputs - as this would cause too many app refreshes. I.e if the user types "london" we don't store to global state in on each keystroke. Instead what we do is store the state in local component, and when they are finished filling out the inputs, we store everything in global state on the button press. By saving to context in a batch like this, we ensure a single app rerender

[@stargaming8978]

thanks so much, I finish this project very well. But responsive for mobile wrong and I need to fix them

[@montyk.151]

The last overload gave the following error. Argument of type '(req: Request, res: Response) => Promise' is not assignable to parameter of type 'Application'. Type '(req: Request, res: Response) => Promise' is missing the following properties from type 'Application': init, defaultConfiguration, engine, set, and 63 more. getting this error in route/user. how to resolve this ? by the way you are a great teacher.

[@neoXm12]

I'm not sure if you’ve found a solution or this is even related to your issue, but I encountered something similar and wanted to share what worked for me. The problem seemed to be related to how res.json() was being handled in the code. Initially, I removed the return from return res.status(statusCode).json(...), removed the error. However, I realized that removing return isn’t ideal, as it doesn’t exit the function after the response is sent and may execute following code. So, instead, I changed the it to: res.status(statusCode).json({ message: "Your message" }); return; This way, the code exits properly after sending the response, and the error is resolved. This approach worked for me, though I’m not sure if it’s the best solution - let me know if you found another way!

[@pratikkadam7063]

bro you skiped explaning the constructSearchQuery(req.query) part while creating the "/search" endpoint. It appears directly at 15:08:38 and not while creation of "/search" endpoint which is at 9:14:40

[@ChrisBlakely]

Sorry about that - you can find the code on GitHub let me know if you have ant questions around it!

[@chriskwheadon]

Hey Chris! Really excited to dive into this over the next week or so. It looks amazing and your style of teaching is perfect for me as you actually explain WHY we do something. Instead of saying "do this do this do this and voila!" Loving it so far. Just a quick question, is part of the video missing? Or is that just on my end? I'm at 33:37 right now and I see that the routes have been put into App.tsx and react-router-dom installed but I don't think that was actually mentioned beforehand? Unless I'm going crazy or my computer is acting up. Which is very possible.

[@ChrisBlakely]

Hey! Thanks for the feedback! So I reckon this was an editing mistake - I remember recording/explaining the routes but you're right its not in the video! Apologies for the oversight. At this point we're basically setting up a route for each of our pages, and theres a catchall route (path="*") to redirect to homepage for any route that is unknown (routes run in order which is why this one is at the bottom). If you're having issues with routes you can have a look at the finished code file here: github.com/chrisblakely01/mern-booking-app/blob/main/frontend/src/App.tsx, or if theres anything else funky you notice feel free to let me know again! Cheers!

[@chriskwheadon]

@@ChrisBlakely Brilliant thank you so much for the reply and clarification! I'm going back in :D

[@KennDev]

that got me lost too. So far the video is so clear as to explaining each parts as much as you can. Thank you so much @ChrisBlakely. Really appreciate this video.

[@verdanbandral222]

How do I install the routes? I am new to coding so I cant seem to find the way it is needed to be done. I found a lot of ways which are the newest and say that BrouweserRouter is not supported anymore so I would like to know how you installed this. Thanks!@@ChrisBlakely

[@edemmarvinkudjo9346]

Thank you for this mern project Chris. Really learning a lot from this especially the playwright testing. I'm almost done with the project and will be adding some additional features to improve my knowledge on mern. Thank you once again Sir 🙏🏿🙏🏿

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@edemmarvinkudjo9346]

@@waw8499 Okay sure.

[@codeammar3332]

I'm doing an internship now, and by the end of it I'm asked to build a project in order to implement all the tech that I studied through out the internship, and I believe that this is what I need ( Typescript, node(expressjs), mongodb, react). It's an important phase because I might get an offer based on the project done, so wish me luck!! I'm going to start the video today, I'll get back to you when it's done!! Thank you in advance 😍

[@ChrisBlakely]

Good luck friend, I have no doubt you can do it! Take your time and understand the concepts, as this is what they will want to see (speaking from experience from when I interviewed juniors) and let me know if you need help or get issues! Thanks !

[@codeammar3332]

@@ChrisBlakely thank you for the note, will do that !

[@codeammar3332]

@@ChrisBlakely Chris, I want to use Axios instead of reactQuery will the project stay applicable? because I studied axios so I want to implement it and I think some code will change like the usemutate and the api-client, ill do few research on how I can get the cookies using axios.

[@codeammar3332]

Until now I finished the toast part and used Axios in the register form.

[@ChrisBlakely]

so the react-query stuff is used to manage the state, errors, retry etc for us, which is why we use it. You'll notice we still have to write the actual request ourselves (we do this using fetch in api-client) but we dont need to manage state, use effect as thats done by react query. You can use axios with react-query (just use axios instead of the fetch requests in api-client). If you want to completely replace react query with purely axios, you can, but you'll have to manage a way to store the data in state, the isloading states etc@@codeammar3332

[@rajibdas699]

That's amazing Chris. Thank you so much for this great course. Could you please add time stamps to the video? It would be helpful.

[@ChrisBlakely]

Thanks! Time stamps are in the description under chapters

[@TrucTran-xw5ml]

"I am encountering the error 'No overload matches this call' at line 59:14 in the section: if (user) { return res.status(400).json({ message: "User already exists" }); } When I write this code, the async (req: Request, res: Response) line shows an error. Please help me fix this issue."

[@ofiradany4432]

Hi Chris! first of all thanks for the awesome course! Secondly, why don't you add the "key" property for elements in a list? without it react is throwing an error

[@vitamash4389]

Somehow when i want to confirm the booking, its creating an empty bookings array in mongodb. The object gets pushed when i click the Confirm Booking button the 2nd time. Any ideas to solve this bug. The timeline for this is - 14:11:50

[@ChrisBlakely]

Hey, sounds like a race condition - are you definately using the await keyword? you can also try adding "new: true" property to the save query e.g: const hotel = await Hotel.findOneAndUpdate( { _id: req.params.hotelId }, { $push: { bookings: newBooking }, }, { new: true, } ); if that doesn't work, you can try initialising an empty array for the bookings array when you create the hotel e.g in my-hotels.ts, in the router.post() endpoint, just before we create the new Hotel object add: newHotel.bookings = []; there might not be an array when the hotel is created. The array gets created on the first booking attempt. The second booking attempt push succeeds because the array exists this time. Thats the theory anyway, these types of bugs are the worst. Let me know if it works so I can let others know !

[@vitamash4389]

@@ChrisBlakely So the first fix pushes the array but I have just discovered that the totalCost pushed to mongodb is totally wrong. On the price summary(front end) it displays the correct total cost but its not the one getting pushed to mongodb. Its like if you start with a total cost of 100, it gets pushed. When you go to make another different booking with different cost the 100 from the previous booking gets pushed as the totalCost and the current cost left hanging waiting to be pushed for the next confirm booking. It goes on like that with all the other different bookings you try to make.

[@vitamash4389]

When inspecting the page(payment-intent) under Network on the Preview tab, the totalCost will be correct(100) but after clicking confirm booking, when you inspect on bookings on the Payload, the totalCost wouldve changed to a previous cost(95).

[@ChrisBlakely]

hmm, interesting find - the price is calculated on the backend when a booking is made (to stop someone fudging the API request to add their own price) so there might be an issue there. I'll take a look when I get a chance and see - if you have a solution you're more than welcome to add a pull request to the repo with the fix!

[@kitty8170]

@@ChrisBlakely same brother

[@regilearn2138]

Really really great ,appreciate you lot Chris. Awesome... pls do more typescript MERN real world enterprise level pro projects

[@ChrisBlakely]

Will do, plenty more coming up - let me know if you hit any issues. Thanks for watching I appreciate the support!

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@shafayethossain1952]

11:25 frontend setup

[@ajassharafudeen]

29:23 Bug:"Cannot find module 'react-router-dom' or its corresponding type declarations." Fix: Install react-router-dom with the following code. npm install react-router-dom

[@iflifewasmovie4766]

Completed both the projects... hotel booking and food order app. I don't know but some of the coding part is missing in either videos.But that is for good so that people don't simply copy and learn to implement code themselves.

[@northvik]

Hey, thanks for a video. I notice that you have not explained how you setup on 33.39

[@rockNbrain]

What a Master Piece ... thanks a lot bro🎉

[@ChrisBlakely]

Thank you too!

[@GameinTheSkin]

Going to start it soon! The comments hold it in very high regard i see

[@sujairsuhaim2769]

Really big effort brother started to do with your video today and new subscriber 😊 keep doing like this

[@ChrisBlakely]

Thank you for the kind words! If you hit any issues please let me know !

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@extraordinary2623]

I'm come from the free code camp article you wrote it was amazing thank you , iwll watch your video and i'm sure it is the best

[@aninima01]

finally completed

[@ajeigbejohnoluwaseyi8458]

Great job Chris!

[@ChrisBlakely]

Thanks bro 👍

[@bhavyagautam2821]

At 11:45:00. after fixing that Error I am getting a new error but I cannot figure out how to fix this one at model.Query.exec (C:\Users\gauta\OneDrive\Desktop\Mern booking app\backend ode_modules\mongoose\lib\query.js:4330:80) { stringValue: '"NaN"', messageFormat: undefined, kind: 'Number', value: NaN, path: 'starRating', reason: AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value: assert.ok(!isNaN(val))

[@Subashn-j1c]

Hi chris , Luckily I found your channel. I would request to make more real world project using postgresql with complex query and deploying in aws and using aws differemt services for automation. Looking forward for the video . I have share the channel to my friend as well.

[@JuanDiazx]

21:07 34:30 1:02:00 1:18:00 1:43:10 1:57:00 2:17:10 2:38:00 3:42:45 4:23:00 4:47:00 5:29:00 5:52:00 6:20:00 6:50:00

[@KennDev]

This is really awesome Chris! Just finished working after 2 Months! hopefully there's more! what about a E-Commerce App!? Looking forward to this!

[@ChrisBlakely]

nice work! yeah I'm working on ecommerce course with microservices/kubernetes/node/react etc etc its a bit of a beast so no time frame yet. I've a food ordering platform course on my channel too if you're looking for another one :)

[@KennDev]

@@ChrisBlakely Thanks! I have looked that up too. I am looking for away to incorporate a local payment system, cause stripe doesnt support PHP Peso.

[@ChrisBlakely]

@@KennDev hey bud, stripe supports PHP - just make sure you're using a test card from your country and to change your currency to php when sending requests to stripe. Good luck!

[@kuldeepdawar7496]

you are doing great job brother, I learnt a lot , God bless you 🙂🙂

[@waw8499]

hey hi I am kind of getting the same issue could you help whenever I try to search I get cannot get /api/hotels/search I checked but everything is same but I can't find what's wrong

[@mrinvisible9078]

In 34:29, I don't have the same layout page with the header like you because it appears only a blank page with the name and the "Sign-in" button next to each other. On my tailwind.config.js file, I did this following code: /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js, ts, jsx, tsx}"], theme: { extend: {}, }, plugins: [], } But it still doesn't display correctly.

[@ChrisBlakely]

Try Remove the spaces from your content array eg {js,ts,jsx,tsx}

[@mrinvisible9078]

@@ChrisBlakelyThank you ! It works very well ! :D

[@ChrisBlakely]

No problem, sorry for the trouble !

[@unnikuttan9637]

13:57:52 save booking to database

[@SupriyoGhosh-gz3fs]

Brother have you completed the whole video and deployed your web app in production? Can you please help me out with the errors you got while following this tutorial and how you resolved them?

[@unnikuttan9637]

@@SupriyoGhosh-gz3fs not completed yet

[@elidrissielidrissi3774]

c'est incroyable!!!!!!! merci mille fois!! ça m'a beaucoup aider! thank you very much Chris

[@ChrisBlakely]

Merci d'avoir regardé et j'espère vous voir dans la prochaine vidéo! (apologies I don't speak french 😂)