Complete MERN Stack Project: Build a Hotel Booking App Like a Pro Developer Step-by-Step Course 2024
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Welcome to the Complete MERN Stack Project Course! Chapters/Source Code/links here 👇
🚀 Apply what you've learned with weekly project ideas. Join the community now! www.jschris.co...
Source: github.com/chr...
Test Data (for automated tests & hotel images): github.com/chr...
Render.com IPs to add to MongoDB:
3.75.158.163
3.125.183.140
35.157.117.28
Other Links:
Stripe: stripe.com/
Cloudinary: cloudinary.com/
MongoDB: mongodb.com
🎥: Chapters
00:00:00 intro
00:01:28 project setup
00:20:58 setup tailwind
00:23:54 adding layout
00:46:48 auth explained & login and registration
03:42:20 automated tests explained & auth tests
04:22:20 deployments explained and auth deployment
04:45:37 add hotel feature
07:09:39 add hotel feature deployment
07:16:58 view my hotels feature
07:43:52 view my hotels automated test
07:53:58 view my hotels deployment
07:57:54 edit my hotel hotel
08:49:37 edit my hotel automated test
09:02:54 edit my hotel deployment
09:05:40 search page & pagination feature
10:38:00 sorting and filtering feature
11:23:00 search page feature automated test
11:28:28 search page feature deployment
11:32:53 hotel details page feature
12:19:14 hotel details page automated test
12:22:45 hotel details page deployment
12:23:57 save search terms to session storage
12:32:04 booking confirmation page
13:08:00 stripe payments explained
13:10:31 stripe setup and booking feature
14:14:53 booking feature automated test
14:24:45 booking feature deployment
15:08:03 outro - congrats & thanks for watching
Description:
🚀 Welcome to our comprehensive step-by-step course where we dive into building a full-fledged Booking App using the MERN stack! This tutorial is perfect for developers looking to enhance their skills and create a real-world application from scratch. Whether you're a beginner eager to delve into MERN stack development or an experienced developer looking to polish your skills, this course has something for everyone.
🔑 *Key Features of Our Booking App:*
1. **User Authentication**: Learn to implement secure login and registration using HTTP cookies and JWT for a seamless user experience.
2. **Hotel Management**: Master the art of adding, editing, and viewing hotels. We cover everything from handling form inputs to managing state.
3. **Image Uploads**: Dive into integrating image uploads, a crucial feature for any booking platform.
4. **Search, Sort, & Filter**: Enhance the user experience with functionalities to search, sort, and filter hotels, making it easy for users to find their perfect stay.
5. **Online Payments**: Integrate Stripe for secure and efficient hotel booking payments.
6. **Booking Management**: Implement the feature to view and manage bookings, essential for any booking application.
7. **Recent Hotels on Home Page**: Display recently added hotels on the home page, keeping the content dynamic and engaging.
#MERNStack #WebDevelopment #BookingApp #FullStackDevelopment #JavaScript #React #Nodejs #MongoDB #Express #CodingTutorial #LearnToCode #DeveloperTraining
‼I'm working on the next TH-cam 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
@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?
Hii Chris sir, I'm getting error on npm run dev
cant wait!
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?
Happy to hear very happy to see ♥
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..
Hey thanks for the feedback! Means a lot 😀
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
@@waw8499Sure can u upload the code to some vcs and share the repo link
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?
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.
Oh, god! Finally! No Sponsorship Clerk and setups that Works only in Vercel, no packages that nobody uses. Thank you, Sensei!
You're welcome! My latest video here on TH-cam 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
I am stuck while implementing the search functionality, can you please help me out?
@@SupriyoGhosh-gz3fs where exactly are you stuck ?
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?
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).
thank you bro
tysm!
thanks!
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 🙏
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!
@@ChrisBlakely This ain't nothing compared to what you're doing for the community mate! Keep it up ❤
@@magix_music bro can you help me , i am getting error in search feature (404 not found and error fetching hotel) although my code is same.
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
yeah..i copied the file from source code..but its still showing 0 found while search..can you tell me how to correct this?
Excellent job -- I found this course far more helpful than most paid courses I've seen. Thanks for creating this!
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
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
5 hours into the course. This tutorial is Gold content on TH-cam. Testing is just cherry on the top. Love it. Thank you.
Thanks so much for taking the time to watch, I really appreciate it! Let me know if you hit any issues or anything
How much time it take @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.
Did he make a different web application for Admin or the User is adding the new hotels?
@@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
Finally I found the best industry standard based MERN project after the stressfull searching.
Wait until you see the next one 😄 thanks for watching!
Can you please tell me how to initialize dist folder in the project?, currently, I am on timestamp 4:26:18.
@@syedammarali108 run "npm run build" in the backend it will create .dist folder
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 TH-camr & you are the one.
Good Luck in your Life.
Thanks for the kind words ! It means a lot ! Wishing you all the best
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
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?
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
Thanks! My next video will use Postgres !
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?
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!
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...
@@abhivyaktiyadav4960still facing ?
@@abhivyaktiyadav4960 Hey have u resolved the error? I'm getting the same error , why??
@@Education_hub23Add type as module in package.json
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?
Amazing project Chris 🙌
I have completed it and got to learn a lot. Your explanations are just perfect.
Thank you.
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
Thanks for the kind words ! Let me know if you hit any issue !
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!
Thank you for sharing. immensely appreciated
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.
Thanks for the kind words!
@@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
@@ChrisBlakely i don,t know anything about typescript, so can i start this? or should i learn it first?
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
thanks a lot man
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
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)
@@waw8499 Can you please tell me how to initialize dist folder in the project?, currently, I am on timestamp 4:26:18.
@@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
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.
thanks for the suggestion I'll keep that one in mind !
at 4:26:20 the command in terminal for getting dist folder in backend "npm run build"
thank you
Thanks, I just got stuck on this.
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?
@ end to end tests? No its not necessary
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
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!
is this ok for those only know HTML CSS and a liitle JavaScript?
@@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
"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!
Wow thank you so much ! This is super generous of you and I really appreciate it 🙌
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.
This is great feedback, thank you! Glad you found this useful !
@@ChrisBlakelysir, your great 🫂
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)
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?
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.
nice! thanks for watching!
Hii! Is this site mobile friendly and responsive?
I really appreciate your efforts putting into this kind of tutorial
No problem, let me know if you hit any issues. Thanks for watching I appreciate the support!
Hii! Is this site mobile friendly and responsive?
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 ! 😀
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?
❤❤❤❤ Sir you can explain very well. I hope to get more loads of good projects from you. May Allah make your life beautiful
Thanks for watching! I really appreciate it !
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)
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
Hi Chris, thank you for your encouragement. I read some of your articles and decided to say hi.
best course so far! looking forward for more such content from you, thanks
Thanks for watching!
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
It's a great course. Let the continuation come❤
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.❤
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
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...
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?
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
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
This video is lengthy, but every second is worth it. ❤❤
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
Chris you are amazing.
This tutorial is so enriching and high level.
After completing this tutorial I ready for any full stack position.
Just Completed whole 15:08:38 and am very Happy about it . Its very good lecture and really enjoyed it . Thanks chris
🙂🙂
Any error u face??
Need your help. Is there a way to connect with you?
@@adityavalvi6746 yes some small errors but rewatching that part and doing some work by myself they were solved
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...
@@abhivyaktiyadav4960git repo?
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
thanks bro
There are no words to describe my appreciation and gratitude. The best MERN course by far. Thank you Sir!
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
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.
I'm just a Django Developer who wants to explore MERN stack 😊. Hope this will help
Issue encountered on deployed website during sign-in process 4:43:00 .. Token not fetching to the frontend
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?
Same for me
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😅😅
ah sorry about that, good job figuring it out!
Wow! I'm happy you noticed me😊😊😊
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
I was also stuck in same problem, Thank you
hi can u please hep, at 9:53:00 nothing is appearing in the console for me as I click on the search button
thank you for the course i have just finished it
Will you help me run this on my pc
@@meetrawal7615 ???
To get the dist folder inside your backend folder at 4:26:20 command - npm run build
thanks bro i got stucked and found your answer
npm run build is not generating the dist folder for me. Please what can i do.? "build": "npm install && npx tsc" is what i have
@@obiakorisrael2400 check your current directory it should in Backend cd backend
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.
Awesome bro , let me know how deployment goes and if you hit any errors
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
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.
Teach her react so she can satisfy you more
Hell yeah
😂😂
Give ur gf
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?
Thank you very much for your hard work.
I enjoyed it so much.
May God bless you abundantly.
Thanks for watching, much appreciated !
He knows we are stuck in tutorial hell
So did he pulled us out?
תודה מישראל!
Thank you for the super thanks ! 🙏
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
Glad it helped, thanks for watching !
it helped in ways I never imagined before watching the video.@@ChrisBlakely
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
Dude! My respect to you for this great realistic tutorial!
Hey thanks for watching !
@@ChrisBlakely Sure dude! This is really gold!
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
Did he make a different web application for Admin or the User is adding the new hotels?
Great tutorial, I have complete this step by step, I am waiting for the Microservice Project, Thank You, Sir.
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
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]
@adach790 Hey i am facing issue in automated test login in e2e, could be plz help me?
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)
Thank you @chrisBlakely for providing such industry standard course for free .
Big Thank You i completed this course, feeling great, your teaching style is awesome . Thank you again from India
Hey hii...stripe payment method is working for you ?
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.
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
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 😍
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 !
@@ChrisBlakely thank you for the note, will do that !
@@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.
Until now I finished the toast part and used Axios in the register form.
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
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 🤝👊
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 !
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)
@@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
@@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
@@abhivyaktiyadav4960 check for errors or anything you missed while importing
Finally done. Thanks for the tutorial you've made. It is awesome
hey did u encounter any issue adding the card to the render ?
@@IsyathuIshrath I focused to development app, skipped the deployment
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 🙏🏿🙏🏿
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
@@waw8499 Okay sure.
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.
I got selected as developer with Your project thanks sir🎉👍🏻
Really ? Share your resume
you are doing great job brother, I learnt a lot , God bless you 🙂🙂
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
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
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
Yeah my mistake you can look at the code to see how it’s done
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
hey could you tell where is it search destination part
@@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
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
Really big effort brother started to do with your video today and new subscriber 😊
keep doing like this
Thank you for the kind words! If you hit any issues please let me know !
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
What a Master Piece ... thanks a lot bro🎉
Thank you too!
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!
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 :)
@@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.
@@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!
**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"
should be "npm run build" instead :)
Going to start it soon! The comments hold it in very high regard i see
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
c'est incroyable!!!!!!! merci mille fois!! ça m'a beaucoup aider! thank you very much Chris
Merci d'avoir regardé et j'espère vous voir dans la prochaine vidéo! (apologies I don't speak french 😂)
Absolutely damn good bro keep it up we all are with you and love you ❤❤
Really really great ,appreciate you lot Chris. Awesome... pls do more typescript MERN real world enterprise level pro projects
Will do, plenty more coming up - let me know if you hit any issues. Thanks for watching I appreciate the support!
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
Thanks Chris for this wonderful couse. Please bring more projects on MERN stack.
Lots of love from India 𓆩❤𓆪
thanks for the support it really means alot!
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)
I'm coming back dude to check on the e2e test. I hope this video gets to at least 1M before hitting 1year from upload date.
You nailed it Bro. Amazing
Thank you. Awesome structure and the best typescript. I love it. I spent 3 days to watch this tutorial. Maybe next time you can show us how to build fullstack web app related to Geospatial data and mapping such ArcGIS/Esri did. Excited to know it.. Thanks..
wow! nice work, 3 days is awesome!
Thanks for the suggestions! I'll keep that in mind!
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)
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.
Thanks! Time stamps are in the description under chapters
Great job Chris!
Thanks bro 👍
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.
nice way to welcome 2024 what a come back .
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.
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!
@@ChrisBlakely Brilliant thank you so much for the reply and clarification! I'm going back in :D
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.
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
finally completed
Successfully Completed This masterpiece in just 10 days💗💗
during this course have u encounterd any errors if yes pls drop here how do u solved it
@@hemanthpusarla4428 there was no error as such but there is some error which is not cleard in this video
after the end of video,when you will go to add hotels to add hotels and then go to my hotels page , hotel froms all the users are visible there instead of user that has created
it was due to two apis with same url and method , api were fetchallhotels andfetchmyhotels , they were conflicting with each other
so i move one api to another file and imported that in index.ts
in the backend portion
at 4:26:29 , u wonder why dist folder doesnt appear it is beaucse u have to install npm install && npx tsc
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
finally completed this awasome tutorial.
when the next project come?
Awesome! That’s great news and congrats on finishing it ! Working on the next one at the moment , MERN food ordering website (like justeat) . I’ll post updates on TH-cam when I have them
@@ChrisBlakely Hi Chris! Thanks for the great work released to us free. I very much await the Food ordering and delivery app. God bless your effort.
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)
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.
Great project no doubt,
Small suggestion i would like to give
i) add demo video
( along with whole explanation)
ii) add some chatgtp stuff in it
( like automatic planners base on user requirements)
Great suggestions, thank you !
Thank you so much for this insightful tutorial, Chris Blakely! I have a question about the structure of the code. I noticed that you placed the business logic in routes and models files instead of separating it into controllers. I'm curious about the rationale behind this choice. Could you explain the reasoning behind structuring the code in this way? Looking forward to your response!
Hello! The reason I didn't use a controller layer is because IMO the app wasn't large enough for it, and adding an extra layer might make it confusing for some people trying to follow along. If the app had more routes, business logic or people working on it then I'd move over the using controllers/services. Hope that answers your question! If you're familiar with using controllers then by all means feel free, the outcome will be the same !
Thank you for the clarification! I appreciate your consideration in keeping the tutorial straightforward for learners. It makes sense that for a smaller app, simplifying the structure can be more beginner-friendly. Looking forward to more content from you!@@ChrisBlakely
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)
@@mdsaquib5660 do you have any idea how he didn't include the views folders neither the controllers and it is called mvc ?i want to know the architecture of the whole project
Nice and important tutorial ❤❤
Appreciate your efforts and Merry Christmas 🎄
Thanks! Merry Christmas to you too!
love the vi wallpaper! and of course the tutorial 🤗
Haha thanks!
Chris we want more projects like this for Spotify Amazon like website for enterprise level deploy
Thanks so much🎉
thank for this practical and production ready code
GOATED project, love overall the project architecture.✨✨, but chris text-md is not a tailwind class, i hope you were thinking about text-base😁
haha TIL! my bad, thanks for pointing it out!
2:17:05 App-context and Toast-Notifications
4:27:00 Npm Run Build
love it men keep doing !