The Right Approach to Technical Challenges and Getting Hired

I’m a Fullstack Developer with over 13 years of professional experience. I use .NET/.NET Core as my primary tool and have a passion for front-end development too. I’m quite versed in using vanilla JavaScript along with the Angular framework (since AngularJS 1.3 version). Working as a full-time Senior Developer.

In this article, I wanted to share my most recent experiences with technical recruitment. I give some insights into the overall process it took me to pass screening with a 100% score, which I believe can be pretty useful if you’re a fellow developer and want to ace the process. 

Recruiters’ LinkedIn reach-outs – developers’ daily struggle

I’m not a guy that particularly likes social networks or being overly exposed online. Maintaining multiple social media profiles and using social apps can be very tiresome and bring even more noise into the already loud modern cyber-life. I decided a long time ago to keep my profiles tidy and check them once in a while, with no pressure at all.

The only network that I still use on a weekly basis is LinkedIn. While there is plenty of questionable content within LinkedIn, there are always some bright examples of people, posts, articles and business offers that still keep me going back to LinkedIn after all these years.

If you are reading my article the chances that you are a developer or have the aspiration to become one are pretty high. Either case if you have a social media profile somewhere out there, you are or will be contacted by tons of recruiters.

When it comes to recruiters’ LinkedIn reach-outs are either hit or miss. Now, don’t get me wrong, I don’t expect everything to be served on a silver platter but there is a lot that should be improved. The problems I encountered most often were:

• a complete mismatch of technology stack between my profile and the project;
• recruiters not replying after initial messaging or meeting;
• not having concrete details about the job;
• the recruitment processes going on forever;
• too many people involved or too many stages of the process and so on.

Meeting recruiters that really know how to deal with the complex process of recruiting developers is much less likely, at least in my humble experience. It might be a surprising statement but being contacted by an experienced recruiter comes both as a relief and a nice change from what I usually experience.

How a polite “no” turned into a job opportunity

I know well that time is our most precious resource and no one likes to respond to a dozen job offers. If you already have a satisfying workplace, messages from recruiters may seem to you as some kind of spam – since you don’t seek for a job change. 

When it comes to me, replying to these messages just feels right – firstly, it’s basic social etiquette, and secondly, the recruiter will probably mark me as a person who shouldn’t be bothered with offers for some time, at least. I often read these messages but get distracted by some work and completely forget about replying. Or I simply mark all the messages as read, taking the risk of missing good opportunities. 

A few weeks ago, while I was taking a small break, I opened LinkedIn, breezed through notifications and opened a messaging center. Everything was as usual – some sponsored content and a few generic messages here and there. However, one message caught my attention. It was very brief but friendly. It included a short job description, the salary range and it stated very clearly that my profile has been checked out and I’m a pretty good match for the job.

The message came from Maksymilian Majer, the CEO of ITCraftship as I later found out – a technical recruiting agency located in Poland. Their website looked legit to me with a lot of information about their recruitment process. Also, a quick look at Maksymilian’s profile gave me real confidence in their company. The notion that he is not only a CEO but also a software developer with a very strong set of skills made me decide to send a reply.

ITCraftship’s job offer stated that they were in need of a developer with strong JavaScript skills, knowledge of Angular and (not mandatory) experience in NodeJS and hybrid mobile development. However, they were looking for a full-time developer and since I was not leaving my current job, it looked like a dealbreaker to me.

In a polite way, I explained that I’m not interested in changing my current job but I could do some part-time work since I have plenty of experience with the given technology stack. It surprised me that the answer I received was positive. I received the link to apply with a note that part-time would be fine if I pass the recruitment process and show myself as a good fit.

Elements of a Regular JS Developer recruitment process

Applying for the offer was a breeze. Simple, interactive form for submitting my basic data and CV – that’s it. Completing this form would result in an email stating that my application is successfully saved and I will be informed about the next steps when it’s reviewed. After 2 days I got a reply via email and a link to a calendar to set the time for my tech interview. Quick and painless.

The next step was a tech interview and it went very well. It was conducted by a technical recruiter – Mikołaj, a Software Architect and Software Developer with a wide variety of skills under his sleeve. His questions were clear and concise – what’s even more important, they were very sane and of practical importance. I felt no pressure. As before, the results of my interview came quickly via email together with a practical assessment task.

The assignment document “ITC-JS-Developer-Home-Assignment” can be found below – the GitHub username is removed for the sake of privacy.

As you can see it is explained pretty clearly with all the needed info. You have the app description, needed features, the API documentation, the scoring system and instructions on how to share your solution with the team for the review.

