Article original : Build and Deploy a Calendly Clone with Google Calendar Integration

Si vous vous êtes déjà retrouvé submergé par des échanges interminables d'e-mails pour planifier des réunions ou confus à cause de décalages horaires, vous avez probablement utilisé (ou souhaité utiliser) un outil comme Calendly. Maintenant, vous pouvez apprendre à construire votre propre version à partir de zéro. Ce cours est parfait si vous souhaitez vous immerger dans le développement full-stack, affûter vos compétences et repartir avec une application polie que vous pouvez réellement utiliser ou présenter dans votre portfolio.

Nous venons de publier un cours vidéo complet sur la chaîne YouTube de freeCodeCamp.org qui vous apprendra à construire un clone full-stack de Calendly. Dans ce cours basé sur un projet, Noor Fakhry (fondateur de Programming Fluency) vous guide à travers chaque étape de la construction de Calendra, une application de planification complète avec synchronisation en temps réel avec Google Calendar, gestion des fuseaux horaires et une interface utilisateur soignée.

Ce que vous allez construire

À la fin du cours, vous aurez une application de planification entièrement déployée qui peut :

  • Authentifier les utilisateurs de manière sécurisée avec Clerk

  • Permettre aux utilisateurs de créer des événements et de personnaliser leur disponibilité

  • Permettre à d'autres de réserver du temps via un lien partageable

  • Ajouter automatiquement des événements à Google Calendar

  • Gérer la logique des fuseaux horaires et éviter les doubles réservations

  • Avoir une apparence propre, rapide et prête pour la production

Outils et technologies utilisés

Dans ce cours, vous utiliserez une stack moderne avec des outils du monde réel très demandés actuellement :

  • Next.js 15 (avec le App Router et les Server Actions)

  • React 19 (oui, la dernière version)

  • TypeScript (parce que le code maintenable compte)

  • Tailwind CSS v4 et shadcn/ui pour un stylisme rapide et beau

  • Neon comme base de données PostgreSQL

  • Drizzle ORM pour des requêtes de base de données propres et typées

  • Google Calendar API pour l'intégration du calendrier

  • Clerk pour une authentification fluide

À qui ce cours s'adresse

Ce cours est conçu pour :

  • Les développeurs frontend qui veulent enfin se lancer dans le full-stack

  • Les développeurs curieux du backend qui veulent explorer l'architecture frontend

  • Les développeurs juniors à intermédiaires cherchant à construire un projet solide pour leur portfolio

  • Toute personne souhaitant comprendre comment les applications SaaS modernes sont construites

Vous tirerez le meilleur parti de ce cours si vous avez déjà une certaine expérience avec React et JavaScript ou TypeScript. Vous n'avez pas besoin d'être un expert en backend car Noor explique tout étape par étape.

Structure du cours

Voici un aperçu rapide de ce qui est couvert :

  • Introduction et présentation du projet

  • Flux d'authentification complet avec Clerk

  • Pages frontend et navigation

  • Configuration de la base de données avec Neon et Drizzle

  • Création, édition et affichage des événements

  • Pages de réservation publiques

  • Intégration de Google Calendar

  • Logique de réservation avec vérification de disponibilité

  • Déploiement de l'application

Regarder le cours

Si vous êtes sérieux concernant le développement full-stack, ce type de projet peut faire une grande différence dans vos compétences et votre portfolio. Vous pouvez regarder le cours complet dès maintenant gratuitement sur la chaîne YouTube de freeCodeCamp.org (4 heures de visionnage).