Design JIRA Sprint Board - Frontend System Design Guide

Are you gearing up for frontend engineering roles, whether mid-level, senior, staff, or principal? Dive deep into the intricacies of designing a Sprint Board akin to platforms like Jira or Asana. This video will walk you through the R.A.D.I.O framework, tailored to empower you for Frontend System Design interviews. Understand the essence of Requirements, Architecture, Data Model, Interface Definition, and optimization with a hands-on approach.

We've broken down the crucial aspects of functional and non-functional requirements while specifically illustrating how to manage a sprint effectively. Discover the art of creating, reordering, and managing tickets, and the nuances of column management. Delve deep into vital frontend architectural components, data management, API design choices, and advanced optimization strategies. We address edge cases like supporting new ticket creation, infinite scrolling, and real-time drag-and-drop functionalities.

Beyond the functional elements, prioritize non-functional requirements like deciding between SSR and CSR, crafting responsive designs that prioritize the web, providing shimmer loaders for enhanced user experience, ensuring accessibility, and integrating internationalization. Enhance the overall user experience, ensuring it's performant and offers a semblance of real-time interaction.

Timestamps
0:00 - Introduction
1:10 - FrontendLead
2:05 - R.A.D.I.O
2:25 - Requirements
6:28 - Edgecases
7:37 - UI Overview
9:20 - High-Level Architecture
10:31 - Drag & Drop
11:26 - HTTP Options
14:00 - API Design (Request)
16:50 - API Design (Response)
18:04 - Client Side Data Model
18:11 - Network Performance
18:50 - Rendering Performance
19:55 - Javascript Performance
20:49 - Accessibility
21:20 - Observability
22:11 - Security

[shivam_bhalla]

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

[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

[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

[indrapreetsingh]

very informative . Thank you for sharing such a beautifully explanation

[javascriptworld]

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.

[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

[thomashoffmann]

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?

[Threshk]

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

[Ravi_Goyal]

Could you please share this document link

[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)

[macmacmac]

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.

[olegchibikov]

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

[IhsanMujdeci]

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

[Tech-slhp]

This my be a silly question but do I have to let my interviewer know what kind of framework I will be using to answer the systems design problem

[Dee-xoch]

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

[HaibertBuilds]

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

[Rajeshkumar-hshi]

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

[Not_Unique]

Hi can you help me in how to start coding?