[Front-End System Design] - Google Calendar

Hi everyone. This is the new episode of Front-End System design. Today we're going to become google engineers and try to design a Google Calendar App. That's a quite complex application that has many interesting design decisions that we can make. I'm looking forward to your comments and suggestions 🍻

00:00 - Intro
00:29 - 1. Problem Overview
01:35 - 2. General Requirements
03:15 - 2.1. Functional Requirements
05:09 - 3. Action plan
06:24 - 4. Layout Overview
07:56 - 4.1. Components Architecture
09:45 - 5. Data Model
15:21 - 5.1. Detecting conflicting events
18:30 - 5.2 Interval Tree Introduction
24:15 - 5.3. Interval Tree - Search demo
29:54 - 5.4. Complexity analysis
32:32 - 6. Data Transferring
36:39 - 6.1 API Review
38:18 - 6.2 SSE & GraphQL
42:37 - 7. Data flow
45:19 - 8. Rendering Optimization
49:13 - 9. Notification System
51:42 - 10. App Optimizations
55:58 - 11. Accessibility

Follow me:

#systemdesign #frontend #frontenddev

[dmitryscherba]

Today I passed my first system design interview in a big serious company with zero previous experience in system design!
I had 3 days to prepare and I mostly just watched your videos and googled stuff, thank you so much!!

[avinashyadav]

You are killing it. Finally in the ocean of backend system design videos we have a river of Frontend system design :)

[shiyuwang]

I feel I should pay for this. Awesome job! Thank you for sharing

[evandroLG]

It's another awesome video! Congrats and thanks dude!
The only important feature that was not discussed in the video is how to implement the events that can be scheduled to be repeated over days, weeks, months, etc.
In a past interview with Uber, I had exactly this problem and the interviewer focused mostly on this Google Calendar feature. It would be interesting to see a second part of this video covering this specific case.

[SanjayYadav-urqj]

I don't think that we need to take care of conflicting events in frontend side. Whenever we are going to create a new event, we will send all its participants including ourselves as a payload and that API will return all the events for individual participants for that duration. and using that information, we can decide if we need to change the time or not. Even if any participant is occupied, we still can create an event for him.

[josephkaltenecker]

wow! Great explanation on the IntervalTree

[spencer]

Great content, my only critique is that I feel like the conflicting events is over-engineered. It seems like you'd be adding a ton of code along with a linked list being added to the API response all to make a fast operation slightly faster

[denischudinov]

Thanks for the great video!

Having GraphQL and Event Driven architecture sounds like over engineering for such a simple app :-)

[ayushkushwaha]

Nice video! Please keep making more :)

[natanagar]

Very useful for starting). Thanks. Спасибо

[jayshah]

Two imp questions:
1. how many total events will you have fetched in your UI/local store? events for 1 year?
2. How do you handle recurring events ? Same event is repeated infinitely at a given frequency (e.g. daily, weekly) I am assuming they are all treated as separate events by server, but there will be some dependency between those events? e.g. when we delete a recurring event, it asks for delete "This and following event".

[ПапаДракошки]

Hi, dude! It is really amazing content! Thanks a lot! I only started dive in system design, and your content is helpful a lot.

[zxhwd]

I have a feeling this is nearly impossible to cover all the things in one hour including time spent thinking specifically this is a quite hard question

[anon-wn]

Think you meant that transform is a compositor only property (it skips layout & painting) – you'd said paint. Small thing. Thanks for the fantastic content!

[iamMrBChen]

thanks for sharing wonderful content. Question about the complexsity. I believe the worset case for these operations is O(n) because you could have a very skewed tree like a single line.

[mdshihabuddin]

Thank you for this awesome video,
We want more video like this,

And also interview questions Answer video nedd

[ayushkushwaha]

Are all these things required for junior-level developers as well while interviewing ?

Like the interval tree algorithms, server-side events, if not, then what should a junior developer focus on before going to a system design interview?

[tushar]

The interval tree strategy is only for events that spans multiple days right? For events that are within 1 day, for 1 hr or 2 hrs, a good strategy is to just have events for a day in a map or something and then apply an algo to see if the new Event's start and end time will conflict with any of the existing ones. Also, for multi day Interval tree strategy, imagine if an already created event is edited (start and/or end time), this will have to trigger recreation of the Interval tree as the interval tree is originally created using the Start date of the events, so that would get restructured OR if end date changes, the max date(s) for nodes in Interval tree may change...

[indrajeetnikam]

Isn't the Worst case Time complexity for the search here O(N)? I mean we could be looking at the entire tree in some cases, take your second example for reference. It was certainly not Log(N).

[shivam_bhalla]

Great video. Question, you selected SSE protocol for this but that is unidirectional from sever to client only, the createEvent wont be supported there right?