Kompletny Przewodnik - Rozmowa Rekrutacyjna Frontend Developer 2026

Sławomir Plamowski 15 min czytania
angular css frontend javascript pytania-rekrutacyjne react rozmowa-rekrutacyjna typescript vue

Rozmowa na stanowisko Frontend Developer w 2026 roku to nie jest już tylko "czy znasz JavaScript i potrafisz zrobić stronę". To sprawdzian z całego ekosystemu - od głębokiej znajomości języka, przez framework, TypeScript, CSS, po architekturę komponentów i narzędzia deweloperskie. Kandydaci, którzy przychodzą nieprzygotowani na tę szerokość wymagań, odpadają już na pierwszych pytaniach.

W tym przewodniku znajdziesz kompletną mapę tego, co sprawdzają rekruterzy na rozmowach frontend, jakie pytania padają najczęściej, i jak się do nich przygotować. Każda sekcja zawiera linki do szczegółowych artykułów, gdzie znajdziesz konkretne pytania z odpowiedziami.

Co sprawdzają na rozmowie Frontend Developer

Zanim zagłębimy się w szczegóły, musisz zrozumieć strukturę tego, co rekruterzy oceniają. Rozmowa frontend składa się z pięciu głównych obszarów:

Obszar Waga Co sprawdzają
JavaScript Core 30-35% ES6+, asynchroniczność, closure, this, prototypy
Framework 25-30% React/Angular/Vue - zależnie od stanowiska
TypeScript 10-15% Typy, interfejsy, generyki
CSS/HTML 15-20% Layout, responsive, semantyka, dostępność
Narzędzia & Architektura 10-15% Git, bundlery, testing, komponentyzacja

Wagi różnią się między firmami. Startupy mogą kłaść większy nacisk na szybkie prototypowanie i znajomość frameworka. Korporacje często sprawdzają głębiej JavaScript i TypeScript. Firmy produktowe pytają więcej o architekturę i skalowanie. Ale JavaScript core jest fundamentem wszędzie - bez solidnej znajomości języka, cała reszta się wali.

Fiszki Online - Wszystkie pakiety

Chcesz więcej pytań rekrutacyjnych?

Fiszki Online to ponad 800 pytań z 13 technologii - JavaScript, React, TypeScript, Node.js, SQL i więcej. Natychmiastowy dostęp na 30 dni, nauka na każdym urządzeniu.

Sprawdź za 49,99 zł →

JavaScript - Fundament Każdej Rozmowy

Możesz być ekspertem od React, ale jeśli nie potrafisz wyjaśnić jak działa event loop albo co to jest closure, rozmowa skończy się szybko. JavaScript to fundament i rekruterzy zaczynają właśnie od niego.

Tematy, które musisz znać

Scope i Closure to absolutna podstawa. Musisz rozumieć różnicę między var, let i const nie tylko pod kątem hoisting, ale też scope. Closure - czyli funkcja "pamiętająca" zmienne z zewnętrznego scope - pojawia się na każdej rozmowie.

// Klasyczne pytanie: co wypisze ten kod?
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Odpowiedź: 3, 3, 3 (nie 0, 1, 2!)
// Dlaczego? var ma function scope, nie block scope
// Wszystkie callbacki odwołują się do tej samej zmiennej i

// Jak to naprawić?
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Teraz: 0, 1, 2 - let ma block scope

Asynchroniczność to drugi filar. Event loop, callback queue, microtasks vs macrotasks, Promise, async/await. Rekruterzy uwielbiają pytania typu "w jakiej kolejności wyświetlą się te console.log".

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

// Kolejność: 1, 4, 3, 2
// Dlaczego 3 przed 2? Microtasks (Promise) mają priorytet nad macrotasks (setTimeout)

this w JavaScript to pułapka dla wielu kandydatów. Wartość this zależy od tego, jak funkcja jest wywołana, nie gdzie jest zdefiniowana. Arrow functions nie mają własnego this - używają this z otaczającego scope.

Prototypy i dziedziczenie - nawet jeśli używasz class syntax, pod spodem to wciąż prototypy. Rekruterzy pytają o prototype chain, Object.create, różnicę między proto a prototype.

Szczegółowe pytania z JavaScript z odpowiedziami znajdziesz w artykule: 15 Najtrudniejszych Pytań Rekrutacyjnych z JavaScript →

