๐๐ผ๐ ๐๐ผ ๐ฎ๐ฝ๐ฝ๐ฟ๐ผ๐ฎ๐ฐ๐ต ๐ฎ ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ฝ๐ฟ๐ผ๐ฏ๐น๐ฒ๐บ ๐ถ๐ป ๐ฎ ๐ณ๐ฟ๐ผ๐ป๐-๐ฒ๐ป๐ฑ ๐๐๐๐๐ฒ๐บ ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ฟ๐ผ๐๐ป๐ฑ?
For any front-end system design round, we should follow the RADIO framework.
Let's have an overview of what it is-
๐ฅ๐ฒ๐พ๐๐ถ๐ฟ๐ฒ๐บ๐ฒ๐ป๐ ๐๐ป๐ฎ๐น๐๐๐ถ๐ - Understand the requirements by asking as many questions as you can. Try to understand the scope of the application and who are the end users. Also, identify the functional and the non-functional requirements.
๐๐ฟ๐ฐ๐ต๐ถ๐๐ฒ๐ฐ๐๐๐ฟ๐ฒ (๐๐ถ๐ด๐ต ๐๐ฒ๐๐ฒ๐น ๐๐ฒ๐๐ถ๐ด๐ป) - Defines the high-level architecture of the application. Identify the key components within the frontend system and how it is interacting with the backend. Like, if we need a Query Manager that can handle network requests from the client to the server and cache, any state management mechanism that is needed, how the client will interact with the server as well as the cache, how the data will be stored at the client side, whether the pages will be rendered by CSR or SSR, etc
๐๐ฎ๐๐ฎ ๐ ๐ผ๐ฑ๐ฒ๐น - Defines the table (entities) that will be used to store the client side data, the fields used, and its relationship with the component/s., how it should be synced with the server after the initial entry in the client side. It should also include normalization of the data.
๐๐ป๐๐ฒ๐ฟ๐ณ๐ฎ๐ฐ๐ฒ (๐๐ฃ๐๐) - Defines the APIs along with their request and response payloads which are needed for the client to communicate with the server.
๐ข๐ฝ๐๐ถ๐บ๐ถ๐๐ฎ๐๐ถ๐ผ๐ป - This is a vast topic in itself which can include optimization of components, assets, user experience, network, a11y, security, multi-device support, performance, etc.