#Issue 22 - Frontend System Design: Meeting Scheduling App like Calendly
Design the frontend system for a meeting scheduling application similar to Calendly's functionality.
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
andsuspense.
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 likebundleAnalyzer
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!
Interesting read!