Try Clerk: https://go.clerk.com/dx6FNrG
Try Neon: https://fyi.neon.tech/wds1

In this video I will show you how to create a Calendly clone complete with Google Calendar integration. This project uses Next.js, TypeScript, Drizzle, Neon, Clerk, and ShadCN.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/calendly-clone
Try Clerk: https://go.clerk.com/dx6FNrG
Try Neon: https://fyi.neon.tech/wds1


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Demo
00:02:38 - Next.js/Shadcn Setup
00:09:47 - Clerk Auth Setup
00:21:05 - Database Setup
00:36:50 - Events Page
00:49:20 - Event Form
01:06:50 - Event Grid
01:19:27 - Event Edit Forms
01:26:01 - Event Delete Button
01:33:23 - Schedule Form
02:09:10 - Booking Page
02:16:35 - Google Calendar Integration
02:49:40 - Booking Form


#NextJS #WDS #SaaS

Web Dev Simplified

Learn how to build a modern full-stack application using Next.js, TypeScript, Drizzle, ShadCN, and Tailwind CSS. The tutorial covers setting up a clone of Calendly that integrates with Google Calendar, allowing users to schedule events based on availability. The steps include user authentication using Clerk, database setup with Postgres and Neon, and utilizing Tailwind CSS for styling.

Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind