Building a simple Calendly clone with Phoenix LiveView (pt. 1)
Tags: elixir, phoenix, liveview
Published: 2021-11-08 06:02:25

---
title: "Building a simple Calendly clone with Phoenix LiveView (pt. 1)"
published: true
description: "Introduction."
tags: elixir, phoenix, liveview
canonical_url: https://bigardone.dev/blog/2021/11/06/building-a-simple-calendly-clone-with-phoenix-live-view-pt-1
cover_image: https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/post-meta.png
series: Building a simple Calendly clone with Phoenix LiveView
---

## Motivation
I've been using **Elixir** and **Phoenix** for the last six years to build from APIs to complete web applications using **React** and **Elm** on the front-end, being **Elm** my weapon of choice primarily. Since **LiveView** came out, I have played around with it a couple of times, first to build an [ant farm] and second to set up a [headless CMS]. However, I never ended up getting hooked by it, and I kept relying on **Elm** to build my front-ends. But when **Phoenix v1.6** and **LiveView v0.17** came out, my feelings about **LiveView** changed utterly, and I couldn't resist making something more extensive to test out all its new features, making me finally understand all of its power.

## Why Calendly?
When I want to dive deep into new technology, I like building a small clone of a popular service to see how far I can get with it. Scheduling services like [Calendly] have become very popular, and often people share their public calendar links so others can select the ideal date and time for a meeting. Therefore, after examining its UI, I thought it would be a fun pet project and an excellent tutorial to share.

## What are we going to build?
Since **Calendly** has tons of features, and this tutorial is about **Phoenix LiveView**, we will focus on its core, which is managing even types and scheduling events. Our application will consist of two different parts:

1. The sharable public page where invitees can select an event type, a date, and a slot to schedule a meeting with us.
2. The private admin site, protected by Basic HTTP authentication, where we can create and edit event types and manage all the scheduled events.

Regarding **LiveView**, we are going to rely on some of its more powerful features such as:

- Live sessions.
- Live components.
- Function components.
- JS hooks.
- JS commands.

Here are some screenshots of the final result:

### The home page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/home.png"/>

### The calendar page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/calendar.png"/>

### The schedule event page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/schedule.png"/>

### The event types admin page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/event-types.png"/>

### The create/edit event type admin page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/edit-event-type.png"/>

### The scheduled events admin page.

<img class="shadow-lg rounded-md" src="https://bigardone.dev/images/blog/2021-11-06-building-a-simple-calendly-clone-with-phoenix-live-view-pt-1/scheduled-events.png"/>

In the next part of the series, we will jump into the action by creating a new Phoenix project and generating the necessary Ecto schemas for modeling both event types and events. In the meantime, you can check the end result [here](https://calendlex.herokuapp.com/), or have a look at the [source code](https://github.com/bigardone/calendlex).

Happy coding!

{% github bigardone/calendlex no-readme%}


[ant farm]: https://github.com/bigardone/phoenix-liveview-ant-farm
[headless CMS]: https://github.com/bigardone/phoenix-cms
[Calendly]: https://calendly.com/