DEV Community

Cover image for 🤝 Learn Front-End by Doing: Contribute to Cal.com's Open Source...🚀
Mr Chike
Mr Chike

Posted on

🤝 Learn Front-End by Doing: Contribute to Cal.com's Open Source...🚀

#webdev #frontend #programming #opensource

In this tutorial, we'll be focusing on Cal.com:

A fully customizable scheduling software for individuals, businesses taking calls and developers building scheduling platforms where users meet users.

⛔✋ Before you start scrolling and skimming...
Here’s a quick overview of the project you’ll be setting up and contributing to.

Calcom Project

👇 Table of Contents

⚙️ Environment Setup (Optional)

Getting started with servers can feel overwhelming at first. I remember that stage well. That’s why I like to keep things beginner-friendly. If you’ve already got some experience under your belt, you can skip this part.

For this guide, I’m working with Ubuntu Linux, but we’ll also walk through setting up a fresh environment on Windows using WSL (Windows Subsystem for Linux). Even if you don’t need it today, this is the kind of setup you’ll probably want to bookmark for later.

💡 For Windows users
You can install Windows Subsystem for Linux (WSL) with the command wsl --install in your terminal.

wsl --list --online
Enter fullscreen mode Exit fullscreen mode 
The following is a list of valid distributions that can be installed.
Install using 'wsl.exe --install <Distro>'.

NAME                            FRIENDLY NAME
AlmaLinux-8                     AlmaLinux OS 8
AlmaLinux-9                     AlmaLinux OS 9
AlmaLinux-Kitten-10             AlmaLinux OS Kitten 10
AlmaLinux-10                    AlmaLinux OS 10
Debian                          Debian GNU/Linux
FedoraLinux-42                  Fedora Linux 42
SUSE-Linux-Enterprise-15-SP6    SUSE Linux Enterprise 15 SP6
SUSE-Linux-Enterprise-15-SP7    SUSE Linux Enterprise 15 SP7
Ubuntu                          Ubuntu
Ubuntu-24.04                    Ubuntu 24.04 LTS
archlinux                       Arch Linux
kali-linux                      Kali Linux Rolling
openSUSE-Tumbleweed             openSUSE Tumbleweed
openSUSE-Leap-15.6              openSUSE Leap 15.6
Ubuntu-18.04                    Ubuntu 18.04 LTS
Ubuntu-20.04                    Ubuntu 20.04 LTS
Ubuntu-22.04                    Ubuntu 22.04 LTS
OracleLinux_7_9                 Oracle Linux 7.9
OracleLinux_8_10                Oracle Linux 8.10
OracleLinux_9_5                 Oracle Linux 9.5
Enter fullscreen mode Exit fullscreen mode

To install Ubuntu 22.04 (recommended):

wsl --install Ubuntu-22.04
Enter fullscreen mode Exit fullscreen mode

Once installed, launch your new Ubuntu distribution with:

wsl -d Ubuntu-22.04
Enter fullscreen mode Exit fullscreen mode

You can access your project folders in the new Linux environment using the WSL extension in your favourite code editor (I use VSCode).
From there, continue with the setup by running the commands below.

💡 For Linux Users
Run the command below in your terminal. If you happen to be using a different Linux distribution, then replace apt with your system's package manager like yum, dnf, pkg, apk and so on.

# Update package lists and upgrade existing packages
sudo apt update && sudo apt upgrade -y

# Install useful dependencies
sudo apt install -y docker.io docker-compose tree vim openssh-server

# Add current user to the docker group for non-root access
sudo usermod -aG docker $USER

# Enable/start the SSH service
sudo systemctl enable ssh
sudo systemctl start ssh

# Allow SSH through the firewall and enable UFW (Uncomplicated Firewall)
sudo ufw allow ssh
sudo ufw enable

# Generate a new RSA SSH key pair with no passphrase and a comment for identification
ssh-keygen -t rsa -f ~/.ssh/id_rsa -N "" -C "ssh-key"

# Reboot the system to apply changes
sudo shutdown -r now
Enter fullscreen mode Exit fullscreen mode

Now that we're done with running the above commands and restarting the server so changes take full effect, we will be moving to the next section which will be...

📦 Project Scaffolding

In this section, we will be setting up the project structure.

# Clone the Cal.com repository from GitHub
git clone --depth=1 https://github.com/calcom/cal.com.git

# Move into the newly cloned project directory
cd cal.com

# Create and switch to a new Git branch called "dev"
git checkout -b dev

# Create a new Docker network for containers to communicate easily with each other
docker network create calcom_net

docker run \
  --network calcom_net \                         # Use custom network
  --dns=8.8.8.8 \                                # Set DNS to Google
  --privileged \                                 # Grant extra permissions
  --name calcom_dev \                            # Name the container
  --add-host="host.docker.internal:host-gateway" \ # Access host from container
  -v /var/run/docker.sock:/var/run/docker.sock \ # Mount Docker socket
  -v $(pwd):/calcom \                            # Mount current dir
  -w /calcom \                                   # Set working dir
  -e NVM_DIR="/root/.nvm" \                      # NVM config
  -e NODE_OPTIONS="--max-old-space-size=16384" \ # Increase Node memory
  -e CALCOM_TELEMETRY_DISABLED=1 \               # Disable telemetry
  -e NEXT_PUBLIC_LOGGER_LEVEL=3 \                # Set log level
  -e NEXT_PUBLIC_IS_E2E=1 \                      # Enable E2E mode
  -it node:20-bullseye bash                      # Run Node 20 with bash
