Portfolio Integrated Booking System with Google Services

01

A booking system built into my portfolio, connecting online appointments with Google Calendar, Google Meet, email notifications, and a private admin dashboard.

02

I built the booking experience and the admin tools behind it. Visitors can choose an available time, book a call, and manage their appointment through a private link. From the admin dashboard, I can review bookings, manage contacts, record attendance, send follow-ups, and check email delivery history. The system connects Next.js and TypeScript with Supabase/PostgreSQL, Google Calendar, Google Meet, and Resend. Booking records, calendar changes, and communication history stay connected throughout the appointment lifecycle.

03

A booking form is only the beginning. Each appointment also needs a reserved time, a meeting link, confirmation emails, and a way to handle changes. I wanted visitors to manage their appointments themselves while giving me one place to manage the work that follows.

04

Visitors choose an available date and time, then submit their contact details and a short description of their project. The system checks availability and reserves the appointment, protecting the slot from conflicting bookings. Google Calendar stores the appointment and Google Meet provides the call link. Confirmation emails give the visitor the appointment details and a private management link. Visitors can reschedule or cancel through that link. The system updates the calendar and booking record, then queues the relevant email notifications. The admin dashboard brings together bookings, calendar views, contact details, and private notes so I can review each appointment in context. After a call, I can record attendance, prepare a follow-up, preview the message, and explicitly confirm sending it. Email history and operation status help me check what was sent and identify changes that need attention.

05

Calendar changes and email delivery depend on external services, so the system keeps track of pending work instead of assuming every request succeeds immediately. Rescheduling and cancellation attempt to complete during the request, with saved background jobs available for recovery. Booking history is retained, private owner notes stay out of invitations and booking emails, and follow-up messages require review before sending.

06

The booking system is deployed as part of my portfolio. Validation has covered booking, rescheduling, cancellation, conflicting requests, admin authorization, email workflows, and responsive appointment-management screens. Controlled tests connected to the real Google Calendar verified the appointment lifecycle and email-provider acceptance. Calendar confirmation and email delivery still depend on the connected services.

07

The same approach can support consultation bookings, service appointments, and client onboarding. Customers get a clear way to book and manage their time, while the business gets a connected record of appointments, contacts, communications, and follow-ups.

08

Next.js, React, and TypeScript for the booking interface, admin dashboard, and server-side logic

Tailwind CSS for responsive styling

Supabase and PostgreSQL for authentication, booking records, contacts, and background jobs

Google Calendar API for availability and appointment management

Google Meet integration for call links

Resend for transactional emails and delivery tracking

Playwright for browser and responsive-flow testing

Vercel for hosting

View appointments by date, time, and booking status.

Manage contact details and review booking history.

Customize confirmations, reminders, and follow-up messages.