Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
NextJS 15 + TypeScript Full-Stack App – Calendra App
21 students

NextJS 15 + TypeScript Full-Stack App – Calendra App

Learn to build and deploy a modern Calendly clone with authentication, scheduling, and Google Calendar integration.
Created byNoor Fakhry, Programming Fluency
Last updated 5/2025
English
English [Auto],

What you'll learn

  • NextJS 15
  • Full-Stack Web Development with Modern Tools
  • Authentication and User Management
  • Event Creation, Scheduling, and Timezone Handling
  • Google Calendar Integration
  • Building a Production-Ready Application

Course content

6 sections • 27 lectures • 4h 20m total length

  • Course Intro3:27

    Build and deploy Calendra, a full-stack scheduling app and Calendly clone using Next.js 15 and TypeScript, with Clerk authentication, events and schedule pages, public profiles, and Google Calendar integration.

  • Course Setup Lecture0:03
  • A First Look at Calendra14:37

    Calendra offers a Google Calendar–integrated scheduling experience, guiding users from Google sign-in to creating, activating, and booking events, and managing schedules and public profiles.

Requirements

  • To get the most out of this course, students should have: Basic knowledge of React You should be comfortable working with React components, props, and state. You don’t need to be an expert, but a working knowledge is important. Familiarity with JavaScript or TypeScript You should understand functions, variables, and basic async logic. We’ll be writing the code in TypeScript, but I’ll explain everything clearly as we go. Some understanding of web development Knowing how client-server communication works (e.g. APIs, HTTP requests) will help, though we’ll cover how to connect frontend and backend in this project. A willingness to learn full-stack development You don’t need backend experience coming in—I’ll guide you step-by-step through everything including databases, authentication, and deployment. That’s it. If you’re comfortable building simple React apps and ready to push yourself a little further, you’ll do great in this course.

Description

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 Learn

Over the course of this project-based journey, you’ll learn how to:

  • Build a modern landing page with clean, responsive design that sets the tone for your app. No outdated templates—just fresh, functional UI.

  • Set up authentication with Clerk, so users can securely register, log in, and manage their own events and schedules.

  • Design intuitive navigation and user flows, because if users get lost, they won't book meetings.

  • Create an Events Page, where users can set up different types of events (like 30-min or 60-min meetings) with customizable durations, descriptions, and availability.

  • Build a dynamic Schedule Page, so users can set their weekly availability in an intuitive, user-friendly interface.

  • Launch Public Profile Pages, complete with unique URLs, where anyone can book meetings with a user—no signup required.

  • Integrate with Google Calendar, using Google APIs, to automatically sync meetings and set reminders—so nothing slips through the cracks (or lands at 3 AM).

  • Handle timezones intelligently, so meetings are booked at the right time no matter where users or their clients are located.

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

Meet Your Instructor

Hi! I'm Nour, 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.

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

Ready to Build Something Real?

If you’re tired of toy apps and tutorials that leave you wondering “how does this work in production?”, this course is for you. We’re building a real tool, with real features, that solves real problems.

Join me—and let’s build something amazing together.

Who this course is for:

  • This course is for developers who want to build real, production-ready applications—not just toy projects. Frontend developers who are ready to dive into full-stack development using modern tools and frameworks. React developers who want to learn how to structure large apps, manage authentication, and connect to databases and third-party APIs. Junior to mid-level engineers looking to build a high-quality portfolio project that demonstrates real-world skills. Freelancers or indie makers who want to create their own scheduling or booking system with authentication, event logic, and calendar integrations. Anyone who’s tired of tutorials that stop at the UI—and wants to learn how to build, ship, and deploy a real SaaS-style product from scratch. If you’ve ever wanted to build something like Calendly, and you’re ready to take on a full-stack project that teaches you how to solve real-world problems—this course is for you.

Report abuse