Design JIRA Sprint Board - Frontend System Design Guide

[@shivam_bhalla]

Apologies for the sound quality, used the wrong mic. Hopefully the content makes up for it 😅

[@chinmaykumar7975]

sure it does.

[@zdargahi]

it was very well structured and insightful. Thanks so much for all the effort. please keep making great videos like this

[@zdargahi]

As interview is an hour usually, for improvement perhaps it's good idea to elaborate on these 3 that are specific for task management board and not general 1. infinte scroll, intersection observer API 2. drag and drop API 3. Real time collaboration, and conflict resolve algorithms I understand that you have mentioned those but didn't elaborate on them . as interviews are usually an hour these are great and related topics to cover for a FE developer

[@shivam_bhalla]

Thanks for the feedback! I plan to make separate videos of each of those topics. I wished system design interviews could be an hour long but if you interview for meta for instance, it’s 45 min interview, 5 mins for intros, 5 mins for outros, that leaves you with 30 mins to cover your basis. I tried to mimic a pace of that interview format.

[@Pulpdood]

Usually all GraphQL queries are POST requests even for simple data retrieval queries. This is because we will need to send a GraphQL query string which would be impractical to put into a GET URL query param since there's nowhere else to put it, and we need to put in into a body i.e. POST

[@indrapreetsingh3727]

very informative . Thank you for sharing such a beautifully explanation

[@macmacmac740]

20:36 what is the reason behind having inline styles in JS. Generally it is advised to not use inline styles. Can you please help me understand this. Thanks. Great content.

[@MrREALball]

So that those would load only when component loads (in case of code splitting). But css-in-js is a trade off between potential network gains and runtime performance, since css-in-js has a runtime cost (and a noticible one in some scenarios). There are css-in-js libraries like pandacss which do not have a runtime cost (mostly, its the same as with css classes), but it also loads at the same time as basic css, because it gets transpiled to regular css at build time. Overall I dont see an actual benifit either. Its almost always better to minimize runtime costs and not network in this case. Network could be optimized in a lot of ways, some of which are mentioned in this video.

[@shivam_bhalla]

1. Avoid Collisions: By using CSS-in-JS, you avoid adding extra CSS code to a global CSS file. This minimizes the risk of style collisions as styles defined in JavaScript are scoped to the component. This scoping ensures that styles do not inadvertently affect other elements on the page. You can work around this by lazy loading your component and have a dedicated css file for each component. 2. Component Encapsulation: When CSS is specific to a component and encapsulated within it, the component becomes self-contained. This makes the components more portable and easier to maintain, as all their styling logic is bundled together with their functional logic. 3. Performance Considerations: Inline styles can sometimes be faster in terms of rendering because they reduce the complexity of the CSS Object Model (CSSOM). Since inline styles are applied directly to elements as style attributes, they can be processed more quickly by the browser, avoiding the overhead of CSS parsing and stylesheet reflows. 4. Hybrid Approaches: Using libraries like styled-components offers a mix of both worlds. You get the benefits of scoped and dynamically generated styles while writing CSS code in a more traditional, stylistic manner. This approach also supports theming, server-side rendering, and more sophisticated styling mechanisms that can be crucial for large-scale applications. You can go down a deep rabbit hole here :) github.com/andreipfeiffer/css-in-js

[@javascriptworld3443]

Definitely great session, very clear and detailed understanding. Although in perf, a11y and later part of video, content got duplicate and generalised from the already uploaded video by you (FE system design), expecting more specific example and use cases rather than generalised. Because in actual design interview, interviewer grill a lot on specific examples. You are doing great job, please keep up the good work going. Looking for more helpful content.

[@shivam_bhalla]

Thanks! All Frontend interviews will have similar fundamentals, hence why i published the Frontend system design fundamentals video, which can be applied across any interview. Appreciate the feedback and glad you found it helpful!

[@navdeepsinghsowanni1658]

​@@shivam_bhalla Great tutorial but would agree with the comment here. Later part of the video should be specific to this particular use case

[@thomashoffmann9349]

This is great content! Helping me to prep for FE system design rounds. I like the use of the RADIO acronym. I had some feedback as I think your infinite scroll approach might have an issue. If I understood correctly, you are going to load the next 'page' of tickets from the server when a specific node becomes visible on the screen. Consider that you have multiple lists, it'd be possible for most tickets to be in the TODO or DONE columns. Since each column essentially needs to lazy-load, loading and mapping tickets will happen earlier than expected for the columns with less tickets in them, and this could result in tickets being loaded for other columns but not for the visible column! I think you could mitigate this problem by hitting the API with a columnID which loads the tickets just for that column? One last thing, I think the compression from Google is called Brotli instead of Brotle?

