technifyed

Interview preparation roadmap · Technology

React in depth on top of solid JavaScript, HTML and CSS, plus the coding and UI design rounds.

ReactJavaScriptUI

0 / 19 complete · 13 core · 6 other · 103 subtopics

0%

Start here

  1. 01Interview foundations
  2. 02Coding
  3. 03Web fundamentals
  4. 04React in depth
  5. 05Practice
  6. 06Company & final prep
CoreCommonly assessedGood to knowRole-dependentAdvancedFor deeper interviewsOptionalNot needed by everyoneCompletedYour progressYou are hereNext up
  1. 01Interview foundations

    What every interviewer sees first.

    1. 01.1Resume

      CoreBeginner3–5 h

      A one-page resume you can defend line by line.

      What this covers

      • One-page format — Reverse-chronological, clean fonts, no photos or tables that confuse parsers.
      • Project bullets — Action + what you built + a number (users, speed, accuracy).
      • Skills section — Only skills you can answer questions on for two minutes.
      • ATS readability — Export a text-based PDF and check it with a parser.
      • Working links — GitHub, LinkedIn and a live project link that open.
      • Tailoring — Reorder bullets to match the job description.

      What to practise

      • Run your PDF through a parser test
      • Rewrite each bullet as action + result
      • Remove any skill you can't explain for 2 minutes

      Common questions

      • Walk me through your resume.
      • Which project here are you most proud of, and why?
      • Why is this skill on your resume?

      Free resources

      • OpenResume — Free ATS-friendly resume builder and parser test (Free)
      • Jake's Resume (Overleaf) — The LaTeX resume template most SDE freshers use (Free)
      • Resume Worded — Resume and LinkedIn scoring (Free plan)
      • Jobscan — Match your resume against a job description (Free plan)

      Free courses

    2. 01.2Tell me about yourself

      CoreBeginner1–2 h

      A 60–90 second answer: present, past, why this role.

      What this covers

      • Present — Who you are now: degree, year, focus.
      • Past — One or two proof points: a project, internship or result.
      • Future — Why this role and this company next.
      • Length — 60–90 seconds; stop before you list everything.
      • Delivery — Calm pace and eye contact, not a memorised script.

      What to practise

      • Write it, then say it out loud 5 times
      • Record yourself and cut anything over 90 seconds

      Common questions

      • Tell me about yourself.
      • Why should we hire you?
      • Where do you see yourself in a few years?

      Free resources

      Free courses

    3. 01.3Behavioral & STAR

      CoreBeginner3–4 h

      Stories about teamwork, conflict and failure, told with STAR.

      What this covers

      • STAR structure — Situation, task, action, result. Spend most of the time on action.
      • Story bank — 6–8 real stories you can reuse across questions.
      • Teamwork & conflict — Disagreeing respectfully and what you changed.
      • Failure & weakness — A real one, what you learned, what you do now.
      • Ownership — Times you took initiative without being asked.
      • Common HR questions — Why us, why you, strengths, relocation.

      What to practise

      • Write 6 stories in STAR form
      • Map each story to 2–3 common questions
      • Practise one story with a friend

      Common questions

      • Tell me about a time you failed.
      • Describe a conflict in a team and what you did.
      • What is your biggest weakness?

      Free resources

      Free courses

  2. 02Coding

    Common in product companies.

    1. 02.1Programming fundamentals

      CoreBeginner6–10 h

      One language you know well: syntax, memory, complexity.

      What this covers

      • One language deeply — C++, Java or Python: syntax, standard library, quirks.
      • Time & space complexity — Big-O of loops, recursion and common operations.
      • Recursion — Base cases, the call stack, when it overflows.
      • Memory basics — Stack vs heap, references vs values, garbage collection.
      • Strings & arrays — Immutability, copying and slicing costs in your language.
      • Debugging — Reading errors, dry runs, using a debugger.

      What to practise

      • Solve 10 easy problems without an IDE's help
      • Explain the complexity of each solution aloud

      Common questions

      • What is the time complexity of your solution?
      • What happens in memory when you call a function?
      • Difference between an array and a linked list?

      Free resources

      Free courses

    2. 02.2Data structures & algorithms

      CoreIntermediate40–80 h

      The core problem-solving topics commonly assessed in software interviews.

      What this covers

      • Arrays & hashing — Frequency maps, prefix sums, duplicates.
      • Two pointers & sliding window — Pairs, subarrays and substrings in O(n).
      • Stacks & queues — Brackets, monotonic stacks, BFS queues.
      • Linked lists — Reversal, cycle detection, merging.
      • Trees & BST — Traversals, height, LCA, validation.
      • Graphs — BFS, DFS, topological sort, shortest paths.
      • Binary search — On sorted arrays and on the answer.
      • Dynamic programming — 1D and 2D DP, from climbing stairs to knapsack.

      What to practise

      • Follow one list end to end, not five
      • Say the brute force first, then improve it
      • One timed problem a day

      Common questions

      • What is the difference between BFS and DFS?
      • How does a hash map handle collisions?
      • Find the first non-repeating character in a string.

      Free resources

      Free courses

    3. 02.3Timed coding practice

      Good to knowIntermediate15–25 h

      Solving under a clock, the way online tests run.

      What this covers

      • Reading the problem — Inputs, outputs and constraints before any code.
      • Edge cases — Empty, one item, duplicates, negatives, overflow.
      • Test platforms — Online editors, hidden test cases and their quirks.
      • Time management — Skip and return; passing some cases still counts.
      • Testing your code — Three quick tests before you submit.

      What to practise

      • Two 90-minute mock tests a week
      • Do one contest to feel the pressure

      Common questions

      • How would you test this function?
      • What edge cases did you consider?

      Free resources

      • HackerRank — Where many campus tests actually run (Free)
      • LeetCode — The default interview practice set (Free plan)
      • Codeforces — Competitive programming contests (Free)

      Free courses

  3. 03Web fundamentals

    What React sits on.

    1. 03.1JavaScript fundamentals

      CoreIntermediate10–20 h

      The language questions front-end interviews commonly ask.

      What this covers

      • Scope & closures — Lexical scope, closures and common closure bugs.
      • this & prototypes — How this is bound; prototype chain and classes.
      • Event loop — Call stack, task and microtask queues, timers.
      • Promises & async/await — Chaining, error handling, Promise.all and race.
      • Types & equality — Coercion, == vs ===, truthy and falsy.
      • Array & object methods — map, filter, reduce, spread, destructuring.

      What to practise

      • Implement debounce, throttle and a Promise.all polyfill
      • Predict the output of 20 event-loop snippets

      Common questions

      • What is a closure?
      • Explain the event loop.
      • What is the difference between let, const and var?

      Free resources

      • JavaScript.info — Deep, ordered JavaScript tutorial (Free)
      • MDN Web Docs — The reference for HTML, CSS and JavaScript (Free)
      • GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
      • freeCodeCamp — Full curricula with projects, certificates at the end (Free)

      Free courses

    2. 03.2HTML, CSS & accessibility

      CoreBeginner6–10 h

      Semantic markup, layout and making pages usable for everyone.

      What this covers

      • Semantic HTML — Landmarks, headings, forms and labels.
      • Box model & positioning — Margins, padding, stacking and position values.
      • Flexbox & Grid — When to use each; common layouts.
      • Responsive design — Media queries, fluid units, mobile first.
      • Accessibility basics — Alt text, keyboard focus, contrast, ARIA only when needed.
      • Browser rendering — How CSS affects layout and paint.

      What to practise

      • Rebuild a landing page from a screenshot without a framework
      • Run an accessibility checker on your project and fix issues

      Common questions

      • What is the difference between flex and grid?
      • How do you make a modal accessible?
      • What happens when you add position: absolute?

      Free resources

      • MDN Web Docs — The reference for HTML, CSS and JavaScript (Free)
      • W3Schools — Quick syntax lookups (Free)
      • GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
      • The Odin Project — Full-stack path, project-heavy (Free)

      Free courses

    3. 03.3How the web works

      CoreIntermediate4–6 h

      HTTP, browsers and the request lifecycle that web interviews build on.

      What this covers

      • HTTP basics — Methods, status codes, headers.
      • Cookies, sessions & tokens — How login state is kept.
      • Caching — Browser cache, CDN and cache headers.
      • CORS — Why browsers block cross-origin calls and how servers allow them.
      • REST vs GraphQL — Trade-offs at a basic level.
      • From URL to page — DNS, TCP/TLS, request, render.

      What to practise

      • Inspect one site's network tab and explain each request
      • Explain "type a URL and press Enter" in 3 minutes

      Common questions

      • What happens when you type a URL?
      • What is CORS?
      • Difference between cookies and local storage?

      Free resources

      Free courses

  4. 04React in depth

    The main round.

    1. 04.1React & front-end frameworks

      CoreIntermediate10–20 h

      Components, state and rendering in the framework you list on your resume.

      What this covers

      • Components & props — Composition and one-way data flow.
      • State & hooks — useState, useEffect, custom hooks and their rules.
      • Rendering & performance — Re-renders, memoisation, keys, lists.
      • Data fetching — Loading and error states, caching.
      • Forms — Controlled inputs and validation.
      • Routing & app structure — Pages, layouts and code splitting.

      What to practise

      • Build a small app with search, a list and a detail view
      • Explain one performance fix you made and why it worked

      Common questions

      • Why does a component re-render?
      • What does useEffect's dependency array do?
      • What are keys used for in lists?

      Free resources

      • React documentation — The official React docs with interactive lessons (Free)
      • Full Stack Open — University of Helsinki's React/Node course (Free)
      • GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
      • freeCodeCamp — Full curricula with projects, certificates at the end (Free)

      Free courses

    2. 04.2Projects & resume defense

      CoreIntermediate4–6 h

      Explaining what you built, why, and what you would change.

      What this covers

      • The problem — What it solves and for whom.
      • Your role — Exactly what you built yourself.
      • Architecture — A simple diagram: frontend, backend, database.
      • Hardest bug — What broke and how you found it.
      • Trade-offs — Why this stack; what you would change now.
      • Scale questions — What happens with 10x the users.

      What to practise

      • Prepare a 2-minute walkthrough per project
      • Be ready to draw its architecture

      Common questions

      • What was the hardest part of this project?
      • Why did you choose this tech stack?
      • How would it handle 10x more users?

      Free resources

      Free courses

    3. 04.3Git & version control

      Good to knowBeginner2–4 h

      Branches, merges and collaborating on code.

      What this covers

      • Commits & history — Small commits with clear messages.
      • Branching — Feature branches and pull requests.
      • Merge vs rebase — When to use which.
      • Resolving conflicts — Reading and fixing conflict markers.
      • Undoing safely — revert, reset and restore.

      What to practise

      • Contribute a small fix to an open-source repo
      • Practise resolving a merge conflict

      Common questions

      • Difference between merge and rebase?
      • How do you undo a pushed commit?

      Free resources

      • Pro Git book — The free official Git book (Free)
      • GitHub — Where your projects live (Free)
      • freeCodeCamp — Full curricula with projects, certificates at the end (Free)

      Free courses

    4. 04.4Front-end system design

      AdvancedAdvanced6–10 h

      Designing a UI feature end to end; more common for experienced roles.

      What this covers

      • Requirements — Users, devices, scale and offline needs.
      • Component architecture — Splitting UI and state cleanly.
      • Data & API design — Pagination, caching, optimistic updates.
      • Performance — Lazy loading, virtualised lists, bundle size.
      • Accessibility & i18n — Keyboard, screen readers, languages.

      What to practise

      • Design an autocomplete widget on paper
      • Design an infinite news feed and discuss trade-offs

      Common questions

      • Design a photo gallery for slow networks.
      • How would you build an autocomplete?

      Free resources

      • GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
      • System Design Primer — Open-source guide to designing large systems (Free)
  5. 05Practice

    Saying it out loud is a different skill.

    1. 05.1Technical mock interviews

      CoreIntermediate3–6 h

      At least two full coding mocks before the real one.

      What this covers

      • Thinking aloud — Narrate your approach before and while coding.
      • Clarifying questions — Confirm inputs, scale and edge cases first.
      • Handling hints — Take them gracefully and adapt.
      • "I don't know" — Say what you do know and how you would find out.
      • Review the recording — Fillers, pace, unclear explanations.

      What to practise

      • Do two peer mock interviews
      • Record one spoken mock and listen back

      Common questions

      • Walk me through your approach before you code.
      • How would you test this?

      Free resources

      Free courses

    2. 05.2Technical communication

      Good to knowBeginner2–3 h

      Explaining your thinking clearly in English.

      What this covers

      • Structure — Big picture first, then details.
      • Plain words — Explain without jargon.
      • Checking in — "Does that make sense so far?"
      • Written English — Clear emails and follow-ups.

      What to practise

      • Explain one project to a non-CS friend
      • Record a 2-minute explanation of your best project and listen back

      Common questions

      • Explain recursion to a 10-year-old.

      Free resources

      Free courses

  6. 06Company & final prep

    The last 48 hours.

    1. 06.1Company research

      CoreBeginner1–2 h

      The product, the role, the job description and recent news.

      What this covers

      • The business — What it sells and to whom.
      • The role — What the job description really asks for.
      • Recent news — Launches, results, announcements.
      • Interview format — The rounds, if the company shares them.
      • Your fit — Three reasons, matched to the job description.

      What to practise

      • Write 3 reasons you want this role
      • Match 3 JD lines to your experience

      Common questions

      • Why do you want to work here?
      • What do you know about our product?

      Free resources

    2. 06.2Questions to ask

      Good to knowBeginner30 min

      Two or three good questions for the end of the interview.

      What this covers

      • About the team — How work is planned and reviewed.
      • About growth — Mentoring, learning, the first 90 days.
      • About the product — What is hard right now.
      • What to avoid — Questions a quick search answers.

      What to practise

      • Write 5 questions, keep the best 3
      • Prepare one question about the team's own product

      Common questions

      • Do you have any questions for us?

      Free resources

    3. 06.3Final checklist

      CoreBeginner30 min

      Logistics, documents, setup and a calm night before.

      What this covers

      • Logistics — Time, timezone, link or address.
      • Documents — Resume copies, ID, certificates if asked.
      • Tech check — Camera, mic, internet, charger.
      • Night before — Sleep, light revision, no new topics.

      What to practise

      • Do a 5-minute tech check the day before
      • Lay out documents and clothes the night before

      Free resources

    4. 06.4Job & interview safety

      Good to knowBeginner15 min

      Spot fake offers, payment requests and fake interview links.

      What this covers

      • Payment requests — Real employers don't charge for jobs or training.
      • Email domains — Check it matches the company's own site.
      • OTPs & logins — Never share them with anyone.
      • Fake interview links — Care with unknown chat apps and downloads.
      • Reporting — The 1930 helpline and cybercrime.gov.in.

      What to practise

      • Check one recent offer against these rules
      • Confirm the opening is listed on the company's own careers page

      Free resources

Enter your email and the official page opens. Phone is optional.