Search

Lessons (26)

• 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 …

• 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 …

• Frontend Testing Strategy

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

• 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 …

• Kubernetes Cluster Architecture

  … the control plane and worker nodes](/img/kubernetes/architecture.svg) The control plane (the brain) Component Role Analogy …

• 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 …

• 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 …

• 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 …

• 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 …

• 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 …

• Behavioral Patterns II: Chain, Template, Iterator, Mediator, Memento, Visitor

  … You've used it: a Redux store between components, an event bus, an API gateway, an orchestrator in …