← All freeCodeCamp videos

Build a Calendly Clone – Full Stack Next.js, Typescript, React, Tailwind

51,223 views 1,499 likes 2025-06-24 4:19:51 Watch on YouTube ↗ freeCodeCamp ↗
FullstackFrontendNext.jsTypeScriptReactTailwind

Chapters (25)

Show the creator's full description
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. This course is brought to you by Noor Fakhry, founder of @Programming-Fluency Code: https://github.com/Programming-Fluency/Calendra-Course Noor's Discord Community: https://discord.com/invite/AgAKRtbXsp ❤️ Try interactive Full Stack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Fullstack (Made possible by a grant from our friends at Scrimba) Course Sections 0:00:00 - Intro 0:03:33 - A First look at Calendra 0:18:04 - Project Setup 0:24:28 - Authentication 0:35:41 - Landing Page 0:42:33 - Database Setup 1:01:32 - Navigation Bars 1:18:43 - Events Page 1:21:45 - New Events Page 1:24:07 - Event Form 1:40:50 - onSubmit & Events Actions 2:09:47 - Event Card 2:24:51 - Edit Events Page 2:32:54 - Favicon 2:34:26 - Schedule Feature 2:38:20 - Schedule Form 2:55:21 - Schedule onSubmit Function 3:06:01 - book route 3:10:24 - PublicProfile Component 3:18:08 - Google Calendar API 3:27:28 - Booking Events Page 3:29:54 - Get valid times from schedule 3:50:17 - Meeting Form & Actions 4:13:48 - Deployment 4:19:35 - Thank You ❤️ 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.