madhu-sagar/system-design-react-code-examples madhu-sagar/system-design-react-code-examples

  • Stars
    star
    491
  • Rank 89,636 (Top 2 %)
  • Language
  • License
    MIT License
  • Created almost 3 years ago
  • Updated almost 3 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
madhu-sagar/system-design-react-code-examples
github

madhu-sagar

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A curation of code examples and in depth technical implementation approaches to solve the common frontend system design issues in React.

system-design-react-code-examples

A curation of code examples and in depth technical implementation approaches to solve the common frontend system design issues in React.

Target Audience

  1. advanced beginner/intermediate developers wishing to get better technical understanding
  2. developers exploring how to do handle technical things in their own projects.
  3. for my own reference as I need something like this for my own learning.

Philosophy

The philosophy behind this endeavour is to document as much as possible a practical guide for someone looking to level-up fast/ implement things.

โ€œTalk is cheap. Show me the code.โ€ โ€” Linus Torvalds

Architecture Deep dive

Engineering Design

  • Team size
  • User base
  • Knowledge base
  • Compliance/Governance
  • User/Client expectations
  • Open source vs proprietary
  • Documentation / PRD
  • Future Roadmaps

High Level Design

  • Platform identification
  • SPA vs MPA
  • SSR, SSG, CSR
  • Tech stack
  • Search Engine Optimization
  • CI/CD
  • User Experience
  • A/B testing
  • MVP planning
  • Server Side Architecture
  • Security
  • State Management
  • Internationalization - example
  • E2E testing
  • Tools Integration
  • Authentication & Authorization
  • Quality Assurance & Control
  • User role management - example

Low Level Design

High Level Design details


Product Requirement Document (PRD) / Design Document

  • Identify Scope/Requirement
  • Review your understanding with stakeholders

Discuss about Design/Wireframe

  • Think like an architect.
  • We should not consider team bandwidth, capacity and time.
  • Discuss about Edge cases.
  • Robustness: Handle SPOF (Single Point of Failure) ex: Monitoring, Logging

Identify Business

  • Is it B2B (business-to-business)?
  • Is it B2C (business-to-consumer)?
  • Is it Internal Product?
  • Is it Customer facing product?

Identify Platform

  • Desktop
  • Mobile
  • Tablet

Identify Users (Know your audience)

  • Conduct surveys
  • Discuss about Location and Devices
  • Internet speed
  • End Users knowledge base (ex: Technical user)
  • Pilot Product (sometimes to understand audience)

Identify Design Approach

  • Responsive vs Adaptive design
  • Desktop first vs Mobile first

Identify APIs

  • Rest APIs / Graph APIs / RPC
  • JSON / Protocol buffers

Role based management

  • Large system needs roles based access and permissions
  • Authentication and Authorization
  • Read/Write/View Permissions
  • Discuss about Routes/Component access

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 SEO
  • Multi Page Applications
    • Reloading of a page at every page navigation.
  • Progressive Web Applications
  • Server Side Rendering
    • Better SEO
  • 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) - example
    • Is your application webRTC heavy? (Video streaming) - example

Identify User Flow

  • Discuss vision of a product.
  • Do we need to build from scratch or we can leverage some existing functionalities
  • Discuss about authentication and authorization (Google auth / OAuth)
  • Interact with the Product manager to understand the scope before designing the application.
  • Discuss happy scenarios.
  • Discuss edge cases.
  • Discuss failing scenarios

Identify MVP (Minimum Viable Product)

  • Problem -> Solution -> Build MVP -> MVP to Customers
  • Discuss MVP phase with product manager
  • Discuss roadmaps and divide product in milestones
  • After MVP release there can be a slight change in design/approach to make the product better

Volume of Operations

  • Discuss about the end users of the product
    • Observe the data in something like Google Analytics for split by device/location/OS etc in production later.
  • Identify QPS (Queries per second)
  • Discuss about Load testing/Stress testing
  • Inject analytics in application (ex: Google analytics, Sentry, NewRelic)
    • For cost-effectiveness instead of using ready-made solution, can define our events, using Kafka to stream the events to a backend server and use a Grafana dashboard if required.
  • Analytics data helps us to scale the system

SEO (Search Engine Optimization)


Component Based Design


State Management


Handling APIs


Optimizing Images

  • Add alt attributes (Images should be descriptive for SEO)
  • Load images based on screen size (img srcset)
  • Image compression (ex: JPEG 2000)
  • Image sitemaps
  • Use SVGs for generic dimensions (in case of stretching of images)
  • Discuss about image Sprites for icons
  • Discuss about progressive images (ex: Medium.com)

Instrumentation

  • Measurement and tracking are key for a stable system
  • Monitoring - code
  • Error logging (for tracing)] - Using Google Analytics
  • Debugging - Custom Tracking
  • Logs/Track all events happened in the application - code
  • Implement Analytics (GA) - this
  • Sentry (to capture errors) - example - code
  • Newrelic (to detect failures) - doc

Versioning of artifacts

  • Artifacts tracking (ex: Confluence)
  • Rollback & backup mechanisms

Performance Optimization Techniques


Internationalization (i18n) / Localization (i10n)

  • Localization - example live - code
  • Numeric, date and time formats - date-fns library
  • Singular & Plurals
  • Use of currency
  • Keyboard usage - example
  • Symbols, icons and colors
  • Text and graphics vary with different languages and religions, may be subject to misinterpretation or viewed as insensitive
  • Varying legal requirements

Accessibility


Security


Quality assurance and control

  • Stable products are successful

  • Specify standards - Code level / Artifacts level / Asset level

    • Code level - Git
    • Artifacts level - Artifactory
    • Asset level - Git/ Blob storage(S3 etc)/CDN

  • Git Hooks (pre commit hooks, husky)

  • Linters / Static Analyzers

  • Unit testing

  • Workflow testing (User level flows) (Tools - Cypress)

    • Cypress has a demo real world app that uses best practices - code
    • Artsy.net - code

  • Integration testing

    • e2e integration test using Mocha and Pupppeteer - code

  • Automation Suite

    • Using webdriver IO that allows using sauce,browserstack etc - code

  • Cross browsers testing

  • Cross platform testing

    • Cypress demo app - code

Governance

  • Controlling the workflows and protecting the assets
  • UX Design -> Developers -> Product Managers -> UX Designing -> QA
  • Code level governance - like PRs approval (sets standard in your team)
  • Artifacts/Assets level governance (before go live)
  • like Product Manager approval, Stakeholders approvals

Experiment based release cycle

  • Experiment flag, which can help in the release cycle

    Example : In a recent codebase I worked, we had a flag in the frontend codebase that was enabled/disabled based on the response received from API(in turn , API routes in node.js server were handled in 2 ways : 1) the server code read the values based on the server configuration(ENV values) for that particular deployment 2)actual backend that had its configuration as well) affecting the user experience and user journey.


NFR (Non Functional Requirement)

  • Discuss about CI/CD (Docker, Pipeline)
    • Alexander Kachkaev's personal website has a good pipeline setup - see code

Codebases + Guides Worth Mentioning Here

Boilerplate Code

Setting up Development Environment

License

This repository is MIT licensed. Read more