Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Build a Calendly Clone - Full Stack Next.js, TypeScript, React, Tailwind

via freeCodeCamp

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build and deploy a comprehensive scheduling application tutorial that recreates Calendly's core functionality using modern web development technologies. Master full-stack development by implementing user authentication, database management, event creation and editing, timezone handling, and Google Calendar integration. Develop proficiency in Next.js 15 for server-side rendering and API routes, TypeScript for type safety, React 19 for component architecture, and Tailwind CSS v4 for responsive styling. Set up a robust backend using Neon for PostgreSQL hosting and Drizzle ORM for database operations, while implementing secure user authentication with Clerk. Create dynamic scheduling forms, manage user availability, handle meeting bookings, and integrate with Google Calendar API for seamless event synchronization. Build responsive navigation components, implement CRUD operations for events, develop public profile pages for booking, and deploy the complete application to production. Gain hands-on experience with modern development workflows including project setup, database schema design, form handling, API integration, and deployment strategies through step-by-step implementation of features like event management, scheduling logic, meeting coordination, and timezone calculations.

Syllabus

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 ❤️

Taught by

freeCodeCamp.org

Reviews

Start your review of Build a Calendly Clone - Full Stack Next.js, TypeScript, React, Tailwind

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.