FrontEnd Guideline

Interview Rounds & Patterns

Most FrontEnd Interviews are categorized in these 3 buckets - JavaScript Round, Machine
Coding Round, UI Tech Round

A. JavaScript Round
There would be Conceptual Based, Output Based, Implementation Based (like Polyfills)
Questions.

For Conceptual Based, oral discussion of core concepts. Important concepts to learn are,
- Execution Context
- Lexical Scoping
- Hoisting
- Closures
- Asynchronous - Promises, Callbacks (used in Web APIs like setTimeout & setInterval),
Async/Await
- Event Loop, Callback Queue vs Microtask Queue
- ‘this’ keyword
- Prototypes, __proto__, Prototypal Chaining (Advanced, but good to know)

For conceptual questions, the way you answer matters a lot. For example, you need to know
the subtle differences between Lexical Scope & Closures which also involves how better you
understand Execution Context since these concepts behave with respect to it.

Simple things inES6 syntax, like the difference between let vs var or the arrow functions with
‘this’ keyword can also confuse. You need to be aware of how hoisting works, understanding of
scopes, Temporal Dead Zone, ‘this’ works.

For Output Based, Questions will be shared for which you’ve to think & dry-run & answer with
the proper conceptual reasoning (this is expected by default).
If you’re strong with the above concepts, you might not need to practice 100s of questions, you
can just apply the concept & answer (It’s that simple). Most Output Questions are subset of
above concepts, although something to focus are,
- Closures
- Asynchronous based on SetTimeout SetInterval, Promises, Async/Await
- ’this’ keyword
For Output questions, many concepts can overlap together in a single question. You need to
have a sound understanding of concepts so that you can decode what’s happening at each line
of code execution.

For Implementation Based, Interviewer will ask you to implement a certain polyfill or a
functionality or any JS task like Array, String, Object Manipulation. Some of the common
implementation based questions could be,
- Polyfills of Promise.all, Promise.any, Promise.race, Promise.finally, Bind, setInterval,..
- Debouncing/Throttling
- Flatten Array/Flatten Object
- ‘N’ Async Tasks in Series, Parallel
- Traversing Nested Array/Objects

I call this a typical problem solving round in Frontend Interviews. Since those implementation
utilities are no less than a problem. Here, the interviewer judges your javascript capabilities,
how better you are with implementing in Javascript, how better you understand the language &
its behavior.

There’s no one solution to implementation based questions, it’s all about whether your solution
sticks to the expected output. WHen you’re stuck try to keep discussing the approach with your
Interviewer in each step. Mostly they would help you out guiding in the right direction or
suggesting other approaches or point out where you would go wrong.

Again, this won't be a typical Leetcode style problem, so relax!! It’s going to be purely Javascript
oriented where you write some code to implement that working functionality. Neither would it be
that complex in terms of thinking, you just need to give time on how to approach & implement
using the concepts.

Most of the time the questions would involve asynchronous (Promises, callbacks, async/await),
setTimeout, setInterval, closures, concepts heavily. Make sure you’ve good understanding of
those concepts on how it works & implement it.

If you’re still worried about DSA, and want to play safe. Then in the Frontend domain,
Recursion & Trees are some important concepts you can focus on. Since the classical
DFS/BFS would be common in object .

Resources for JavaScript Round -

Resource 1
Resource 2
Resource 3
Resource 4
Resource 5
Resource 6
Resource 7
Resource 8
Resource 9

- Resource 4 is paid but you can find great courses with amazing JavaScript Knowledge, yet
you can access it completely FREE for 6 months, refer this video or this Page.

- Resource 9 is Paid but a great resource for Implementation based questions 🔥

B. Machine Coding (UI) Round
Here, a Mid Senior Interviewer, will ask you to Design a Small UI Component.
You can’t practice all Machine Coding Problems. Also it’s not wise to do so. Machine Coding
round is more of a discussion oriented, logical approach to what you think of the Problem
statement.

Some Tips to focus on for Machine Coding Rounds,

- Have hands-on practice React before Interviews so that you can code faster in Interview.
Hands-on of useState, useEffect, Fetch API, Basic CSS - Flexbox, Position.
- Take time to think of your Component’s State roughly & how your State will flow between
your Components before jumping to coding. This should be the most important, since you don’t
want to refactor everything and start from scratch. Time is a really important factor in Machine
coding rounds.
- Don’t focus more on CSS initially, just focus more on the Implementation & Logical part
of the Component. Since the Interviewer expects a Working Model first more than the beautiful
CSS. Believe me, else you’ll waste a lot of your time.
- Don’t focus more on writing Clean Code & File Structure initially. Your main aim should
be to complete the Working Model of the Task first . I’ve seen in Interviews in companies like
Flipkart, they focus more on Working model.
- Interviewer can check your React knowledge & ask questions in this Round or may be
also in the JavaScript Round as well to some extent.

