Build and Deploy A Full-Stack Calendly Clone using Next.js 15, TypeScript, React 19, Tailwind CSS V4

Build and Deploy a modern, full-stack Calendly clone with Google Calendar integration—manage timezones, events, and meeting links like a pro using Next.js 15, Typescript, React 19, Tailwind CSS v4, Neon, Drizzle, Clerk and much more. { Calendra App } --------------------------------------------------------------------------------------------------- 🚀 Build and Deploy a Full-Stack Scheduling App Like Calendly Tired of the timezone mix-ups, back-and-forth scheduling emails, and calendar confusion? Wish you could build something as sleek and useful as Calendly—with your own hands? You're in the right place. Welcome to “Build and Deploy a Calendly Clone”, a hands-on, real-world course where you'll learn how to build Calendra—a full-featured, full-stack scheduling app that lets users create events, set availability, and share booking links with the world. Oh, and it even syncs with Google Calendar to make sure meetings actually land where they should. Whether you're a junior dev looking to level up your full-stack skills, or a mid-level engineer wanting to build something polished and practical, this course is designed to walk you through every step of building a professional-grade SaaS-style product from scratch. 💻 What You’ll Build By the end of this course, you'll have a fully deployed version of Calendra, a real-world scheduling app that can: Authenticate users Let users create and customize events Let others book time with them based on their availability Automatically create calendar events in Google Calendar Prevent double-bookings and timezone confusion And it will look professional, fast, and modern—ready to show off in your portfolio or even use in production. 🧰 Tech Stack We’re using the latest tools and libraries to build something that feels modern and performant: Next.js 15 – App Router, Server Actions, Edge-ready by default React 19 – For building rich, interactive UI TypeScript – For type-safe, maintainable code Tailwind CSS v4 – For styling that’s fast, flexible, and easy to customize shadcn/ui – For beautifully designed, accessible components Neon – A modern Postgres database with branching and serverless support Drizzle ORM – Type-safe database queries, schema-first and easy to use Google Calendar API – For real calendar sync and reminders Clerk – Modern authentication with email, OAuth, and more 🎯 Who This Course Is For This course is for: Frontend developers ready to dive into full-stack projects Backend-curious engineers looking to explore modern UI and tooling Junior to mid-level devs building portfolio projects that stand out Anyone who wants to build a real SaaS-style app from scratch You should have some experience with React and JavaScript/TypeScript. You don’t need to be a backend expert—I'll guide you through it step by step. 🌍 By the End of This Course… You’ll have: ✅ A deployed, fully functional scheduling app ✅ Real-world experience working with APIs, databases, and full-stack logic ✅ A polished project that demonstrates your skills to employers or clients ✅ The confidence to build and ship your own full-stack applications 🧑‍🏫 Meet Your Instructor Hi! I'm Noor, a software engineer and creator of Programming Fluency. I've helped thousands of developers learn how to build real, production-ready apps with clean architecture and modern tools. My goal is to make sure you not only understand what you're building, but that you can confidently build similar projects on your own after the course. ------------------------------------------------------------------------------------------------------- Give this video a Like 👍👍 and Subscribe to the channel. 📦 Tools I Recommend (Even If Not Used in This Video):👇👇 🧠 PrismaPostgres → https://www.prisma.io/?via=programmin... Materials and References:👇 GitHub Repository (give it a star ⭐) https://github.com/Programming-Fluenc... 💻 Join our Discord Community:   / discord   🤝 Business Inquiries: noor.h.fakhry@gmail.com Course Sections: 👇 00:00:00 - Intro 00:03:28 - A First look at Calendra 00:18:05 - Project Setup 00:24:35 - Authentication 00:35:53 - Landing Page 00:42:50 - Database Setup 01:01:54 - Navigation Bars 01:19:10 - Events Page 01:22:17 - New Events Page 01:24:39 - Event Form 01:42:27 - onSubmit & Events Actions 02:05:33 - Back to Events Page 02:10:30 - Event Card 02:25:39 - Edit Events Page 02:33:42 - Favicon 02:35:19 - Schedule Feature 02:39:18 - Schedule Form 02:57:03 - Schedule onSubmit Function 03:07:04 - book route 03:11:33 - PublicProfile Component 03:19:16 - Google Calendar API 03:28:42 - Booking Events Page 03:31:44 - Get valid times from schedule 03:51:30 - Meeting Form & Actions 04:15:06 - Deployment 04:20:59 - Thank You ❤️