Nextjs 15 + Typescript Full-Stack App – Calendra App

Learn to build and deploy a modern Calendly clone with authentication, scheduling, and Google Calendar integration.

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

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 CalendlyTired 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 LearnOver 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 BuildBy the end of this course, you'll have a fully deployed version of Calendra, a real-world scheduling app that can:Authenticate usersLet users create and customize eventsLet others book time with them based on their availabilityAutomatically create calendar events in Google CalendarPrevent double-bookings and timezone confusionAnd it will look professional, fast, and modern—ready to show off in your portfolio or even use in production.Tech StackWe’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 defaultReact 19 – For building rich, interactive UITypeScript – For type-safe, maintainable codeTailwind CSS v4 – For styling that’s fast, flexible, and easy to customizeshadcn/ui – For beautifully designed, accessible componentsNeon – A modern Postgres database with branching and serverless supportDrizzle ORM – Type-safe database queries, schema-first and easy to useGoogle Calendar API – For real calendar sync and remindersClerk – Modern authentication with email, OAuth, and moreMeet Your InstructorHi! 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 ForThis course is for:Frontend developers ready to dive into full-stack projectsBackend-curious engineers looking to explore modern UI and toolingJunior to mid-level devs building portfolio projects that stand outAnyone who wants to build a real SaaS-style app from scratchYou 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 appReal-world experience working with APIs, databases, and full-stack logicA polished project that demonstrates your skills to employers or clientsThe confidence to build and ship your own full-stack applicationsReady 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.

Overview

Section 1: Introduction

Lecture 1 Course Intro

Lecture 2 Course Setup Lecture

Lecture 3 A First Look at Calendra

Section 2: Project Setup & Authentication

Lecture 4 Project Setup

Lecture 5 Authentication

Section 3: Landing Page, Database and NavBars

Lecture 6 Creating The Landing Page

Lecture 7 Setting up the Database

Lecture 8 Creating Navigation Bars

Section 4: Events Feature

Lecture 9 Creating The Events Page

Lecture 10 New Event Page

Lecture 11 Event Form

Lecture 12 Event Form onSubmit Function

Lecture 13 Back to Events Page

Lecture 14 Event Card

Lecture 15 Edit Events

Section 5: Schedule Feature

Lecture 16 Favicon

Lecture 17 Schedule Page

Lecture 18 Schedule Form

Lecture 19 Schedule form Onsubmit function

Section 6: Booking Events Feature and Google APIs

Lecture 20 book route

Lecture 21 Public Profile Component

Lecture 22 Google Calendar API

Lecture 23 Events Booking Page

Lecture 24 Get Valid Times from Schedule

Lecture 25 Meeting Form & Actions

Lecture 26 Deployment

Lecture 27 Outro

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.