The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more
Vložit
- čas přidán 6. 06. 2024
- This is a modern full-stack tutorial for anyone that wants to learn how to make a modern react SPA that works seamlessly with a bun & hono server. It's using all my favorite libraries and frameworks this setup will only get better as more upgrades come in the future.
Features:
✅ Complete expense tracker app built from scratch using react 18/19, bun, and hono
✅ 100% backend and frontend TypeScript with validation using Zod
✅ Hono Typescript RPC for type safe HTTP requests
✅ User auth managed by Kinde Auth
✅ Tanstack Router, Query, and Form for the best UX and DX in an SPA
✅ Drizzle ORM for all interactions with a SQL Database
✅ Hosted on fly.io VPS
✅ Clean, modern UI using tailwind & shadcn-ui
Code, links, and other information: app.eraser.io/workspace/Esxbs...
Help support me make videos: ko-fi.com/meechward
Chapters:
0:00:00 - Intro
0:02:45 - Setup Bun and Hono
0:07:54 - Adding Routes
0:12:21 - Zod HTTP Validation
0:15:18 - Hono Zod Validator
0:16:52 - Dynamic Path Params
0:20:01 - Zod Improvements
0:21:35 - Setup React App with Vite
0:24:32 - Install Tailwind
0:25:35 - Why Tailwind?
0:29:12 - Shadcn
0:36:21 - HTTP Requests
0:38:29 - React Proxy
0:45:10 - Building the App
0:48:21 - Deploying the App (fly.io)
0:52:51 - Hono RPC
0:59:56 - Tanstack React Query
1:06:29 - Tanstack Router
1:16:12 - Get All Expenses
1:22:50 - Create New Expense
1:25:04 - Tanstack Form
1:35:01 - Kinde Auth
1:49:58 - Auth Middleware
1:53:38 - Authorized Routes
2:07:05 - Deploy Kinde
2:10:38 - Database
2:15:28 - Drizzle ORM
2:25:30 - Setup Neon
2:38:49 - Tanstack Form Zod
2:45:26 - Drizzle Zod
2:51:54 - Created At & Calendar
3:00:30 - UI Update
3:05:28 - Caching and Optimistic Update
3:28:20 - Delete Expense - Věda a technologie
As a seasoned back-end dev migrating to full-stack, the amount of useful, easily absorbable information packed in less than 4 hours is impressive.
As a former student of Sam, I want to express my gratitude. We weren't particularly close, but he was undoubtedly one of my favorite instructors at the institute. Sam was not only incredibly patient, always answering my questions no matter how basic, but he also did so with a warm, encouraging smile. He was funny, interesting, and refreshingly no-nonsense, all while remaining humble. The lesson that stuck with me the most from Sam was his philosophy on programming: write the least amount of code to accomplish the most. Watching his video brought back those valuable teachings and even taught me something new.
This is really fantastic - I started a hono project at work this week and this video has been such a good source of info for everything I've needed. Thanks!
Great video, especially your pace and the little breakout sessions with the diagrams - really helped solidify conceptually the mental model of local dev vs prod and client vs server.
Thank you for explaining a bunch of tools in one short, crisp video! 🙏
You're welcome. It's the tech I like using
@@SamMeechWard and now I also love this tech, ready to pick for my next personal project
Can't thank you enough for this Sam. It's like a goldmine of information backend into a very digestable, well edited video. Great job!
build the whole project , took full 3 days to implement & understand concept.
Feedback:
1. The part where you show the highlighted diagram to show what we are implementing next is great.
2. Way of teaching is very concise and to the point, which is good thing.
3. I think actual length of the video would be around 7hr, there are too many small cuts in between video which are easily detectable and pace of the video was too high for me so had to watch at 0.75x
That's good feedback for me. Thank you
SMW did a 8hrs long recording for us in 3hrs cut, its an immense work even for editing this much must have taken so many hours. I'm thankful that he did share a great tutorial here.
Wow, this tutorial is really awesome! The production quality is top-notch! Thanks for all the efforts in making this.
You're welcome. Thanks for watching
Very nice!
Recently got into front end and ui coming from back end. These videos help a lot
It's finally here!!! Thank you Sam. This one tute I've been really looking forward to. 👨💻
It's been a few months in the making, I hope you like it 🤗
@@SamMeechWard am actually starting a side project with this stack + cloudflare workers
Thanks a bunch Sam. I never understood this proxy thing in the frontend but now I do.
wow, one of the most complete videos, thank you, I was expecting something like this
Fantastic tutorial mate. Picked up a bunch of little tips.
Looking forward to more videos!
Just finished the tutorial, don't have a idea about tanstack is as awesome as it is.. Thanks Sam for the gem
This is such a great tutorial. I'm learning frontend framework, right now vue but have plans with react. Me coming from WordPress Development, this is a treat. Thanks
Glad it was helpful 🤗
I just learnt a whole new project structure and execution. Thank you a lot
this type of video is only one in youtube
amazing thanks for such a unique content
Amazing!!! Thank you so much for this fantastic tutorial, Sam!
🤗
I do actually enjoy watching you demonstrate something more than almost every other CZcamsr.
I love hearing that 🤗
The best and efficient stack. Great work Sam 🎉
Thank you 🎉
This is a very helpful tutorial for learning new tech stacks. Thank you so much!
Awesome! Happy to hear it was useful for you!
This really is a fantastic video. Very clear explanations and a great stack.
Thank you
been waiting for this ever since you put a thread on the threads app. Finally it's time.
It took a while to make, i'm glad it's finally out. I hope you enjoy it
Completed the whole video. Thanks Sam
Thank you! Anything I can do better next time I make a tutorial like this?
Man, thank you so much for this video. So good.
Glad you enjoyed it 🤗
I've been waited and finally he upload it, thanks bro, Its Amazing🔥🔥
Thank you. glad you're enjoying it
sam you dont know how good you are in explaining.
Great video Sam, you've covered many of my favorite stack! Also good editing.
I would have love to seen this as a monorepo (maybe just Bun workspaces?) but I think that's a homework for us.
I'll try to implement this with lucia-auth too.
Regards!
well explained 👏👏👏
appreciate all your efforts 🙌
Thank you, I appreciate the nice comment
great video, moving back to client rendering is a breath of fresh air
I come from a background of native mobile development. I love the feeling of building something more native, event if native means a browser
Great video!! Thank you Sam
@SamMeechWard why you didn't use invalidateQueries here? Are you totally avoiding refetching?
Your new subs, from Indonesia here! 🔥
Thank you Indonesia
Thank you for the awesome tutorial..❤
Thank you for the awesome comment..❤
Loved this. Fast paced and packed full of info. Just a request though and no expectations but I would love to see a tutorial on Bun/Hono web sockets. I can get the basics to work but the subscription/publish concept has me at my wits end haha
haven't watched the entire video, but I can already tell that stack is awesome. Personally I use NextJS, tRPC, Fastify, Chakra UI and Clerk. The productivity is amazing. Gonna try your stack on my next project
All that tech is good too. It’s about picking the right tool for the job. So learning more tools is never a bad thing.
Let me know what you think of this stack when you’ve built your next project
I like you man. This is the best for real developers. Colors, Text size, content, voice, knowlage, ___, ___ , ____ - all are perfect. Need more videos like SolidJS, Rust axum etc.
do you realise that he is not stoopid.
@@TheBlackManMythLegend why do you ask that type of question?
thank you 🤗. I'm not 100% sure what I'll make videos on next, but maybe some serverless things
thank you Sam ❤️
Doing just for the algorithm, Also saving to watch later.
I apreciate it
awesome video. Thanks!
awesome comment
Brilliant video, Thx
You're welcome 🤗
Awesome content, would be cool to see a video with this stack and a self hosted/managed auth system!
I would never build a self managed auth system ever again. It's a hard problem to get right, but it's already been solved by the auth services
@@SamMeechWard what about using an auth system that still keeps user data and functionality in your app, but manages it. Something like Lucia
I think that works for a lot of projects, but I like going fully into a service that will allow complete user and auth management. Two factor auth, login with cell numbers, user dashboard with analytics and ability to delete or suspend users, manage payment subscriptions, etc
Wow so clean. I'll be stealing that optimistic update method for sure 😅
It's super nice when something takes a while, like file upload, general slow internet connections, or llm responses. I hated SSR when I was trying to make a highly interactive app that worked with llm streaming. But this setup gives you complete control over the UX
@@SamMeechWard agreed. I messed up so many times managing caches from api routes vs server actions, router refresh, revalidate path etc 🙃
Amazing 🔥🔥
Thanks 🔥
Waiting for this. ❤
Let me know how it goes when you get to the end
I really like the Canva at the beginning 👌
Thank you, It's eraser.io
@@SamMeechWard yeh i know! I mainly liked the content you made with it. It was really nice to understand the architecture. It is much easier to follow with diagrams :)
Thank you so much for this awesome video. Please create a project with this stack to develop an ecommerce site backend.
Thank you. I'm probably not going to do a super long tutorial again for a while, but I like the ecommerce idea. What kind of features are you looking to learn?
@@SamMeechWard
1. User Authentication: Secure login/logout functionality.
2. Product Management: CRUD operations for products.
3. Order Management: Handling orders and status updates.
4. Inventory Management: Tracking product stock.
5. Shopping Cart and Checkout: Adding/removing items, processing payments.
6. Customer Management: Managing customer accounts and order history.
7. Content Management: Editing static and dynamic content.
8. Integration: Connecting with payment gateways and shipping services.
Great style of teaching particularly with using the whiteboard to explain certain bits before diving into coding.
One note/comment, I found your video panel to be a bit big/in the way.
return of the king
How kind of kinde to sponser the video & making auth so much easier. Thanks for the awesome video :)
51:23 My assumption, when you deployed this app on flyio for the first time, flyio, under the hood, setup DNS for the domain of this app. DNS usually takes some time(Standard time is around 48 hours but mostly it takes around 10-15 mins). And, when DNS is setup app started running.
Hey the hono api you built, is it a separate backend that can be used by a mobile app as well?
Hi, Greate Video can i serve my nextjs build on hono and use as static files , so that when i deploy my nextjs and Hono, i use as a single app?
I love this so much
🤗
@@SamMeechWard Took me 2 weeks of steady progress, but I followed along with your steps and made an app with slightly different deps (pnpm, express, trpc, prisma, supabase). It feels so amazing to have a stack that I put together myself with intentionality instead of just plopping out another create-next-app, and I'm so excited to build on this foundation. Thank you thank you, this was fantastic!
Please could you explain why you chose not to use the queryClient.invalidate([queryKey]) function but manually spreading existing expenses during then futuristic update?
is it also possible to do SSR? like in next.js? so before the page is being rendered you do some server side stuff (fetching..) and then pass result as prop (getServerSideProps)? if yes, can you pls explain how to do that?
Drizzle doesn’t have a selectOne, but you can do this:
const [ user ] = await db.select().from(userTable) ...
user will either be a user object or undefined.
Bun + Hono = Blazingly fast apps
What filestorage you can recommend for this tech stack?
as a beginger the spped is something challenging for me to catch up
Great video, but it would've been much better if you could provide some help with configuring NeonDB, Drizzle, and the zod-form validator. There seem to have been some updates in those libraries, and I am facing some issues with configuring those in my app.
Can you please help me with that Sam?
dude where you been? You gotta be more active, for the dev family. We need you Sam
I made a few shorts, got distracted by my day job, spent some time with the kids
I'm going to try and do less at my day job and start making more content though. Let me know what you end up thinking of the entire video
Do you use react server components with this stack?
Hi Sam Amazinng video. Truly special.
I was just wondering, is there any way, how to deploy this to serverless env. Like vercel or netlify?
If so, it would a great video on how to set it pu
Thank for response.
Thank you. This was setup to be completely server full and that's how I usually start a project when there's lots of unknowns. You could transition this to serverless, but you probably wouldn't use bun anymore, just node on lambda or cloudflare workers or llrt or whatever. The great thing is that the hono code can pretty much stay the same on all of these, but you would need to change the structure a bit to work on serverless
I probably won't make any big video on that kind of stuff anytime soon, unless there's lot of demand for it. However, if you try getting started with sst.dev, you'll be on the right path
What copilot plugin do you use?
Great video , i will watch it in 4 or 5 parts , but remember don't use number input, its the worst
There is an article in stackoverflow blog about it
Use text input with inputMode numeric and format="[0-9]"
Are you preferring tanstack router over react router?
Great video, thanks a lot!
But i have a question, is monorepo a good choice for this tech stack?
I have started using a monorepo setup for this and I like it. I think it's more of a personal/team preference thing
Larger apps usually benefit from more organizational structure, and a mono repo is one plan for that
@@SamMeechWard stuck in this place, can you share an example repo, thanks a lot ❤
github.com/meech-ward/Bun-Hono-React-Expense-Tracker
Is it better to do client side or server-side navigation after logins and logouts?
I let it be a complete page refresh, server-side navigation, since we're deferring to a third party for all this anyway. You can integrate it more into the frontend though if you need
What is the reason you went with Vite and Vanilla React vs Nextjs? Any concern with SEO?
I can make a better UX using this stack. Next.js is more constrained. I explain it more here twitter.com/Meech_Ward/status/1786062671206551862
But in the end, you should build the app for the end users, not for the SEO bots. Also, you can achieve the same levels of SEO that next allows by serving a different set of things to the bots. You can do this manually or use something like prerender
😊 MAY 2024 UPDATE: Wrapping your inside of is no longer necessary! :)
I really liked this project, do you plan to do more full stack projects like this with deployments? or integrate something with cloudflare? Greetings and thank you!
Thank you. It really depends on what the demand is. I want to reach as many people as possible. I might do something with cloudflare sometime this year since that's a lot of fun
@@SamMeechWard I understand, thank you very much for your response, I am advancing with the project as I watch the subtitles in my language to guide me, the good explanation on each topic is appreciated, a hug!
Hey sam i have been looking forward to the full version of the gpt vision ui chatbot, any updates yet?
Are you talking about the app I was building? or a video?
thank you Sam you are an amazing keep it up best wishes for you ....⭐❤
Thank you 😊
whats the benefit in bun.serve wehn we could just use hono to spin up a server? i might be wrong in understanding this but pls explain
Bun handles the HTTP requests (and websockets and tcp in general) and Hono is just a thin wrapper that gives us a much nicer interface and DX to work with these requests. That's why hono is so portable
Any particular reason to use react vite instead of next?
Client side rendered single page applications give you more control over the UX. I like next for my personal blog, but for interactive apps, I find it too hard to create the exact UX I want. But with CSR, I have complete control over
please make more stuff using hono
thanks for making this
anything in particular? lambda functions, cloudflare workers, deno apps?
@@SamMeechWard Cloudflare workers
@@SamMeechWard lambda functions, cloudflare workers
Do you have a video where you go over your vs code plugins?
🤗 not all of them, but check my shorts. I have a 10x dev video
is using vite server proxy actually good? or is it just to avoid CORS error?
proxy is really good if you're going to deploy your frontend and backend to the same origin in production. If you're deploying to different origins in production, proxy is a bad choice
LETS GO
🔥
I would watch any tutorial from you, I'm not a native speaker even though i speak 7 IRL languages yet i understood everything came out of your mouth, please do more of Bun cause you convinced me to switch to it from node, i want you to do fastify bun if it exists.
Thank you. It will probably be a while until I do another really long tutorial like this
bunx command for shadcn not working it is throwing this error "error: could not determine executable to run for package shadcn-ui"
when I use sessionManager with cookie management it doesn't work for me
How Can I cover SEO in this stack?
I am getting bunx shadcn-ui@latest init
error: Script not found "shadcn-ui@latest"
This error. Please help
I wonder why to serve website though hono rather than setting it on Vercel?
Depends on the app, but serverless is more restrictive so I prefer to start on a server when the requirements aren't clearly known. Which is always in the beginning of a project
why didnt you separate node modules folders? i.e putting the node modules into server file?
just went further into the video, seems you're doing more of a monolithic architecture for this app. any specific reason why you're going for monolithic?
fvkn legend
🤗
Hey sam, i wanted to know whats the best way to learn all these technologies. When i look at their docs, I feel overwhelmed and end up not doing anything becoz I dont know where to start and how to use it.
Everyone is different, but here's a technique I use. Create a brand new empty project, like an empty react app, and install a single library. Go through the docs for just that single library and try to implement different features. Test assumptions, break things, start over if you need to but only focus on one library. Then do the same thing, start a brand new playground project for the next library. Once you've built up a better understanding of all the different parts, make a project that includes all of them.
I'm always making little playground projects just to test things out before I build big apps
@@SamMeechWard thank you, i will surely give it a try.
One more thing, where did u learn all these technologies. Do u watch videos or you use docs?
@@-CSE-BurhaanWaniI read the docs, look at examples, check GitHub issues and discussions, and join their discord servers
The only thing I would do differently is use GraphQL (possibly Garph or Tada) instead of RPC, but I think reasonable minds might differ.
Amazing 🤩
Can you please let me know your Google chrome theme?
night owl
@@SamMeechWard I think that’s the VSCode theme. I wanted to know about the Browser Blank Page theme :)
@@shettayyyygot it. That’s just the brave browser default background
This proves Im not crazy for typing space at start or after i backspace TO MAKE SURE tailwind gives me the autocomplete. 😂
There might be another way, but this is the easiest way I know 🤗
I wonder why haven't you used RSC?
Please the link for the drawing site
app.eraser.io/workspace/EsxbsS4v2g7Otkihy95b
In the cloud heaven single threaded nodejs can't be beaten hence JS won't stop 😛
JS on everything
51:42 "I don't know what happened, but out of know where its currently working" 😅
50:30 I think the DNS hasn't propagated yet , that's why it failed. It will work once DNS has propagated, it take some time.
1:42:52 - it would be nice to provide that code
Why Hono, not Elysia?
Can u tell me your VS code theme
night owl
what software did you use to create the diagram in the very beginning of the video?
eraser.io