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