Some Common Patterns of Machine Coding Questions are,

Design a small UI Components like, (You can take more ideas for small UI components from
this site)
- Dropdown
- Accordion
- Pagination
- Carousel
- Autocomplete
- Star Ratings
- Poll Widget

Components from Real-World Apps like,

- Timer App
- File Structure
- ChatUI like WhatsApp Web (asked in Flipkart)
- Instagram Comment Section (asked in Observe.ai)
- Movies App (asked in BrowserStack)
- Web Pages for Media Company

Design and Implement Flipkart WhatsApp Web Chat UI asked in Flipkart:

Design and Implement Instagram Comments Section asked in Observe.ai:

Movies App asked in BrowserStack:
Resources for Machine Coding Round - Resource 1, Resource 2, Resource 3, Resource 4,
Resource 5
C. Engineering Manager Round
Senior Interviewer of the Company will test your general FrontEnd skills, Fundamental Browser
knowledge, JavaScript Conceptual Questions, Previous Projects Discussion. This round will
focus on your overall FrontEnd knowledge, Team-fit, Questions from your Resume.
- Local Storage vs Session Storage vs Cookies, Async/Defer
- Is JavaScript Asynchronous Language?
- HTTP Methods & the differences between each methods
- How Browsers work when you search google.com or any Website
- How React works, Virtual DOM, Functional Components
- Some Performance Optimization techniques you know (Subjective)
- Projects Discussion, Challenges you faced in projects

Resources for Engineering Manager Round (Technical Preparation) - MDN Docs, React
Docs,

Projects for Resume

- You don’t have to build fancy projects. Keep it simple.

- Focus on applying the concepts you learned like Closures, Promises, Flexbox in your
projects.

👉
- Consider building projects of these categories,

👉
JS Based Projects like Web Scraping, Web Automation, Web Files management.
Vanilla JS Based Projects like Algorithm Visualizer, Tree Visualizer, Snake Game,

👉
Sheets Clone.
React Based Projects like Medium Clone, YouTube Clone. Build your own small
features on top of these Clone Projects.

👉
Resources for Projects

👉
Ultimate CSS Skills - Resource 1, Resource 2

👉
Vanilla JS Projects - Resource, One Stop Frontend Projects
React Projects - Resource 1, Resource 2, Resource 3

- If you’re looking for the projects, then my One Stop Frontend Projects 🔥 is the
only course you’ll need to stand out from the crowd. Build 3 Frontend intensive capstone
projects with me. The content you’ll never see in any Youtube channel, or EdTech
 courses charging even lakhs of rupees. (I can bet on this 😄). Checkout from the above
link.

The Best Resource to Learn React (Hands-on Coding) for FREE 🔥

👉 React Fundamentals
👉 React Hooks
- Github Code Link

👉 Advanced React Hooks

- Github Code Link

👉 Advanced React Patterns

- Github Code Link

👉 React Performance
- Github Code Link

👉 Testing React App

- Github Code Link

👉 React Suspense
- Github Code Link
- Github Code Link

Most Quality High Quality Resources on FrontEnd 🔥

👉The Best Video Courses on the Planet 🚀 to learn literally anything on FrontEnd like
React, CSS, Next.js Web Security, Webpack, GraphQL, TypeScript, Gatsby, Design Patterns,.. You
name it, you have it - FrontEnd Masters
(This is PAID, but you can use this hack to use it completely FREE for 6 Months. Refer this
video or this page)

👉JavaScript Interview Questions List - Sudheer/JavaScript

👉 React Interview Questions List - Sudheer/React
👉 Dive Deep into the Internals of React - JSer.dev (Trust me this is super deep & intense,
walking you through the actual source code 🔥🔥 )

👉 Best Blogs for React for FREE - KentCDodds, EpicReact, Overreacted

👉 FrontEnd System Design for FREE - FrontEnd Engineer, FrontEnd Dev Tooling, JSConf, Chirag
Goel

👉 FrontEnd System Design PAID - GreatFrontEnd

