Build an Online Auction App with Notifications (Next.js, Shadcn, Typescript, Drizzle ORM)

Be sure to checkout the sponsor of this video knock.app/? if you want a great way to easily setup notifications directly into your applications.
Code: github.com/webdevcody/bid-buddy
Timestamps:
00:00:00 Overview
00:05:08 Next Setup
00:06:56 Docker + Postgres Setup
00:09:21 Drizzle ORM
00:11:32 env-nextjs
00:14:05 Schema file
00:16:16 Drizzle kit
00:20:27 Drizzle Studio
00:21:25 Insert Bid
00:29:05 ShadCN
00:34:21 Next Auth
00:36:57 Google OAuth Setup
00:47:31 Prefix Tables
00:50:01 Manual SQL DROP
00:56:57 Header
01:01:01 Page Cleanup
01:05:52 Create Auction Page
01:17:23 R2 Image Storage
01:26:43 R2 Cars Setting
01:39:19 Auction Card
01:41:47 My Auctions
01:45:55 Empty State
01:50:22 Auction Page
02:17:24 Placing Bids
02:33:17 Data Layer
02:36:21 Notifications
02:47:25 Send Notifications
03:06:38 Customize Notifications
03:13:14 End Date
03:25:14 Email Notifications
My Products
🏗️ WDC StarterKit: wdcstarterkit.com
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@facundomartin6993]

I don't usually leave comments but this tutorial was fantastic. I really appreciate the unedited version since I can see you debugging in real time and go over your thought process. Honestly, it's been super helpful. From manually dropping tables in SQL and troubleshooting Drizzle, to handling the file uploads PUT requests to the R2 bucket. I felt like I was pair programming with a senior eng. and it was awesome. Also, learned a bunch of new stuff.

[@ianfrye8988]

Project video from Cody on a Monday - week made 💪

[@Jay-ek7uw]

Currently following this by working on a different project idea. Loving this

[@ofeklevy1242]

AMAZING

[@mikoajurbanski9662]

awesome as always - love live coding format

[@WebDevCody]

Thanks man

[@amershboul9107]

your tutorials are always the best thanks buddy

[@lucascampos8977]

your videos are gold my friend! Thank you 🚀

[@gold-junge91]

Crazy dude that you sharing this!! ❤

[@Robloxgod4]

Just switched to drizzle over prisma too. It’s so much better with the SQL like functions

[@PatiphanPhengpao]

You are my idol cody, amazing content 💖

[@SeibertSwirl]

I love it babe!!!! Good job!!!❤

[@ricorico222]

he is amazing giving free content that we should pay for

[@WebDevCody]

thanks sexy

[@SeibertSwirl]

@@ricorico222 he is ❤️❤️

[@Tanner-cz4bd]

Looking forward to this 😀 👌

[@NikolaFilipovski94]

Everything looks so easy when watching him doing stuff 😅

[@anixsharma7237]

like someone said: damnn sonn didn't expect this gold content! i was like .. cody is busy with his SaaS project. anyways, thanks for this $100 course.

[@smartdriver2990]

I like the tutorial. Thanks🎉

[@ManoharMaharshi]

you are the best & beast cody 🎉

[@404-not-found-service]

thanks for the video

[@randomforest_dev]

Awesome!

[@ardianhotii]

Very nice video,

[@pawixu]

Great video! The reason why the database auto import doesn't work is the global database variable. I always change the exported database variable name to be different than the global one, so importing it works correctly.

[@nguyenvanhiep6006]

Very clear and useful. But how do you run your migration? I got an error with node: packages when importing them from drizzle?

[@cafecafeo]

Now this is the content I’m subscribed to this channel for

[@amershboul9107]

BTW, what is the tool name that you're using while highlighting things? the target icon i mean

[@StabilDEV]

🔥

[@ranadenish]

In the sponsor link, youtube is not considering link after "?", so utm marketing link is not working! You might want to use link shortner. Btw, thanks for the video.

[@WebDevCody]

Thanks for pointing that out.

[@TOONSSTATION]

Any project on react?

[@Yahya_Umar]

Can you please create just stock register app next. Js multiple roles admin and user

[@brownboyintokyo7368]

Have you used Knock for any production level notification needs? The prices look pretty insane after the first 10,000 notifications... do u have any alternative library u recommend for notifications ?

[@MrArod1207]

Great video! Can you drop another convex tutorial por favor? Thanks

[@WebDevCody]

Yes one coming this month

[@Aman_yadav1419]

I have a project idea.. But not having proper knowledge and confidence of building project... Can I share you my idea so that you can create project with some improvements and more features

[@Wundero]

You should censor your cloudflare access info, dont want someone to spam you with invalid put requests. The account id would be ideal to hide imo

[@WebDevCody]

I don't think cloudflare has that same issue that S3 has do they? From their FAQ R2 Docs "You are not charged for operations when the caller does not have permission to make the request (HTTP 401 Unauthorized response status code)."

[@Wundero]

@@WebDevCody That's good to hear - I'm still not a fan of sharing secrets (like the API key) or account ids, but at least it probably won't affect your other buckets and/or charge you money.

[@WebDevCody]

@@Wundero oh i always delete any keys I used when I publish a video, so those api keys shouldn’t be usable as well

[@REAZNx]

Are you storing files in R2 with the only key being the file name?? So if the same file name was uploaded its going to conflict?

[@WebDevCody]

Yes I’d recommend generating a uuid to store the file name instead

[@damjandjordjevic1994]

It actually happens in the video! 1:37:11

[@Gursheys]

You forgot the / in the knock url in the description

[@WebDevCody]

Thanks just fixed it

[@muhammadrasul1581]

could you do the bidding in WebSocket somehow? cause i find it faster than a http request doesn't it or i'm delusional?

[@WebDevCody]

That’s an option for sure

[@hendoitechnologies]

Can you use MERN Stack to create this and post video

[@WebDevCody]

I don’t use mongo

[@waeltarabishi6890]

how you we can deploy!??

[@WebDevCody]

Use supabase to get a free Postgres database, point vercel to your repo, setup your env variables, run your db push against your Postgres db to setup tables

[@waeltarabishi6890]

👍👍👍

[@gurvirbaraich]

How long it took you to make it? Was this the first try? Be honest.

[@WebDevCody]

I mean I typically just record myself live coding / building this from scratch then I go back and clip out the parts I messed up.

[@dhanarajccs]

Im the first

[@muhammaduseram9405]

Someone deployed?

[@gautampatoliya6872]

You should learn more UI and improve it