[@shivam_bhalla]

This is great feedback and very good edge case, you are right, that is how you would handle that case. Appreciate the feedback!

[@Ravi_Goyal]

Could you please share this document link

[@maryamlarijani5550]

Great Content!

[@shivam_bhalla]

Thank you!

[@idamooooo]

Good stuff! One nit is that the compression algorithm is actually called Brotli not "Brotle". Also curious on your rationale behind MVC vs other architecture types like Flux (which works very well with React)

[@shivam_bhalla]

No one design pattern is better, MVC and MVVM is quite popular, so base your answer with one you find most useful and explain why.

[@olegchibikov6518]

what is the reasoning behind chosing MVC and not FLUX/MVVM/other architecture? How could I explain this choice to the interviewer?

[@shivam_bhalla]

MVC generally is easier to explain during a system design interview but it doesn’t mean it’s a better pattern than another, each one has its benefits and drawbacks and it’s wise to bring up a few options and explain why you might prefer one over the other.

[@aniljangra5485]

Great Content... really helpful .👍

[@HaibertBuilds]

i wish you would post a link to this document youre showing in the video

[@shivam_bhalla]

Hello! It’s available here: frontendlead.com/system-design/design-sprint-board-frontend-system-design

[@Dee-xo1ch]

How does CSR connect with 'behind an authentication flow' as you say. Why are we concerned about an authentication flow

[@shivam_bhalla]

How does CSR connect with 'behind an authentication flow' as you say? Regardless of CSR or SSR, your endpoints might need some kind of authentication (depending on the product use case). It's within the scope of the problem because you should always spend 1 min to discuss SSR vs CSR and why one may be better than the other. Why are we concerned about an authentication flow? It's a good idea to just spend 10 seconds to let your interviewer know that the endpoint can be guarded behind an authentication system, doesn't hurt you in anyway.

[@IhsanMujdeci]

I think the main reason is that in a web app if the first screen the user is presented with is a login screen there is no real need for SSR, it is a light page with not much if any dynamic content.

[@Threshk]

Can you explain a bit more what you mean by "Inline CSS in JS"? Is that something like styled-components?

[@Rajeshkumar-hs5hi]

Does any compony is asking front-end system design in India?

[@shivam_bhalla]

Yes, system design will be asked anywhere.

[@Pulpdood]

Setting the loading="lazy" attribute on the img tag may help with performance as well although I have yet to try it so take it with a grain of salt

[@Shubham-yc6nz]

Good Video

[@IhsanMujdeci]

I literally had an interview today with Atlassian and they asked me to design this exact board.

[@shivam_bhalla]

How’d your interview go?

[@IhsanMujdeci]

@@shivam_bhalla yeah it went well, answered the questions properly. I had a bit of a hard time understanding the intent of some questions so I had to ask again for clarification. This is for a senior position. I'll try to keep this comment up to date with news.

[@IhsanMujdeci]

@@shivam_bhallaHey I just got feedback. GLOWING review, only 1 thing where I had written down some non functional requirements but I didn't follow up on my own and needed to be nudged to the right place. Basically everything else from communication to decision making, reasoning, API and component design I got really good feedback. Probably like a 24/25 or something. Things that weren't directly in the video (might actually be in there not sure) - Design the query for graphQL - Handle any errors that might happen. - Factor in offline support and or slow connection (shimmer components, use of indexDB) My advice for other people interviewing, don't get caught up in the weeds, refer back to your written down functional and non functional requirements.

[@gamefun2525]

what’s the news bro

[@IhsanMujdeci]

@@gamefun2525 I got through that round extremely well. They only had 1 negative thing to say and 25 positive things. They liked my communication and how I gave alternatives. I just did the final technical round yesterday. I think I did really well. Let's see what they say.

[@Not_Unique]

Hi can you help me in how to start coding?

[@shivam_bhalla]

I started with using teamtreehouse.com (not sponsored by them), I recommend checking them out. In the future, I can make more beginner friendly content.

[@pragya2000788]

Missing data model and normalization.

[@shivam_bhalla]

Hello, data model is at 18:09, the api response data is normalized, the tickets are unique id, and the columns are unique id, no duplicates. This is the official response from JIRA if you look at their api response.

[@zdargahi]

last and not least :D