Calendra: Building a Scalable Scheduling App with Next.js & Drizzle ORM

Muhammad Zubair - Software Engineer
Muhammad Zubair
2024-05-20 • Case Study

Calendra - Full-Stack Scheduling App by Muhammad Zubair Calendra: A modern scheduling and booking platform developed by Software Engineer Muhammad Zubair.

Building scalable, user-friendly scheduling systems requires a robust architecture. To demonstrate modern full-stack capabilities, Muhammad Zubair, a Software Engineer and Platform specialist, built Calendra—a comprehensive web application inspired by Calendly.

This project allows authenticated users to create, manage, and share personal schedules, while enabling seamless booking experiences for their clients without requiring an account.

Technical Architecture by Muhammad Zubair

As a Software Engineer, my focus for Calendra was on creating a highly performant, type-safe, and secure platform. Here is the technical breakdown of the stack:

1. Frontend: Next.js & React

Built on Next.js (v16.1.6) and React (v19.2.3), the application leverages Server-Side Rendering (SSR) and Server Actions for optimal performance and SEO. The UI is crafted using Tailwind CSS and Shadcn UI for accessible, responsive components.

2. Backend & Database: Drizzle ORM & Neon

To ensure type safety from the database to the client, I implemented Drizzle ORM. The data is hosted on Neon Database (serverless PostgreSQL), providing scalable and fast data retrieval for availability checks and event management.

3. Authentication: Clerk

Secure user authentication, including social logins and email verification, is handled seamlessly via Clerk, ensuring user data and schedules remain private and protected.

Core Features

  • User Authentication: Secure sign-up and login using Clerk.
  • Event Management: Create, edit, and delete events with specific durations and descriptions.
  • Dynamic Scheduling: Configure personal availability schedules and generate valid time slots dynamically. Handles complex time zones using date-fns-tz.
  • Public Booking System: Shareable public booking pages where clients can select available slots and confirm meetings.
  • UI/UX Enhancements: Loading states, animations (tw-animate-css), and toast notifications (sonner) for a premium user experience.

Installation & Setup

Want to run Calendra locally? Follow these steps:

1. Clone the Repository:

git clone https://github.com/Muhammad-Zubair796/Calendra.git
cd Calendra

2. Install Dependencies:

npm install

3. Set Up Environment Variables: Create a .env.local file in the root directory:

# Database (Neon)
DATABASE_URL=postgresql://username:password@host:port/dbname?sslmode=require

# Clerk Auth
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

# Google APIs (for email/calendar integration)
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_API_KEY=your-api-key

4. Database Setup & Run:

npm run db:generate
npm run db:migrate
npm run dev

Why Calendra Matters

By integrating Next.js Server Actions with Drizzle ORM and Clerk, Calendra serves as a blueprint for building modern, serverless SaaS applications. As a Software Engineer, I continuously explore ways to architect systems that are both developer-friendly and highly scalable.

Muhammad Zubair - Software Engineer About the Developer I am Muhammad Zubair, a Software Engineer from Pakistan passionate about building scalable web applications, AI infrastructure, and full-stack platforms.