[Frontend System Design] - Notion

Greetings, everyone! Welcome to the latest episode of Front-End System Design. Today, we're going to explore the design of a Notion-like editor. It's a bit challenging to fit-in all the concepts for such an app, but we'll make an effort to focus on designing a highly extendable Markdown-like editor. This episode will dive into the combination of Frontend and OOM Design.

Please consider subscribing to the channel! Thank you :)

00:00:00 1. Intro
00:01:07 2. Notion Overview
00:02:40 3. System Design Plan
00:05:08 4. General Requirements
00:06:47 5. Advanced features requirements
00:07:54 6.1 Mock-up
00:08:41 6.2 High-level system components diagram
00:16:04 6.3 Types of components
00:18:27 7. Lexer & Parser architecture
00:29:15 8. Notion Database Design
00:36:00 9. API Design
00:44:16 10. Performance Optimization
00:52:06 11. Accessibility (very briefly)
00:54:35 12. Summary

#systemdesign #frontend #frontenddev

[JukeboxForArtists]

Would love to see this channel being updated more!

[ДаниилМатвеев-вы]

Your video are mind changing things. Your explantion you so nice that it blows my mind. Please continue

[tuku_mann]

Thank you a lot for the extremely useful content!

I appreciate what you're doing ❤

[zdargahi]

very insightful, there are so many few good content on FE system design, please keep up the great job

[urFavoriteEva]

thank you for sharing your mythology of breaking problems 3rd eye achieve :)

[robertkameni]

You always give the best. Thank you so much

[aryanrahman]

Great work! Zooming into the parts of the design might help! But you shared the link to the diagram so its ok!

[mohdmuneeb]

I think I am in love with this. thank you very much!

[lokeshkhati]

Thank you so much for this quality content, you are the best❤

[IAfanasov]

I'm confused with the parser and lexer.
The lexer takes the rules, the string and parse it into a ComponentToken. That information is fed to parser.
The parser renders an HTMLElement from a component token.
It does look like the job of lexer is to parse and the job of parser is to render. Why does the names convey a different idea?

[posteisnoob]

hey, thanks for the amazing work!

Would you be okay sharing access to your notion frontend prep material?

[oleksandrkhivrych]

can you share your notion page, looks quite useful :)

[mingyueliu]

thanks for all your videos, i appreciate it,
can you make it more like a "Drawling application (lucid chart)", "File-storage application(google drive, dropbox)", or "Rider-sharing app (Uber)" please?

[Spike-gxle]

why page content is stored as String and not as object? what are its advantages

[bevocodes]

"websockets are not supported in http2"- a bit confused by this. My understanding is they are supported, and have been for years?

[ronaldomaia]

The content is good, but I don't know why is blurred.

[JMKAKAN]

Thanks! I think you pay too much atterntion to the component API design. In the real 45 minutes intreview setting you won't have time for it.
And would disagree about dumping websockets:
1) they're different from HTTP protocol, so version doesn't matter
2) with REST you'll have too much load on the backend, possible lost updates and junky experience
3) when in the future, collaboration part will be required, you will have to basically do a major rewrite of the app

[ucnguyenphanhuynh]

Hello, could you share your resume and talk about it, thanks.❤

[gourabsarker]

Sir do you earn 150k pound sterlings a year in uk? Plz reply. Thanks a lot.

[ib]

Helpful tutorial
.
But your filming should be better. I couldn't watch comfortably on my mobile device.
You should zoom video into focused areas of the screen when explain. Everything looks so tiny.