Framework: React vs Angular vs Vue

Na 90% ofert pracy frontend wymagany jest konkretny framework. Nie musisz znać wszystkich - potrzebujesz głębokiej znajomości jednego. Ale warto rozumieć różnice, bo pytanie "dlaczego React a nie Angular?" pada regularnie.

React - najczęściej wymagany

React dominuje rynek i prawdopodobnie to właśnie o niego będziesz pytany. Kluczowe tematy:

Hooks - useState, useEffect, useCallback, useMemo, useRef. Musisz wiedzieć kiedy używać którego i jakie problemy rozwiązują. Szczególnie ważne: kiedy nie używać useMemo/useCallback (premature optimization).

// Pytanie: jaki jest problem z tym kodem?
function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    fetchResults(query).then(setResults);
  }, []); // ❌ Brak query w dependencies!

  return <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
}

// Poprawnie:
useEffect(() => {
  fetchResults(query).then(setResults);
}, [query]); // ✅ Reaguje na zmiany query

Zarządzanie stanem - kiedy useState wystarczy, kiedy Context API, kiedy Redux/Zustand. Rekruterzy sprawdzają, czy rozumiesz trade-offy, nie tylko czy znasz API.

Virtual DOM i reconciliation - jak React decyduje, co re-renderować? Dlaczego key w listach jest ważny? Co to jest React Fiber?

React 19 - jeśli rekrutujesz w 2026, spodziewaj się pytań o najnowsze funkcje: use() hook, Actions, Server Components, nowe hooki formularzy.

Szczegółowe pytania z React z odpowiedziami:

Angular - enterprise i duże aplikacje

Angular to wybór dla dużych aplikacji enterprise. Jeśli rekrutujesz do korporacji lub software house'u pracującego z bankami, ubezpieczycielami, telekomunikacją - prawdopodobnie będzie Angular.

Kluczowe tematy Angular:

  • Dependency Injection - jak działa, providedIn, hierarchia injectorów
  • RxJS - Observable, Subject, operators (map, filter, switchMap, mergeMap)
  • Change Detection - Default vs OnPush, kiedy Angular sprawdza zmiany
  • Signals (Angular 16+) - nowe podejście do reaktywności
  • Lazy loading modułów i standalone components

Angular 19 wprowadził zoneless change detection - to będzie gorący temat na rozmowach w 2026.

Szczegółowe pytania z Angular z odpowiedziami:

Vue - prostota i elastyczność

Vue jest popularny w mniejszych firmach i startupach. Kluczowe tematy:

  • Composition API vs Options API
  • Reaktywność - ref(), reactive(), computed()
  • Lifecycle hooks
  • Vuex/Pinia do zarządzania stanem
  • Vue 3 features - Teleport, Suspense, fragmenty

Która wiedza jest uniwersalna?

Niezależnie od frameworka, rekruterzy sprawdzają te same koncepcje:

Koncept React Angular Vue
Cykl życia komponentu useEffect ngOnInit, ngOnDestroy onMounted, onUnmounted
Zarządzanie stanem useState, Redux Services, NgRx ref, Pinia
Komunikacja parent-child props, callbacks @Input, @Output props, emit
Reaktywność Virtual DOM Zone.js / Signals Proxy-based

TypeScript - Czy Jest Wymagany?

Krótka odpowiedź: tak, w 2026 roku TypeScript jest praktycznie standardem. Długa odpowiedź: zależy od firmy, ale nawet jeśli projekt jest w czystym JS, znajomość TypeScript to duży plus.

Co musisz wiedzieć

Podstawowe typy - string, number, boolean, array, object, any, unknown, never, void. Różnica między any a unknown (any wyłącza type checking, unknown wymusza sprawdzenie typu przed użyciem).

Interfejsy i typy - kiedy interface, kiedy type alias? Interface jest rozszerzalny (declaration merging), type jest bardziej elastyczny (union types, mapped types).

// Interface - rozszerzalny
interface User {
  id: number;
  name: string;
}

interface User {  // declaration merging
  email: string;
}

// Type - bardziej elastyczny
type Status = 'pending' | 'active' | 'deleted';  // union type
type UserWithStatus = User & { status: Status };  // intersection

