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

Channel:

freeCodeCamp.org

Subscribers:

10,900,000

Published on June 24, 2025 1:12:29 PM ● Video Link: https://www.youtube.com/watch?v=cCuvlQvU1eg

Duration: 0:00

33,468 views

1,165

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 browserhttps://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 jhttps://www.freecodecamp.org/.org

Read hundreds of articles on programmihttps://freecodecamp.org/newsnews