👉 JS/React Interview Practice - Output, Implementation, Machine Coding, UI Tech - Big
FrontEnd Dev

👉 Ultimate Resource for FrontEnd Performance for FREE - Smashing Magazine

👉 Learn more about Web Technologies & Fundamentals in FrontEnd for FREE - JSConf,
Web.Dev, Hussein Nasser

👉 JS Design Patterns, React Rendering Patterns, Performance Patterns for FREE - Patterns.dev
👉 Learn Frontend Tech in structures tutorial format, any new Frontend Tech, build mini projects
for hands on - Dave Gray, Jack Herrington

anything onFrontEnd 🔥🚀
Finally, attaching a link for all FrontEnd Resources so that you can access & learn

Ultimate Collection for all FrontEnd Resource

Resume & LinkedIn Guideline

Resume Preparation

My Actual Resume for reference - Arun_M_SDE1_Zoho.pdf

1. Keep it simple & professional.

2. Avoid shiny colorful resume templates. Example: Arun's Resume.pdf

3. Keep it single page.

4. Name your Resume Properly.

5. Avoid two column resume templates. Difficult for reading or parsing by ATS .
Example
 6. Upload resume in Google drive, and share link. Shows a nice little preview
wherever you share - LinkedIn, Email.

7. Prefer LateX Template based resumes from Overleaf Website. [Preferred by

most Software Engineers]. Personal suggestions - Template 1, Template 2 [ATS
Friendly and Professional Looking]

8. Ordering of Sections for Working Professional - Work Experience, Projects,

Technical Skills, Achievements, Education (Mention CGPA if good)

9. Ordering of Sections for Students - Internship (If any), Projects, Technical Skills,
Achievements, Education (Mention CGPA if good)

10. Try to fill your resume, but don’t fill it with unwanted details like
Extra-Curricular, hobbies,.. Try to stick with Technical details.

11. Make it easier for Recruiter, ATS to read on with Keywords as in Job Description,
Tech Stack, Bold highlights, Data Points (If any, a bit of fake also works because
no one really checks, but keep it practical).

12. Make your resume sound Technically Heavy. Most HRs don’t understand
Technical things but the Technical words you use have a positive impact (even
for Referrals). Resume is a game of word play.

LinkedIn Profile & Referral Strategies

1. Connect with at least 50+ people from a company. Example, If you want a
referral for Swiggy, Flipkart then connect with 40+ people who work as Software
 Engineers at those Companies so you can ask for Referrals & 10+ Tech
Recruiters of those companies to be aware of opportunities.

2. Not everyone will accept Connection Requests. You need a strategy to increase
your conversion rate for acceptance of Connection Requests. Basically have a
common Personalized Note which works for everyone.

One strategy I follow is to praise or appreciate the other person I want to

connect with. The point is, target the happy point of the other person, so that he
also feels great to accept your connection request. This has worked like crazy for
me.

Response from people on this Personalized Note.

3. Now asking for a referral. You gotta ask each & everyone with whom you
connected with that company, don’t just stop with one. After all, you just need
one single positive referral.

4. Need to have a Common Referral Template since it is hard to send everyone a

personalized Referral Message. Better prefer a Common Template so you can
just Copy+Paste.
5. People won’t spend more time, so make sure your message is short, to the
point, and readable for your Referrer.

6. Make sure your Referral message Headline describes what you’re up to. Since
the headline decides whether the Referrer would be interested to open & read
your message. The Initial 4-5 words of your message are so critical to get
you referred.
7. Also, if there is no reply don’t just leave. Instead make a follow up to the Referrer
again in 2 days with a soft note of your referral process. They’re working
professionals, they might forget, and have some personal work. So, don’t forget
to make up a follow up process.

8. You also need to update your profile professionally, to give the Referrers the
confidence to refer you. Remember, on LinkedIn, your LinkedIn Profile is the
first resume. You can refer to mine or some others of your field as well whom
you admire.

9. Build credibility, make yourself visible on LinkedIn. Basically post short content
on LinkedIn of what you know, you learn. Don’t fear posting, good or bad just
start, because people refer to your LinkedIn Profile first. Likes don't matter, but
what matters is people will recognize your activity. Engage with some valuable

😝
comments on other’s posts. Posting content should not be that difficult in this era
ChatGPT

10. Most important, maintain a soft note everywhere, whether in DM messages or

comments or posts. Don’t get involved in negative tone talks, because people
never forget such actions.
Your Good to go, my friend !! Good Luck :)