Search

Lessons (40)

• Atomic Design & Component Libraries

  Build consistent, reusable interfaces by composing small UI primitives into components, layouts and real pages—without forcing every …

• Next.js Rendering: CSR, SSR, SSG, ISR & Server Components

  … buttons, forms, animations 💡 Keep client components small and at the leaves of the tree. The more stays on …

• Design System Operations

  Run a component library as a reliable product with headless primitives, theming, documentation, visual checks and a safe …

• C4 Architecture Diagrams: Context, Container, Component and Code

  … C4 component diagram A component diagram zooms into one container , not the entire system. Choose a container where …

• React Fundamentals

  … data that changes State is a component's memory . When state changes, React re-renders that component (and …

• React vs Vue vs Angular

  … bold; } </style Angular (standalone component with signals) ts import { Component, signal, computed } from "@angular/core"; @Component({ selector: "app …

• React Internals & Concurrent Rendering

  … unstable keys can cause lost input state, remounts and incorrect UI. Why a component re-renders A component …

• Frontend Testing Strategy

  … The testing trophy, unit tests with Vitest, component tests with Testing Library, API mocking with MSW, and end …

• Scalable Frontend Architecture

  … no order rules lib/http.ts authenticated transport, retries, errors Avoid a global components/ directory becoming the default …

• State Management (Redux, Zustand, TanStack Query)

  … state.items.filter((i) = i.id !== id) })), clear: () = set({ items: [] }), })); // Any component, no Provider needed. Select only what …

• React Hooks in Practice

  … 2. Only call hooks from React functions (components or custom hooks). Why? React identifies each hook by its …

• S — Single Responsibility Principle

  … SRP applies to React components too. jsx // ❌ Fetching + state + formatting + rendering in one component function UserProfile({ id }) { const …

• I — Interface Segregation Principle

  … props A component's props are its interface. Don't pass a giant object when the component only …

• Event-Driven Architecture

  Build systems where components react to events instead of calling each other. Broker vs mediator topologies, the four …

• Frontend Performance & Core Web Vitals

  … split, remove unused libraries, keep work in Server Components. - Break up long tasks: yield to the browser between …

• Kubernetes Cluster Architecture, Simply

  … Node- API: report pod status The key point: components react to the shared record in the API server …

• Structural Patterns: How to Connect Objects

  … used it: Express middleware, React Higher-Order Components ( withRouter(Component) ), TypeScript/NestJS @decorators . --- 3. Facade 🏨 Analogy: A hotel …

• Graphs: BFS & DFS

  … for Shortest path, nearest X, levels Cycles, connected components, topological sort, mazes, backtracking Both run in O(V …

• Internals, Upgrades, Resilience and Interview Questions

  … Report status Key point: components never talk to each other directly . They all watch and update the API …

• Advanced TypeScript for Frontend

  … source of truth, not to make a simple component unreadable. ts type ApiResponse<T = T extends { id: infer …

• Architecture Patterns at Scale

  … Success is a measurable operating improvement, not the count of microservices. Check your understanding Which component would you …

• AWS: Start Here

  … For now, identify each component's responsibility. Understand the shared responsibility model AWS manages physical buildings, hardware, and …

• SOLID at a Glance

  … interface. - SOLID applies to modules, functions and React components too, not only classes. Common misunderstandings - ❌ "SOLID means more …

• What Are Design Patterns?

  … Proxy(obj, handler) Proxy A React Higher-Order Component Decorator axios.create({ baseURL }) Factory A module-level const …

• O — Open/Closed Principle

  … Code Extensions Webpack / Vite Plugins and loaders React Components via children and render props ESLint Custom rules None …

• DRY: Don't Repeat Yourself

  … A repository function Repeated UI markup A reusable component mermaid flowchart LR S["📜 One Zod schema<br/ userSchema …

• AWS Interview Questions: Clear Answers

  … The app saves the order in RDS, then a reliable messaging path triggers confirmation work.” For each component …

• Python and Math Foundations with Runnable Examples

  … The dot product multiplies matching components and adds them; the bias supplies an offset. Normalize using training data …

• Trees & Binary Search Trees

  … your computer, the HTML DOM , JSON objects, React component trees, and database indexes (B-trees). Tree vocabulary ![Tree …

• TypeScript Essentials

  … reusable, type-safe functions and components. - Utility types ( Partial , Pick , Omit , Record ) reshape existing types. - Validate external data …

• API Gateway, BFF & Service Discovery

  … recs.map(({ id, title, thumbUrl }) = ({ id, title, thumbUrl })), }); }); A Next.js server (Server Components and Route Handlers) often …

• VPC Endpoints, Transit Gateway and Hybrid Networking

  … path between two resources and tells you which component blocks it, without sending packets. Checklist when "it cannot …

• Choosing a Programming Language

  … desktop Instagram, most ML research Docker, Kubernetes Firefox components, Cloudflare Compiled, interpreted or JIT? mermaid flowchart LR subgraph …

• MVC, MVP & MVVM

  … The hook can be tested with renderHook ; the component stays simple. (This is also the "container / presentational" split …

• What Is Software Architecture?

  … databases, queues inside the system Developers, ops 3. Component Main modules inside one container Developers 4. Code Classes …

• REST API Design

  … The user, content: { application/json: { schema: { $ref: " /components/schemas/User" } } } } "404": { description: User not found } Checklist - [ ] Plural nouns …

• Creational Patterns: How to Make Objects

  … match each other. js // Two families of UI components that must not be mixed const lightTheme = { createButton: () = ({ render …

• Choosing an Architecture

  … different scaling needs Distributed-systems complexity Event-driven Components react to published facts Many reactions to the same …

• Cost Optimization and the Well-Architected Framework

  … tests and findings Reliability Can it withstand a component loss? Failure drill and restore timing Performance efficiency Where …

• CloudWatch: Know What Your App Is Doing

  … X-Ray/OpenTelemetry traces a request across components. CloudTrail records AWS account actions, such as who changed a …