Generyki - to poziom mid/senior. Musisz umieć napisać funkcję generyczną i wyjaśnić, po co są generyki.

// Klasyczne pytanie: napisz funkcję, która zwraca pierwszy element tablicy
// z zachowaniem typu

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = first([1, 2, 3]);      // num: number | undefined
const str = first(['a', 'b']);     // str: string | undefined

Type guards i narrowing - jak TypeScript zawęża typy w runtime.

function processValue(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript wie, że tu value jest string
    return value.toUpperCase();
  }
  // Tu value jest number
  return value.toFixed(2);
}

Szczegółowe pytania z TypeScript z odpowiedziami: TypeScript dla Początkujących - Pytania Rekrutacyjne →

CSS i HTML - Niedoceniane Tematy

Wielu kandydatów skupia się na JavaScript i frameworku, traktując CSS jako "coś co jakoś działa". To błąd. Na rozmowach frontend pytania o CSS padają regularnie i często eliminują kandydatów, którzy ich nie spodziewali.

CSS Layout - Flexbox i Grid

To absolutna podstawa. Musisz wiedzieć:

Flexbox - jednowymiarowy layout. justify-content, align-items, flex-grow/shrink/basis, flex-direction, flex-wrap.

Grid - dwuwymiarowy layout. grid-template-columns/rows, grid-area, fr jednostka, auto-fill vs auto-fit.

/* Klasyczne pytanie: wycentruj element w pionie i poziomie */

/* Rozwiązanie Flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rozwiązanie Grid */
.container {
  display: grid;
  place-items: center;
}

Kiedy Flexbox, kiedy Grid? Flexbox dla layoutu w jednym kierunku (navbar, lista przycisków). Grid dla layoutu dwuwymiarowego (siatka kart, layout strony). Możesz je łączyć - Grid dla głównego layoutu, Flexbox wewnątrz komponentów.

Pozycjonowanie i Box Model

Position - static, relative, absolute, fixed, sticky. Musisz wiedzieć, względem czego pozycjonuje się element z position: absolute (najbliższy przodek z position innym niż static).

Box Model - content, padding, border, margin. Różnica między box-sizing: content-box a border-box.

Specificity - jak CSS decyduje, który styl wygrywa? inline > ID > class > element. Ważność: !important > inline > reszta.

Responsive Design

Media queries, mobile-first vs desktop-first, jednostki względne (em, rem, vh, vw, %).

/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

HTML Semantyczny i Dostępność

Pytania o semantyczny HTML i accessibility (a11y) stają się coraz częstsze.

  • Kiedy używać <article>, <section>, <aside>, <nav>?
  • Różnica między <button> a <div onclick>
  • Atrybuty ARIA - aria-label, aria-hidden, role
  • Kolejność focusu i nawigacja klawiaturą

Szczegółowe pytania z CSS z odpowiedziami: CSS Flexbox i Grid - Kompletny Przewodnik →

Fiszki Online - Wszystkie pakiety

Chcesz więcej pytań rekrutacyjnych?

Fiszki Online to ponad 800 pytań z 13 technologii - JavaScript, React, TypeScript, Node.js, SQL i więcej. Natychmiastowy dostęp na 30 dni, nauka na każdym urządzeniu.

Sprawdź za 49,99 zł →

Narzędzia i Ekosystem

Rekruterzy sprawdzają nie tylko czy potrafisz pisać kod, ale czy rozumiesz środowisko, w którym pracujesz.

Git - Podstawy i Workflow

Każda firma używa Git. Podstawowe komendy (add, commit, push, pull, branch, merge) to minimum. Na rozmowach padają pytania o:

  • Różnica między merge a rebase
  • Jak cofnąć commit (reset vs revert)
  • Jak rozwiązać konflikt merge
  • Git flow vs trunk-based development
# Pytanie: jak cofnąć ostatni commit zachowując zmiany?
git reset --soft HEAD~1

# Pytanie: jak cofnąć commit na wspólnym branchu bez przepisywania historii?
git revert <commit-hash>

Szczegółowe pytania z Git: Git dla Programistów - Pytania Rekrutacyjne →

Package Managers i Bundlery

npm vs yarn vs pnpm - różnice, lockfile, node_modules.

