Build an Invoice App with Next.js 15

🛠️ Add More Features

00:00:00 - Intro
00:04:20 - Creating a Dashboard with Tailwind and shadcn/ui
00:25:00 - Adding a new Create Invoice Form
00:34:15 - Installing & Configuring Xata & Drizzle ORM
00:42:28 - Creating Table Schemas for Invoice Data
00:49:07 - Generating & Running Migrations with Drizzle Kit
00:55:26 - Adding new Invoices with Server Actions
01:20:11 - List Invoices in a DataTable
01:28:19 - Dynamic Page Routes for Invoices
01:38:24 - Catching & Handling Errors
01:43:11 - Adding Social Login with Clerk
01:47:18 - Protecting Routes with Clerk Middleware
01:52:04 - Creating a Page Layout with Site Header & Footer
02:03:46 - Building Login & Signup Pages
02:07:46 - Custom Login Page with Clerk Elements
02:13:51 - Configuring MFA (Multi-Factor Authentication)
02:21:07 - Setting Up Passwordless Auth with Passkeys
02:24:33 - Securing Server Actions with Clerk
02:27:44 - Add New User ID Column to Invoices
02:31:02 - Restricting Invoice Access by User
02:35:21 - Update Invoice Status
02:54:10 - Optimistic UI Updates in React 19
03:03:27 - Deleting Invoices
03:08:15 - Add Confirmation Modal for Deletion
03:15:29 - Creating Table Relationships for Customer Details
03:22:11 - Joining Multiple Tables for Customer Data
03:26:40 - Creating & Managing Organizations
03:31:39 - Add New Organization ID Column to Invoices
03:34:40 - Restricting Access by Organization
03:41:02 - Install & Configure Stripe
03:43:58 - Adding a Public Payment Page
03:56:29 - Creating Payment Sessions with Stripe Checkout
04:04:36 - Payment State with URL Parameters & Stripe Sessions
04:17:02 - Creating Email Templates with React
04:25:30 - Sending Transactional Emails with Resend
04:33:51 - Outro

#colbyfayock #nextjs #nextjs15 #reactjs #programming #webdevelopment #clerk #xata

[punitmistry]

Hey Everyone if you are using the next 15 the latest one and if you are getting the error while installing the shadcn so just paste this command and it will work !!

command : npm config set legacy-peer-deps true

[LaxMariappan]

Thanks Colby, Xata and Clerk for making it a community resource. I do enjoy your newsletters and content, thanks Colby🚀

[DragosPopescu-nn]

Awesome work, Colby! Skipping through it for now, and it seems incredibly well made. Thank you for the time and effort to make this. I'm really excited to watch it in full

[alexgeorge]

The way of explaining things are so clean. Much appreciate it.

[JianhuaX]

For whatever reason why the YT algorithm got this video in front of me, I am thankful and immediately subscribed to you and liked the video. I am an Angular dev but I truly enjoy your way of teaching. It makes me think why I haven't picked up React, yet. Bravo Colby! I look forward to picking up more experience tips from you.

[John-eqcd]

What an interesting approach to use a <form> and action to change the status of the invoice. Also, that was some crazy typescript for the statuses, I will have to go through it slowly.
Going back to managing the change in status in the server component, I coded a small client side component specifically for the drop down menu which allowed me to use onClick. Then I imported it into the invoice details page. It seemed to work ok.

[erik-lnt]

Hey Colby, I have to say this is one of the best tutorials I have ever watched! I was searching for something like this for like 4 weeks now (something that includes clerk, drizzle and stripe) and this is just perfect. Thank you for putting valuable information like this out for free. You truly have an amazing way to teach and explain, keep up the good work!

[chrschoeni]

Hi Coby,

I just wanted to say thank you for your fantastic video where you showed how to create a learning platform using Next.js, Clerk, and Stripe. Your approach and explanations were incredibly helpful and gave me valuable insights.

It’s truly inspiring how clearly and structured you explain complex topics. Thanks to you, I was able to implement some ideas in my own projects.

Keep up the great work—your content is truly valuable!

Best regards,
Christoph

[melik]

Unlike other tutorials he is showing what impact his code is making. He also shows the best approach and practices which is very important for scalability. Hope i had tutorials like these when i was a beginner.

[skverskk]

Definitrly, one of the better you tube channels for nextjs. Easy to follow and well explained

[Code-szdb]

I look forward for this kind of format! I'm really glad to see a real project-based video!

[rasikjain]

Hi Colby, YT has recommended this channel. Very informative and detailed oriented for a person to follow along. This is helpful for anyone newbies who are interested in learning concepts of css, react, typescript, sql, apis, deployment etc. I like the way you do use the multi-cursor for the editing. A video on VS extensions you use and especially multicursor video will be helpful.

[AnthonyObi-wrro]

Youtube Algo just brought this to me and I am really enjoying. Have gone through your channel and saw amazing content. Glad to meet you. You just earned a subscriber

[ONESTTEFTEO]

I am a backend developer and new to Next.js. This tutorial has inspired me to start learning Next.js

[Website_TV_]

Next.js 15 is here, and it’s a game-changer! Learn how to build a fully-functional Invoice App step-by-step in this video. Whether you’re a beginner or an experienced developer, you’ll pick up valuable tips and tricks. 💻💡

👉 Time to level up your coding skills!

If you want to master Next.js and create powerful apps like this, make sure to stick around till the end! 👍 Don't forget to like, subscribe, and share with fellow developers!

⏱ Timestamps: 0:00 Introduction & App Overview
2:30 Setting up Next.js 15
8:45 Building Invoice UI Components
15:20 Handling Data & State Management
22:50 Adding Custom Features
28:35 Deploying the Invoice App

[tedb]

This is just amazing!!! I missed you on egghead, and suddenly the youtube algo gods suggested you. So excited to work through this, can't wait!! Great stuff @colby!🔥

[StanislausKatczinsky]

Subsriber earned. Just the intro is enough to show that you will learn something from this and not just mindlessly type what you see in the video. Keep it up. Will check your other videos.

[mahmoudtokura]

I learned a lot from this. No time wasted, straight-up valuable information. Thanks Subbed

[VincentFulco]

Thanks Colby! I've been holding off on building with 15 due to all the canary changes. I appreciate this road map to the future!

[adnanamin]

Man! I love you!! I've been wondering when you were going to share the full project. Thank you! 🙏🙏