Scribd
Upload
462 views6 pages

Frontend System Design Handbook: Interview Checklist & Style Guide

This document provides a checklist and guidelines for frontend system design. It covers high level topics such as identifying user requirements, technical stack, security, and performance optimization. It also discusses low level design considerations including code architecture, component design, state management, and testing. The goal is to help engineers approach frontend system design for interviews or real projects in a thorough and structured manner.

Uploaded by

pourush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
462 views6 pages

Frontend System Design Handbook: Interview Checklist & Style Guide

This document provides a checklist and guidelines for frontend system design. It covers high level topics such as identifying user requirements, technical stack, security, and performance optimization. It also discusses low level design considerations including code architecture, component design, state management, and testing. The goal is to help engineers approach frontend system design for interviews or real projects in a thorough and structured manner.

Uploaded by

pourush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

devK de

Frontend System Design Handbook

interview checklist & style guide


Engineering

4 Team siz- 4 User/Client expectationM


4 User bas- 4 Open source vs proprietar?
4 Knowledge bas- 4 Documentation / PRG
4 Compliance/Governance 4 Future Roadmaps

High Level Design


4 Platform identificatior 4 Server Side Architectur-
4 SPA vs MPl 4 Securit?
4 SSR, SSG, CS` 4 State Managemen
4 Tech stacZ 4 Internationalizatior
4 Search Engine Optimizatior 4 E2E testin]
4 CI/CG 4 Tools Integratior
4 User Experienc- 4 Authentication & Authorizatior
4 A/B testin] 4 Quality Assurance & Contro™
4 MVP planning 4 User role management

Low Level Design


4 Code/Folder architectur- 4 Routing managemen
4 Desktop/Mobile first approac¶ 4 CSS optimizationM
4 System breakdowr 4 Lazy loading of moduleM
4 Component Desigr 4 Accessibilit?
4 Form developmen 4 Image optimizationM
4 Storage managemen 4 Pagination, Debouncing, Throttlin]
4 API Desigr 4 Performance: FCP, LCP, TTI, CLÜ
4 Instrumentatior 4 Versionin]
4 Design system 4 Unit testing

https://github.com/devkodeio/frontend-system-design
High Level Design
Product Requirement Document (PRD) / Design Documen*
 Identify Scope/Requiremen
 Review your understanding with stakeholders

Discuss about Design/Wireframd


 Think like an architec
 We should not consider team bandwidth, capacity and time;
 Discuss about Edge casel
 Robustness: Handle SPOF (Single Point of Failure) 

ex: Monitoring, Logging

Identify Businesˆ Identify PlatforÞ


 Is it B2B (business-to-business)†  DesktoÜ
 Is it B2C (business-to-consumer)†  Mobilç
 Is it Internal Product†  Tablet
 Is it Customer facing product?

Identify Users (Know your audience¹


 Conduct surveyl
 Discuss about Location and Devicel
 Internet spee¯
 End Users knowledge base (ex: Technical user
 Pilot Product (sometimes to understand audience)

Identify Design Approac


 Responsive vs Adaptive desig
 Desktop first vs Mobile first

Identify APIˆ
 Rest APIs / Graph APIs / RPF
 JSON / Protocol buffers

Role based managemen*


 Large system needs roles based access and permissionl
 Authentication and Authorizatio
 Read/Write/View Permissionl
 Discuss about Routes/Component access

https://github.com/devkodeio/frontend-system-design
Identify Right Platform (compare frameworks based on the use case!
' Single Page Applications (Unsuitable for Blogs/News based products)

- No reloading of a page at navigation

- No SE
' Multi Page Applications

- Reloading of a page at every page navigatioE


' Progressive Web Applications

- Provides offline support and native like functionalit


' Server Side Rendering

- Better SE
' Important points to discuss:

- Are users on mobile?

- Is SEO needed?

- Is SPA enough?

- Is PWA enough? (Service worker, Web Worker)

- Compare SSR / SSG / CSR

- Any Pricing model? (optional) - Subscriptions based, Paid APIs

- Will my app be Frontend heavy? (or backend heavy)

- Do I have resources for this skill?

- Is your application Canvas (or SVG) heavy? (Figma, Draw.io)

- Is your application webRTC heavy? (Video streaming)


Identify User Flox
' Discuss vision of a produch
' Do we need to build from scratch or we can leverage some existing functionalitie…
' Discuss about authentication and authorization (Google auth / OAuthZ
' Interact with the Product manager to understand the scope before designing the
applicatioE
' Discuss happy scenario…
' Discuss edge case…
' Discuss failing scenarios

Identify MVP (Minimum Viable Product!


' Problem -> Solution -> Build MVP -> MVP to Customer…
' Discuss MVP phase with product manage¿
' Discuss roadmaps and divide product in milestone…
' Slight change in design/approach to make the product better (after MVP release)

Versioning of artifact Experiment based release cycle

' Artifacts tracking (ex: ConfluenceZ Experiment flag, which can help in the
' Rollback & backup mechanisms release cycle.
https://github.com/devkodeio/frontend-system-design
Volume of Operation“
2 Discuss about the end users of the produc
2 Identify QPS (Queries per second
2 Discuss about Load testing/Stress testin
2 Inject analytics in application (ex: Google analytics, Sentry, NewRelic
2 Analytics data helps us to scale the system

SEO (Search Engine Optimization#


2 Crawlin
2 Use of Heading tag+
2 Semantic tag+
2 Site Rankin
2 Sitema
2 Meta Keyword+
2 Organic approach vs Inorganic approac!
2 Use of alt tag+
2 301 Redirects (bad for SEO
2 Robots.tx
2 Open graph protocol (https://ogp.me/) for social graph

Component Based Desig_


2 Component wise deployment cycle (CI/CD
2 Monolith vs Microservice architecturo
2 Micro Frontend (independent dev & deployment for scalability
2 Static components vs Dynamic componentsV
2 IFrame/Shell approach

State Managemen(
2 How to maintain state through the application
2 How to manage users' data
2 State management Libraries (Redux, Flux, NgRX)

Handling API“
2 Polling (Short and Long
2 Web Sockets (Real-time) (ex: chat, shared editors
2 Batch request+
2 GraphQ×
2 Caching GET APIs (Middleware concepts to cache response
2 Server-Sent Events (SSE)

https://github.com/devkodeio/frontend-system-design
Optimizing Image%
 Add alt attributes (Images should be descriptive for SEO
 Load images based on screen size (img srcset
 Image compression (ex: JPEG 2000
 Image sitemap.
 Use SVGs for generic dimensions (in case of stretching of images
 Discuss about image Sprites for icon.
 Discuss about progressive images (ex: Medium.com)
Instrumentatioc
 Measurement and tracking are key for a stable syste[
 MonitorinI
 Error logging (for tracing
 DebugginI
 Logs/Track all events happened in the applicatioS
 Implement Analytics (GA
 Sentry (to capture errors
 Newrelic (to detect failures)
Performance Optimization Technique%
 Webpack to optimized/compressed pages (Code splitting
 Web Vitals (FP, LCP, CLS, etc
 Lighthouse / PageSpeed Insight.
 Fast Loading (Initial load should be fast
 Smooth Operations (Loading indicators / Light/Smooth/Meaningful animations
(to avoid jerks in transitions) / Splash screens) - (dialog with light animations
 Animation directions should be the same (dialog coming from bottom should
close in bottom) - (smooth animation should be added in sidebars for better UX
 Animation between data fetching(APIs request
 Discuss about Caching - ex: API, resource cache (Browser cache / Memory / CDN
/ Disk Cache
 Pagination vs Infinite ScrolŸ
 Meaningful animatioS
 Micro interactions
o ernanc1
G v
 Controlling the workflows and protecting the asset.
 UX Design -> Developers -> Product Managers -> UX Designing -> Q
 Code level governance - like PRs approval (sets standard in your team
 Artifacts/Assets level governance (before go live)

like Product Manager approval, Stakeholders approvals


https://github.com/devkodeio/frontend-system-design
Internationalization (i18n) / Localization (i10n
Localizatio'
Numeric, date and time format6
Singular & Plural6
Use of currenc
Keyboard usag
Symbols, icons and color6
Text and graphics vary with different languages and religions, may be subject to
misinterpretation or viewed as insensitiv
Varying legal requirements

Accessibilitd
Alt attribute6 Multi-device support, slow network speeQ
Aria-labels Color contrast, semantics tags

Securitd
MITY Clickjackino
XSa Content Security Policy (CSPh
CSRF CORS

Quality assurance and contro´


Stable products are successfuš
Specify standards - Code level / Artifacts level / Asset leveš
Git Hooks (pre commit hooks, huskyh
Linters / Static Analyzer6
Unit testino
Workflow testing (User level flows) (Tools - Cypressh
Integration testino
Automation suit
Cross browsers testino
Cross platform testing

NFR (Non Functional Requirement)

Discuss about CI/CD (Docker, Pipeline)

This document is based on the knowledge and experience of the team Devkode.

This document is intended to help frontend developers to approach the system design in
the interviews or to build a real-time project.

devK de
This is document can be considered as a style guide and is not exhaustive.

https://github.com/devkodeio/frontend-system-design

You might also like