‼I'm working on the next UA-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?
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 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
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.
You're welcome! My latest video here on UA-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
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).
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!
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 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 UA-camr & you are the one. Good Luck in your Life.
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
@@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 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
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
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 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
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
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.
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)
"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!
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 ! 😀
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!
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 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
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.
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!
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...
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
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.
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
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.
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)
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...
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...
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
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
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
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.❤
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😅😅
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
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
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
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
**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"
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!
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
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
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
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 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.
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
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]
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)
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.
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
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)
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 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
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.
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.
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 🤦
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)
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
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
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 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!
@@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
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.
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)
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..
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)
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 UA-cam when I have them
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 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
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
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 !
@@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.
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).
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!
Great video! I am at 1 & half an hour. Loving it!! 1:18:50 But why did you created another auth file? I did not understand this logic. The user will input the data at client and the server will receive it so there is an interaction right?
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
‼I'm working on the next UA-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?
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 UA-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
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 ❤
@@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.
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?
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 UA-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?
5 hours into the course. This tutorial is Gold content on UA-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
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
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
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
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
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?
"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 🙌
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, 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?
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?
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 !
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
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?
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?
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?
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?
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
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
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
Amazing project Chris 🙌
I have completed it and got to learn a lot. Your explanations are just perfect.
Thank you.
It's a great course. Let the continuation come❤
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.
Hi Chris, thank you for your encouragement. I read some of your articles and decided to say hi.
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
❤❤❤❤ 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)
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?
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?
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
I'm just a Django Developer who wants to explore MERN stack 😊. Hope this will help
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
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
Chris you are amazing.
This tutorial is so enriching and high level.
After completing this tutorial I ready for any full stack position.
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?
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.❤
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
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
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?
Dude! My respect to you for this great realistic tutorial!
Hey thanks for watching !
@@ChrisBlakely Sure dude! This is really gold!
He knows we are stuck in tutorial hell
So did he pulled us out?
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
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?
**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"
Thank you @chrisBlakely for providing such industry standard course for free .
at 4:26:29 , u wonder why dist folder doesnt appear it is beaucse u have to install npm install && npx tsc
Thank you very much for your hard work.
I enjoyed it so much.
May God bless you abundantly.
Thanks for watching, much appreciated !
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
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
I got selected as developer with Your project thanks sir🎉👍🏻
Really ? Share your resume
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
thank you for the course i have just finished it
Will you help me run this on my pc
@@meetrawal7615 ???
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
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)
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.
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 ?
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 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
Going to start it soon! The comments hold it in very high regard i see
Great job Chris!
Thanks bro 👍
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
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
finally completed
cant export type registerFormData , showing error , "Modifier can't be use here (2:01:00) Help pls
nice way to welcome 2024 what a come back .
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.
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.
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 🤦
תודה מישראל!
Thank you for the super thanks ! 🙏
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 !
What a Master Piece ... thanks a lot bro🎉
Thank you too!
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
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 😂)
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
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.
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
You nailed it Bro. Amazing
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
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!
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
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.
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)
thanks , saved my day
still i am facing the same issue, could you please help
@@MukundaHandage try replacing the validateToken with validate-token.
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)
AMAZING AMAZING AMAZING COURSE even PAID COURSES are not LIKE that
Awesome video.
Just please put the timestamps back!!!!
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 UA-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)
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.
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
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
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 !
@@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.
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).
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!
@@ChrisBlakely same brother
Great video! I am at 1 & half an hour. Loving it!!
1:18:50 But why did you created another auth file? I did not understand this logic. The user will input the data at client and the server will receive it so there is an interaction right?
Absolutely damn good bro keep it up we all are with you and love you ❤❤
at 21:10 how is it you have (main) at the end of your prompt?
2:17:05 App-context and Toast-Notifications
4:27:00 Npm Run Build
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
thank for this practical and production ready code
Use railway if you don't have credit card
checkpoint : 4:40:37
At 4:26:20, the code is npm run build