Building a Modern Restaurant Booking Software: Date and Time Picker! (Part 1)
Вставка
- Опубліковано 3 жов 2024
- Let's build a full-stack modern restaurant booking software in NextJS, Typescript, and React, also using Tailwind for styling. I recently tried booking at a restaurant and noticed their booking system was horrible. So let's make it modern, full-stack & with a better UI! In this video, we'll start by building out the date and time picker using react-calendar, a super useful utility npm package for this use-case.
⭐ This project on GitHub: github.com/jos...
⭐ Part 2 of this series: • Building a Modern Rest...
⭐ The modern full-stack booking software playlist: • Modern Fullstack Booki...
⭐ Our startup: wordful.ai
Thanks for watching and let's build a really cool booking software together!
I guess restaurant booking system is maybe one of the first software I created. It’s like a classic because it makes you work on many topics ! Thanks for this serie
This is it, from DB to security, lots of variety. Cheers man
Do u have vedio for restaurant booking systems?
Great video as always Josh, been a FE dev for 2 years and your videos are perfect for learning the new t3stack that has all the new upcoming standards in the industry 🙂
Cheers man
loving it so far, hoping to see more of this
happy to hear that
the first video of this serie is a perfect, hard for me but you teach quite well! 😆
Thank you for the great videos that you create. I have learn much from them. I learn more from your videos when you do make mistakes and correct them accordingly because some people do the very same things that you are doing. I appreciate your time.
Thank you so much I can't explain how much you helped me Josh
Great video Josh, you are a very clever man indeed. Can’t wait for part 2! I would prefer error free short videos like these. Saying that maybe you should also do some longer form live code alongs.
Thanks for all the hard work you put into your bite size videos, they have helped me a lot
Thank you man, appreciate the feedback
Man, you're a hidden gem. Keep up the good work. You've inspired me with your recent video (Digital Marketplace) and this one to upload some ambitious project videos myself. I'll do this too some day because my projects are usually of the similar kind but related to specific niches.
Happy new year Josh, thanks for consistently helping me learn
Proud to be teaching Einstein new things. Cheers man, happy new year
don't stop this series please
Hey cool vid man! I like your approach for making this. The only thing that was missing was a demo in the beginning. Otherwise good stuff, keep it up!
Thank you Josh for these videos!
thx josh i will watch this playlist for my research
Bro your videos are awesome! Keep up the good work!
Thanks man
Great stuff here. Appreciate it very much.
I would love to see the full video, including errors. Everyone's approach to problem solving is different. I think it would be great to learn from.
i'm definitely down for the errors... no point in learning to code when you don't know how to fix the bugs. but ty for everything bro, learning a lot from you. thanks!
hey ! thanks for this tutorial ! pretty good !!!!!
Just warning, with new nextjs, we need to add a dynamic import index.tsx
import dynamic from "next/dynamic";
const CalendarPage = dynamic(() => import("~/components/Calendar/Calendar"), { ssr: false })
Hey bro, why do we add dynamic? prevent the caching calendar ?
great video josh!
Very helpful ❤
Great, better way to start a year buddy.
Includes mongodb as a database, and include jwt authentication ; if all the videos are not planned out already.
But more importantly, Good work buddy ❤
Hi, thank you for the tutorial! Can you share the CSS styles?
for sure, here you go: pastebin.com/xmQELC3m I've commented the area that's responsible for only showing weekdays
@@joshtriedcoding Thank you!
You can create another channel where you post the full and uncut coding and debugging process, and have this channel for shorter videos like this. While i work i often listen to code along videos in the background
Amazing tutorial!
Hello, thank you for the video, this is lovely, I was wondering if there is a JavaScript version of it as I do not know typescript. Thank you
Great video! I think it's better if you do them without showing errors. At least for a video series like this. It's the difference between a 5 part series being around maybe less than 2hs long vs maybe more than 5hs long.
Btw, I'm getting some errors because my default browser language is Spanish. It tells me "Text content does not match server-rendered HTML." , "Hydration failed because the initial UI does not match what was rendered on the server." and "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering." I get the gist of what's happening (the calendar is being rendered in English in the server, but once it reaches the client my language preferences take over and Next doesn't like it) but I'm pretty new to Next and have no clue how to fix it. It goes away if I switch the language to English but yeah, just letting you know in case you know how to actually fix it.
Hi, I had the same error. I fixed this by forcing a Calendar locale. You can do that by passing an additional prop to imported ReactCalendar, e.g. locale={"en-GB"}
@Josh tried Coding I think with error does show the problem solving you have to go through, but additionally if you do go through this method, please put time stamps to skip errors for example.
Hey Josh, what extension do you use to build the FC skeleton?
Bro thanks for your work, I was planning to make the same one but for a gaming lounge, Do you think mern stack can offer better performance and security or t3 stack? If T3 stack, then I'll use your video
There's gonna be a very in-depth video of how I might just handle auth for this using JWT on thursday. Specially for this project, I think t3 will work very well, partly because protecting the tRPC routes will be convenient
@@joshtriedcoding Thank you
Hey Josh! What extension did you use to create the functional component boilerplate? I typed "FC" and selected function statement but it is showing like this ==> function name(params:type) {
} What should I do?
One thing... please show a demo of the completed website. Otherwise there's no way to know if this is something I'm looking for.
what snippet are you using at 4:20?
Bro nice work keep up!
github repo?
Hi Josh, Very interesting videos and thks to share your knowledge with everybody !
I'm from France and I've a little problem with the server re-render and next makes me an error about date :
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "April 2023" Client: "avril 2023".
Do you (or anybody ;) ) have some suggestion how to fix this problem ?
Tx in advance for help
After 3 days trying to fix this error I just understand how to do it, for persons like me (with another native language) in ReactCalendar you need to add locale="YOUR_LANGUAGE".
For me it's
I hope it will help !
@@marvikfr Thanks! I had the same error and I didnt know what to do. In my case is locale="sp"
Woahhhh❤
Live would be great of course to learn your thought patterns, but not everyone likes to be "picked on" if you know what I mean. Whenever I teach live I have to have created the project beforehand so that the live doesn't get awkward 😅 I did a presentation on TV once where the audience of the TV was 30+ million people 🥵🥵🥵 and there was an awkward 15-minute moment (never again😅😅!!!).
what software do you need to download prior to starting this project
Hey, great video, I got a question
Why are we using FC for our Components?
Will it be better just to create an interface, like for example:
interface CalendarProps {
something: string
}
export const Calendar = ({something}: CalendarProps) => {}
Is there a difference in approaches?
Thanks!
This approach is totally fine, they even talked about deprecating FC at some point. Cheers
@@joshtriedcoding Thanks
drunk co pilot 🥰
i have subscribed...
I don't have trpc showing in my utilities. It reverts to the API inside my utilities. Any suggestions?
It's the same thing, they just renamed it a couple days ago. Now api = trpc
@Josh tried coding Thank you for the follow-up. You're making some great stuff.
@@soltiscd Appreciate it
Does this use a database?
Yeah.. T3 is the right way
Not working make not show time slot your cycle not generate time slot
do you think AI will replace developers in the future
Never
Without the errors, please do not waste my time, we only get 100 years on the planet, and lots far less!