Back to Blog
ReactC#.NETSendGridTailwind CSSCase Study

How I Built an Appointment Booking System for an Embassy Website

Eliezer Kibet··6 min read

The Project

I recently completed one of my most complex projects to date — a full web platform for an embassy. The requirements were demanding: 60 front-end pages, a secure appointment booking system, a media management backend, 2FA authentication, multi-user admin access, and automated email notifications via SendGrid.

Here's how I approached it and what I learned.

Tech Stack

  • Frontend: React with Tailwind CSS
  • Backend: C# / .NET Web API
  • Email: SendGrid webhook for automated notifications
  • Auth: 2FA with JWT tokens

The Appointment Booking System

The core challenge was building a booking system that could handle concurrent appointments without conflicts. I implemented a slot-based system where each appointment type (visa application, passport renewal, etc.) has configurable daily slots.

When a user books an appointment, the system:

  1. Checks slot availability in real time
  2. Reserves the slot with a temporary hold (60-second timeout)
  3. Confirms the booking and sends a confirmation email via SendGrid
  4. Sends a reminder email 24 hours before the appointment

2FA and Multi-User Backend

The admin backend needed multiple staff members with different permission levels — some could only view bookings, others could manage media, and admins had full access. I implemented role-based access control (RBAC) with 2FA using time-based one-time passwords (TOTP).

Every admin login requires a verification code from an authenticator app. This was non-negotiable for a government-adjacent system where data security is critical.

SendGrid Integration

The email system uses SendGrid's webhook API to send transactional emails. Each booking triggers a confirmation email with appointment details, QR code, and instructions. The webhook handles delivery status updates so staff can see if emails were received.

Key Lessons

  • Always implement optimistic locking for booking systems to prevent double-booking
  • 2FA adds complexity but is essential for any system handling sensitive data
  • SendGrid's template system saves enormous time for transactional emails
  • A media management backend needs careful file validation — accept only what you expect

Result

The platform went live with 60 pages, a fully functional booking system, and a secure admin backend. You can see the demo at embassydemo.netlify.app.

If you need a similar system built — a booking platform, government portal, or secure multi-user backend — let's talk.

Share this articleShare on LinkedIn

Eliezer Kibet

Freelance Full-Stack Developer specializing in React, Next.js, TypeScript, and .NET. Building web applications, booking systems, fintech platforms, and cybersecurity tools.

Work with me →