Front End Interview Round 1: Machine Coding / Web Development

#career #webdev #javascript #react

Frontend Interviews consists of 4 – 5 rounds depending on the year of experience. Here is what each round resembles:

Machine Coding / Web Development
UI Tech ( Javascript, HTML & CSS)
Data Structures & Problem Solving
System Design Round
Hiring Manager

Sometimes 2 & 3 are combined into one round with more weightage on UI Tech. System Design is in focus for senior engineers and mostly excluded for freshers (0 – 3) with years of experience. You will have at least 3 – 5 rounds in any good tech company.

In this blog, I will be discussing the first round which is focused on Web Development skills. You can also read Must have skills for Frontend Devs in 2021

Objective: Create a web app that can perform certain operations. Sometimes companies also provide the design that the website should look like, but the spotlight is always on functionality.

Sample Problem Statements:

Create a website for student records with client-side search, sort & pagination. Implement your own design, and make sure to use this endpoint for the data https://api.abcxyz.com. Bonus points for good design, optimized search (throttle, debounce), and modular code. No frameworks allowed, use Vanilla JS.
Create a rideshare website where users can request other users for sharing their rides. Use https://api.abcxyz.com?startTime=xx&startLocation=yy&endLocation for the list of active rides, start and end time, and owner details where startTime, startLocation & endLocation is provided by the user searching for rides. Stack – VanillaJS.
Develop a Carousel module with previous, next buttons, autoplay option, and freeze the carousel if hovered. Make sure all the values are configurable and passed externally. Use plain javascript to implement this.
Create a web app where users can see the free meeting rooms in the office. Input – start time, end time, floor. Suggest free slots & time modifications in case rooms are not free. Use React and Redux. Endpoint – https://api.abcxyz.com. Use GraphQl queries during API calls.

Some of the above questions are from big American tech companies and one of India’s largest startup. Any good developer should be able to do it. The only difficulty that one could face is duration.

Total Duration: 2 hrs or less.

As you can see that most of the good companies will ask you to implement the solution in plain javascript. So, prepare for it. Frameworks have made coding so easy that we sometimes forget how things work in the background.

How important is the CSS?

Good UI is always appreciated. Clean design, nice & subtle colors, and minor tweaks can sometimes create a great first impression. I think that has definitely helped me stand out from others. But the heart of the application is the functionality, without that it will end up in rejection. CSS is super important if the company has specifically mentioned that in the problem statement. In my experience, the main focus is on javascript.

How should I prepare for this round?

Focus on Javascript more than frameworks.
Learn native javascript array and object functions as they will help you modify data easily.
Learn how to make API calls natively in javascript without using Axios or something similar. Read about fetch/XMLHttpRequest()
How to optimize search ( debounce, throttle, etc)
The practice is the key, try to develop one or two of the above-discussed projects. I will suggest the first one.
Improve CSS skills. Learning Flex will make things easy.
Learn at least one framework(React/Angular/Vue) for that one odd interview. What I have observed is that small startups are more obsessed with frameworks than big tech. However, that is true for the interviews but for resumes to get shortlisted, frameworks are a big plus.

If you are thinking of switching your job but not sure about it? Please read When to Switch your Current Job as a Software Engineer?

Follow me on Twitter as I keep sharing information on JS, Job Market & Interviews.

Drop your questions, if any. Check out my other posts for Frontend Interview Questions and Experiences for some of the major tech companies.

If this post gets a bunch of comments and views, I will write a tutorial for the first problem statement. Don't forget to subscribe.