Enter fullscreen mode Exit fullscreen mode

Now you should be inside the container, and your bash shell should look like this

root@60c156b42050:/calcom#
Enter fullscreen mode Exit fullscreen mode

In your container bash shell, run the command

apt update && apt upgrade -y     # Update & upgrade
apt install -y docker.io \       
               docker-compose \  # Install Docker tools
               vim \             # Install text editor
               iputils-ping \    # Install ping
               npm               # Install Node package manager
Enter fullscreen mode Exit fullscreen mode

Now, let create setup.sh file and copy all the contents of this file 👉 Calcom Setup Script into it.
In this terminal shell, run the following commands

# Create setup script
touch setup.sh

# Make it executable
chmod +x setup.sh

# Execute updated script
./setup.sh
Enter fullscreen mode Exit fullscreen mode

NB: If you're not familiar with docker, try a crash course on YouTube...

Now there are some important updates to make in our Docker Compose files before spinning up the application:

  • docker-compose.dev.yml
  • docker-compose.prod.yml
  • apps/api/v2/docker-compose-apiv2.yaml

In each file, go to the volumes section and update the project's folder path to match the absolute path of your local cal.com project directory (e.g. /home/mrchike/cal.com).
You can run the pwd command inside the project folder in your host's terminal to get the correct path.

This is what you’ll see:

volumes:
   - /absolute/path/to/cal.com:/calcom # UPDATE FOLDER PATH
Enter fullscreen mode Exit fullscreen mode

and this is what it should look like when done. (of course, updated with your own project folder path)

volumes:
   - /home/mrchike/cal.com:/calcom
Enter fullscreen mode Exit fullscreen mode

Now that you're done updating the path in each Docker Compose file. Run the following command.

🚀 Launch 

# Run the application in production mode (optimized build, no hot reloading)
docker-compose -f docker-compose.prod.yml up --build

# Run the application in development mode (supports real-time code changes / hot reloading)
docker-compose -f docker-compose.dev.yml up --build
Enter fullscreen mode Exit fullscreen mode

NB: The project may take some time to spin up, approximately 30 minutes to 1 hour.
If it starts consuming a lot of your system’s resources and doesn’t boot up properly, consider running it on an external server (e.g., AWS, GCP, or any equivalent).

If you encounter an error... 🎉 Congratulations! You're officially a developer, figure it out. 😅

But if, after a long (and valuable) struggle, you still need support, feel free to reach out on LinkedIn

The command will spin up all related services along with their respective GUIs for web access.

Once they’re up, you can access them locally using the following URLs and credentials:

The PostgreSQL database has already been updated with initial migrations! If you're new to pgAdmin, no w😉rries!. I’ll walk you through viewing the data:

  1. Visit 👉 http://localhost:8083/browser/
  2. Click "Add New Server"
  3. Under the General tab, set a name (e.g., Cal.com App)
  4. Under the Connection tab, fill in the following:
  5. Host name/address: postgres
  6. Port: 5432
  7. Maintenance database: root
  8. Username: root
  9. Password: root
  10. Save password?: ✅
  11. Click Save

To view your data:
Go to Databases(1) -> Schemas(1) -> public -> Tables (100).
Right-click any table -> View/Edit Data -> All Rows

When you are done setting up. You can either create a user and log in or use the already existing users below:

username: enterprise-member-1
email: enterprise-member-1@example.com
password: enterprise-member-1

username: enterprise-member-2
email: enterprise-member-2@example.com
password: enterprise-member-2

username: enterprise-member-3
email: enterprise-member-3@example.com
password: enterprise-member-3

and below are some URLs that you might find helpful once your project is up and running!

http://localhost:3000/event-types
http://localhost:3000/auth/setup
http://localhost:3000/getting-started

That’s all, folks! 🎉

Hope you have fun contributing and learning on the job. This project is packed with value, and you’ll definitely learn a lot because the technologies used are industry standard for building front-end applications.

Feel free to supplement your learning with YouTube or other popular educational platforms to deepen your understanding.

Good luck, and happy building! 🚀👨🏾‍💻

💡 Enjoyed this article? Connect with me on:

Your support means a lot. If you’d like to buy me a coffee ☕️ to keep me fueled, feel free to check out this link. Your generosity would go a long way in helping me continue to create content like this.

Previously Written Articles:

  • 🚀 Create Professional Portfolios Using Material for MkDocs (Series-X) → Read here
  • 🛠️ FastAPI in Production: Build, Scale & Deploy - Series B : Services, Queues & Containers → Read here
  • 🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners) ⏱️🎯 → Read here

Top comments (0)