Reading the assignment again I noticed how well thought out is the task itself. It’s not complex at all and it’s completely practical, like a regular task – something a developer can expect to work with on a daily basis.

My approach to a code assignment that led me to extra points

I’m pretty sure this task could be solved in a matter of hours, probably in one sitting, but having a regular job and pretty scheduled weekends made it a little bit of a stretch. For tasks like these, there should be no place for a rush. Taking a few afternoon sessions (3 hours each) to solve it would be a more realistic and more desirable situation.

My initial plan looked something like this:

• Day one: Implement most, if not all of the functionalities
• Day two: Clean up the code
• Day three: Make tests, package the app and send it for a review

One thing that intrigued me immediately after reading the assignment task was the scoring system – particularly those bonus points for Angular + Ionic. Of course, I would develop my app using Angular but I am not that familiar with the Ionic framework – and I really wanted those extra points. Since this would be a good opportunity to learn something new I decided to give a bit extra effort and try to learn some Ionic basics while solving this assignment. 

The plan, after changing the approach, looked like this:

• Day one: Implement all of the functionalities using Angular
• Day two: Reuse the Angular code and prepare the Ionic app
• Day three: Clean the code, make the tests, package the app and send it for a review

I decided to bite the bullet and try to earn those extra points - even though 5 points are not that much, I thought that the effort I would put into learning Ionic basics should be taken into consideration by the interviewer. On the other hand, the time it takes to finish the assignment will be used to try and learn something new. So, it was a no brainer to me.

I estimated it shouldn’t take more than 9 hours to complete the assignment, which is slightly more than one working day. The potential obstacle I could face would be to completely fail at the writing of the Ionic app but, in that case, I still had room to fall back to my initial plan and deliver the plain Angular app as a solution.

How I get the work done – the plan implementation

In this part, I will try to focus on a few aspects of the assignment solving process. It is not intended to be a step by step tutorial – I will try to point only at some more important aspects of the implementation. For full reference please use the finished project that could be found here at GitHub.

These are the requirements for developing/running the application:

• Install NodeJS
• Install Angular
• Install Google Chrome
• Use some code editor - I prefer Visual Studio Code

Day 1: Angular app

To create a new Angular app I used:

Using custom made libraries

Working on multiple projects, smaller or larger, as a developer you most probably have more than a few custom-made libraries that take care of some particular aspects of your applications. Dealing with components, forms, errors, navigation, various helpers and custom scaffolding can be most likely found in such libraries. 

Looking at a freshly created Angular app is not exciting at all. Having a default application devoid of any sweet stuff I use on a regular basis can be a little bit off-putting. Naturally, I’m always tempted to take one of my libraries from the existing project just to make the development a bit quicker.

Reviewing interview tasks in more than a dozen cases would be more problematic than helpful. Custom libraries could tackle things that are out of the scope of this assignment and introducing extra code. In this case, it would mean more stuff for the reviewer to analyse and/or introducing more loose ends. Putting them on NPM doesn’t seem like an improvement too. Sticking to the well known 3rd party libraries is often a better idea.

Making a request to Yelp API

In order to use Yelp API, you will need to have an API key that will be used as a bearer token and sent with every request. For that purpose, we can implement an Angular HttpInterceptor. Hardcoding information such as API key is never a good idea so I simply put it into the environments file.

Handling CORS issues in development

Calling an API that is not on the same domain as our application will give us those pesky CORS errors in the browser. To circumvent that issue Angular gives us the ability to use a small local server that will catch and proxy any ajax request as configured:

Handling CORS issues in production

Using Angular proxy in production is not possible so I needed to solve that CORS issue once and for all. The first idea would be to write a tiny Node server that will do the proxying for my application. But, that is out of the scope of this assignment and it would bring more effort into consideration. As an alternative I simply used simple Heroku proxy as a baseUrl variable:

YelpHttpInterceptor is smart enough to decide which proxy it will use depending on the environment. Great.

With the proper proxy configuration in place, I can finally implement Yelp API calls that are needed for this assignment:

Angular services

In the app I defined three simple Angular services:

• LocationService is basically a wrapper around the browser's navigator and local storage (used @ionic/storage in the next phase) APIs to simply read geolocation data and cache it to the local storage if needed. Also, there is the ability to save user given location data (street, city, etc).
• NotificationService contains two simple methods for showing either a success or error message.
• YelpService uses both previous services (location and notification) along with Angular’s HttpClient for making remote API calls. It contains methods for searching businesses, retrieving details and reviews for a selected business. When searching for businesses Yelp API expects either geolocation data or exact address as a starting point. Therefore I implemented searchBusinesses method to read geolocation data from the LocationService and then act according to the user's selection, either use geolocation data from GPS or user given address information. For more convenience I used paging while getting Yelp businesses. This method is, in fact, most complex but using RxJS makes code fairly readable.

