#Issue 22 - Frontend System Design: Meeting Scheduling App like Calendly

Design the frontend system for a meeting scheduling application similar to Calendly's functionality.

Mar 23, 2024

Meeting scheduling app like Calendly is a communication platform that allows users to set their availability and share their calendar with others, enabling them to easily schedule meeting in a specific time. Calendly is a quite popular app and has a lot of features, but here we are going to focus only on the core features and avoid the rest, including authentication which I think already has a lot of resources online.

Functional Requirements

User can create and edit customized event types with specific duration, location, and meeting preferences.
User can set availability on the calendar.
Allow others to view calendar availability of host and book slot with time and details.
Dashboard displaying upcoming meetings, pending invitations and host can edit them as needed.

Non-Functional Requirements

Performance, Security, Accessibility: Ensuring best practices for performance optimization, such as minimizing load times and optimizing resource usage. Also ensure app security through proper headers in request and authentication mechanism.We also need to make sure accessibility by following WCAG guidelines.
Responsive and user-friendly UX: Responsive UI that adapts to all screen sizes and orientations. Easy navigation pattern for better usability and accessibility.
Design System: Implement a consistent design system across the application, including typography, color schemes, and UI components.

High Level Design

For our application, we can opt for client-side rendering (CSR) and build it as a Single Page Application (SPA). We can choose any modern web framework such as React, Vue, Svelte, or Angular. Each of these frameworks has its own routing and store libraries that makes it easy to set up the application quickly.

Below is a high level diagram of our application, showing relationship between each layers.

Data Model

In order to create event and set it’s availability, we need to input data in form and send it from client-side to server. The data structure can be in the format as shown below-

Similarly for the invitee to schedule meeting with the host, we need to send data from form input as well.

Also, in order to show availability in calendar visually, we need to get data from server and populate in client-side. The response can come in the data format as shown below-

API

To transfer data between server and client, we need to decide the endpoints of our API. The payload and response format of any API should be collaboratively decided by both the frontend and backend team.

For creating event, editing and fetching them-

GET: /event
For query we can add event_type

POST: /event
PATCH: /event/{id}
Payload can be sent in the format discussed in Data Model

For fetching and posting calendar availability-

GET: /event/{id}/availability
Query
start_date, end_date -> to fetch data within range, rather then getting all at once

POST: /event/{id}/availability

For scheduled meetings we can have-

GET: /bookings
Query
status - upcoming,past,cancelled
start_date, end_date
event_type

PATCH: /bookings/{id}/cancel
PATCH: bookings/{id}/

Optimization

We can improve performance of our app by applying some general techniques.

Lazy Loading Components - Implement lazy loading for components and resources that are not immediately required. For example in React we can import components dynamically using lazy and suspense.
Optimize third-party library - Sometimes the bundle size of application may not be large because of your code. It might be for the third-party library you are using. For example, the date formatting library moment contains a folder locale, which we may not need in our application and configure setting in Webpack/Vite to ignore it during build. We can use library like bundleAnalyzer to inspect which libraries are impacting bundle size.
Use Browser Cache and CDN - We can set caching time for our static assets, js and css files. If we use server like nginx we can set caching expiry in Cache-Control header. Some of the static assets like image, font and css can also be served as CDN. CDNs optimizes performance by caching content on edge servers closer to users, reducing latency and load times.

As our application grows, we often have to rethink the way we structure our app and our system design also evolves. For a simple meeting scheduling app, I think the basics have been covered.

That’s it folks. Thanks for reading!

Riya's Medley

Discussion about this post