Component Structure in Cal.com

[Architecture: Component Structure in Cal.com] [C: Introduction]

In this guide, you will learn how components are organized in Cal.com.

By components, here we mean the building blocks of the user interface or more precisely, the building blocks used in a page.

Our focus is primarily on the folder structure and file naming conventions used. In order to establish a common pattern and to understand components structure better, we will study few pages/routes in the Cal.com.

Our approach is to pick a route, locate the route in the source code and from there on, we will look at

1. Where the imported components are located in a project
2. Folder structure and naming conventions used
3. How the "page" is built using these imported components

There will be screenshots and links pointing to folders and components that belong to this project.

we will select some routes as shown in the following and discuss the components structure used.

1. Event types route
2. Booking route a. Upcoming sub-route b. Unconfirmed sub-route c. Recurring sub-route d. Past sub-route e. Cancelled sub-route
3. Availability route

Use this free guide to learn how components are organized in Cal.com.