Day 2: Ionic app

Today I will create a new Ionic app and put most of my code written yesterday into it.

Installing Ionic is really simple:

After that new application can be created and started with:

There are 3 template types we can choose for our application: blank, tabs and side menu. For more info read the official Ionic documentation.

Surprisingly, using Ionic was really easy, at least for my simple case. The most complex page would be the SearchPage since it contains searching using debouncing and paging with infinite virtual scroll and it took me a while to get it working. Other than that, the Ionic documentation is really good and it was very easy to get the application up and running within a few hours.

Day 3: Cleaning, testing and deploying

Cleaning

Since implementing the Ionic app was a success I focused myself on reading a bit more the documentation to make code a little bit more readable and remove some of the experiments I made.

Testing

I planned to make some simple component tests just to give an example but in the meantime, I read very useful article on Medium called “Intro to BDD style E2E testing with CodeceptJS, Docker Compose, and Semaphore CI” and decided to use CodeceptJS to make simple E2E tests. I was not previously familiar with the CodeceptJS but after reading Maks’ article and taking a look at the Codecept’s documentation I decided to give it a go.

Installing was simple:

Then I started interactive initialisation:

Running tests while application is running:

For the entire configuration, take a look at the codecept.conf.js file.
To be able to run the tests more easily I changed the test command within package.json file.

CodeceptJS will use output directory to store test result screenshots.

Let’s take a look at the tests:

Now, these are good-looking tests, aren’t they?! CodeceptJS made it so readable and easy to follow – you can have full insight in the application’s behaviour just by reading through the tests once – it’s ridiculous. I do have some minor annoyances (see the test comments) but I’m so happy I could use Codecept and I will most certainly use it more in the future.

Deployment

To be completely sure that my application works I decided to host it publicly to be available on the internet. This was out of the scope of the assignment but doing so, I assumed I most probably get some extra points too. Also, it's a good and helpful practice.

I really like it when, particularly on GitHub, there is a link to a demo page where I can quickly test the project. How many times have you stumbled upon an interesting library without any demo application available? Pulling it from the GitHub, running npm install and starting the test application just to try the library? You should always make it easier for potential users.

Also, you’ll most probably avoid a situation like this:

Again, I was at the crossroad - how should I even deploy my application? Should I use NodeJS? Make a Docker? Use Heroku? Make a Vultr server instance? How to do it using as little effort as possible and yet make it fit the assignment? Well, if you look at the initial offer at the “Bonus points for” section there is a brief statement:

Cloud & Serverless architecture skills (in particular Firebase)

This is the answer I needed! All I had to do is to host my application on Firebase. It really took about 15 minutes to follow this tutorial. My simple application is available at this url.

Wrapping up

After deploying my app to Firebase all I needed to do was to push my code to GitHub along with a brief README.md file with some hints for the interviewer. The application was written in about 8 hours, without previous knowledge of Ionic, so there are some issues to be found. Also, I didn’t waste any time on tweaking design and polishing CSS and, while the application is fully functional, the look and feel is not something to brag about.

Homestretch - the final interview after delivering my result

The final interview was very informative since I heard more details about the company from its CEO Maksymilian and  COO Maciej, as well as find out more about the potential projects I could be working on. The technical part of the interview was completely focused on my application and the code. Some of the less technical questions were:

• How many hours did it take me to complete the assignment?
• What was the most challenging part?
• Why did I use CodeceptJS?
• For how long am I using Ionic?
• What could I do to improve my application and the codebase?

I know that many talented developers, both juniors and seniors, are experiencing anxiety and a feeling of a lack of competence whenever looking for a new job and getting ready for interviews. While being somewhat anxious before an interview is an entirely normal feeling, then being crippled by fear is something that should be fought against.

I’m a firm believer that setting the right goals and practicing the right methodologies could be of vital essence to ease your fears and answer any cunning interview questions without feeling uncomfortable or anxious.

When it comes to me, sometime around reaching 5 years of a software development experience, I decided to stop chasing the goal of being perfect at every possible interview. Instead, I tried to turn the situation around by setting goals for myself and trying to improve the quality of my job interviews.

Conclusion

The entire experience was straightforward and without wasting any time. Also, there were no surprises during the whole process – everything was clear and exactly as described in the introductory email I got when I submitted to the job offer. There was no rush to hire a candidate, no pressure on me to accept any offer and everything was handled very professionally. 

I hope my article gave you a glace on how to organize a workflow when you need to solve a technical task and how in general the well-organized developer recruitment process may look like.

Written by Robert Jelic