Bundlery - Webpack, Vite, esbuild, Turbopack. Nie musisz znać konfiguracji na pamięć, ale powinieneś rozumieć:

  • Po co są bundlery (łączenie modułów, tree shaking, code splitting)
  • Różnica między dev a production build
  • Czym jest source map

Testing

Pytania o testy są coraz częstsze, szczególnie na stanowiska mid/senior:

  • Unit tests (Jest, Vitest)
  • Component tests (React Testing Library, Vue Test Utils)
  • E2E tests (Cypress, Playwright)
  • Czym jest TDD i czy go stosujesz
// Przykład testu komponentu React
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

test('increments counter on button click', async () => {
  render(<Counter />);

  expect(screen.getByText('Count: 0')).toBeInTheDocument();

  await userEvent.click(screen.getByRole('button', { name: /increment/i }));

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

System Design dla Frontendowców

Na stanowiskach mid i senior spodziewaj się pytań o architekturę. Nie tak zaawansowanych jak backend system design, ale nadal wymagających.

Architektura Komponentów

Jak organizujesz komponenty? Atomic Design? Feature-based? Jakie są trade-offy?

# Struktura feature-based (popularna w 2026)
src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── index.ts
│   ├── products/
│   └── cart/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── app/

Zarządzanie Stanem

Kiedy stan lokalny, kiedy globalny? Jak uniknąć prop drilling? Server state vs client state (React Query, SWR).

Performance

  • Code splitting i lazy loading
  • Memoization (React.memo, useMemo, useCallback)
  • Virtualizacja długich list
  • Optymalizacja obrazów (lazy loading, next/image, srcset)
  • Core Web Vitals (LCP, FID/INP, CLS)

Pytania typu "Zaprojektuj..."

Przykładowe pytania system design dla frontend:

  • "Zaprojektuj komponent autocomplete z debounce"
  • "Jak zbudujesz infinite scroll?"
  • "Zaprojektuj system powiadomień toast"
  • "Jak zorganizujesz formularze w dużej aplikacji?"

Plan Przygotowań: 3 Tygodnie do Rozmowy

Oto sprawdzony harmonogram przygotowań. Zakłada 1.5-2 godziny dziennie. Jeśli masz więcej czasu, możesz go skrócić.

Tydzień 1: JavaScript i Podstawy

Dni 1-3: JavaScript Core

  • Scope, closure, hoisting
  • this i arrow functions
  • Prototypy i dziedziczenie
  • Praktyka: odpowiedz na głos na 10 pytań z naszego zestawu JavaScript

Dni 4-5: Asynchroniczność

  • Event loop, call stack, callback queue
  • Promise, async/await
  • Microtasks vs macrotasks
  • Praktyka: rozwiąż 5 zadań z kolejnością wykonania console.log

Dni 6-7: ES6+ Features

  • Destructuring, spread/rest
  • Map, Set, WeakMap, WeakSet
  • Optional chaining, nullish coalescing
  • Modules (import/export)

Tydzień 2: Framework i TypeScript

Dni 1-3: Twój Framework (React/Angular/Vue)

  • Cykl życia komponentu
  • Zarządzanie stanem
  • Hooks (React) / Signals (Angular) / Composition API (Vue)
  • Praktyka: zbuduj mały projekt od zera (todo list, prosty dashboard)

Dni 4-5: TypeScript

  • Podstawowe typy i interfejsy
  • Generyki
  • Type guards
  • Praktyka: przepisz swój mały projekt na TypeScript

Dni 6-7: Zaawansowane tematy frameworka

  • Performance optimization
  • Testing komponentów
  • Najnowsze features (React 19 / Angular 19 / Vue 3.4)

Tydzień 3: CSS, Narzędzia i Mock Interviews

Dni 1-2: CSS

  • Flexbox i Grid
  • Pozycjonowanie i Box Model
  • Responsive design
  • Praktyka: zbuduj layout strony bez frameworka CSS

Dni 3-4: Narzędzia i Ekosystem

  • Git workflow
  • Build tools (Vite, Webpack)
  • Testing (Jest, React Testing Library, Cypress)

Dni 5-7: Mock Interviews

  • Odpowiadaj na pytania na głos (nagraj się)
  • Rozwiązuj zadania praktyczne z timerem
  • Przećwicz "myślenie na głos" podczas kodowania
  • Przygotuj pytania dla rekrutera

Najczęstsze Błędy Kandydatów

Po przeprowadzeniu wielu rozmów frontend, widzę powtarzające się wzorce błędów:

Błąd 1: Znajomość frameworka bez JavaScript

"Znam React" ale nie potrafi wyjaśnić, jak działa this albo co to closure. Framework to abstrakcja nad JavaScript - bez znajomości języka, nie zrozumiesz dlaczego rzeczy działają (lub nie działają).

Błąd 2: Ignorowanie CSS

Kandydat świetnie radzi sobie z logiką, ale na pytanie "jak wycentrować element" szuka odpowiedzi na Stack Overflow. CSS jest częścią pracy frontend developera. Musisz go znać.

Błąd 3: Brak praktyki "na głos"

Wiesz wszystko, ale pod presją rozmowy nie możesz wyartykułować myśli. Jedyne rozwiązanie: praktyka mówienia na głos. Nagrywaj się odpowiadającego na pytania.

Błąd 4: Nieznajomość najnowszych wersji

React 19, Angular 19, Vue 3.4 - rekruterzy pytają o najnowsze features. Jeśli nie wiesz co to Server Components albo Signals, wyglądasz na kogoś, kto nie śledzi branży.

Błąd 5: Brak pytań do rekrutera

"Nie mam pytań" to sygnał, że nie myślisz poważnie o tej roli. Przygotuj minimum 3-5 pytań o zespół, projekt, stack, kulturę pracy.

Podsumowanie: Checklist Przed Rozmową

Przed rozmową upewnij się, że:

JavaScript:

  • Potrafisz wyjaśnić closure na przykładzie
  • Rozumiesz event loop i kolejność wykonania
  • Znasz różnice var/let/const
  • Wiesz jak działa this

Framework:

  • Znasz cykl życia komponentu
  • Rozumiesz zarządzanie stanem
  • Potrafisz zoptymalizować wydajność
  • Znasz najnowsze features (React 19 / Angular 19)

TypeScript:

  • Potrafisz napisać interfejs i typ
  • Rozumiesz generyki
  • Znasz type guards

CSS:

  • Flexbox - justify-content, align-items, flex properties
  • Grid - grid-template, grid-area
  • Pozycjonowanie - relative, absolute, fixed, sticky
  • Responsive design i media queries

Narzędzia:

  • Git - branch, merge, rebase, reset, revert
  • npm/yarn - podstawowe komendy
  • Podstawy testowania

Soft skills:

  • Przygotowane pytania dla rekrutera
  • Przećwiczone odpowiedzi behawioralne (STAR)
  • Praktyka "myślenia na głos"

Zobacz też

Chcesz Więcej Pytań na Rozmowę Frontend?

Ten artykuł to mapa - pokazuje, co musisz wiedzieć. Ale prawdziwe przygotowanie wymaga praktyki z konkretnymi pytaniami.

Mamy zestawy pytań dla każdej technologii frontend - JavaScript (150 pytań), React (50 pytań), Angular (50 pytań), TypeScript (33 pytania), CSS (54 pytania) i więcej. Każde pytanie z odpowiedzią w formacie "30 sekund / 2 minuty" - dokładnie tak, jak wyglądają prawdziwe rozmowy.

Zdobądź Pełny Dostęp do Wszystkich Pytań →

Lub wypróbuj za darmo:

Napisane przez zespół Flipcards, na podstawie doświadczeń z rozmów rekrutacyjnych w firmach technologicznych i software house'ach w Polsce i za granicą.

Autor

Autor

Zespół Flipcards

Ponad 15 lat doświadczenia w branży IT i setki przeprowadzonych rozmów technicznych w firmach takich jak BNY Mellon, UBS i wiodących fintechach.

Chcesz więcej pytań rekrutacyjnych?

To tylko jeden temat z naszego kompletnego przewodnika po rozmowach rekrutacyjnych. Uzyskaj dostęp do 800+ pytań z 13 technologii.

Kup pełny dostęp Zobacz bezpłatny podgląd
Powrót do blogu

Zostaw komentarz

Pamiętaj, że komentarze muszą zostać zatwierdzone przed ich opublikowaniem.