How I Nailed a React Take Home Assessment and landed a 190k+ Job.

So I was browsing LinkedIn, looking for a new job and I saw this great post offering $170k - $200k for a React.js Developer position.

When I took a look, it was a crypto company looking for a Mid-Level - Senior React Developer. Initially I was hesitant because the job post had already 200+ applicants, and I said there was no way I was gonna be selected for this role, but I had nothing to lose so I applied anyway.

One week later, I received an email that my profile stood out and a recruiter will reach out for an initial screening interview. So I book the time with the recruiter and It was just the typical conversation about my experience and technologies I am familiar with, why I am looking for a new role bla bla bla.

So after this interview with the recruiter, I got an email the next day, stating that I moved to Next Step which is a take home assessment, and my code will be reviewed by a Techlead after submission and will decide if I move forward or not, with a link to the description of the assesment and what the deliverable should be.

So here is the description:

In this assessment, you will build a simple Kanban board using React that allows users to manage and monitor a list of cryptocurrencies. The board will have two columns: an "Unwatched" list and a "Watched" list. Users should be able to drag and drop coins from the Unwatched list to the Watched list. When a coin is moved to the Watched list, a live chart displaying real-time data for that coin should appear under it. The application should handle errors gracefully.

Requirements

1. Columns:
   • The board should have two columns:
     • Unwatched Coins: A list of all available coins.
     • Watched Coins: A list where users can drag and drop coins they want to monitor.
2. Drag and Drop:
   • Users should be able to drag a coin from the Unwatched list to the Watched list.
   • If an error occurs while moving a coin to the Watched list, the application should alert the user and return the coin back to the Unwatched list.
3. Live Chart:
   • For each coin in the Watched list, display a live chart that monitors the price of the coin in real-time. The chart should be updated regularly with the latest data.
4. Error Handling:
   • Implement error handling during the drag-and-drop operation. If an error occurs (e.g., a network issue while fetching coin data), display an alert to the user and revert the coin back to the Unwatched list.
5. Styling:
   • Basic styling is sufficient. Focus more on functionality and problem-solving.

Technical Requirements

• You may use any drag-and-drop library of your choice
• You may use any charting library of your choice
• You may use any component library or build your own components.
• The application should be built using React.
• You can use any state management solution (e.g., Context API, Redux).

If you have any question regarding the requirements, you can reach out to this email [****] for more clarification.

So given that I know that there was lots of applicants I was determined to deliver the best codebase possible in every aspects.

So I reached out to the email provided,to ask more question about their current tech stack, and libraries they use, my goal was to use the same tech stack they use internally to demonstrate that I am already familiar with their stack and get a better chance of being selected.

So here goes the email I sent:

Subject: Quick Question About the Libraries You Use

Hey Josh,

Hope you're doing well!

As I'm diving into the project, I wanted to sync up on a few things. What libraries are you using for state management, charting, drag and drop, and components? Just want to make sure I'm aligned with the team's stack.

Thanks a ton!

Best,

So he answers a couple of hours later, and in his answer he stated that they use the following tech stack:

• Drag & Drop: react-beautiful-dnd
• Component Library: Material UI
• Charting: Chart.js
• State Management: Redux

So while I've used materialUI and Redux before, I've never used react-beautiful-dnd nor Chart.js. So research time!

I spent some time reading documentations and playing around with react beautiful-dnd and chart.js and after a couple of hours I already felt confident about tackling the project.

So I setup a new React project using create-react-app and TypeScript and get to work, I tried writing the cleanest code possible and setup the most organized project structure I could think of.

Even though they said styling is not important, I tried my best to make the project looks good and show off a little bit my css skills and a sense for the layout and design.

After 2 days, I felt confident with what I've came up with. So time for submission!

So I submitted the project and crossed my finger. (See the video below for the complete project.)

2 days later, I got an email back, I was selected to move forward again. I was really happy cause I worked really hard and tried my best on the assessment.

So, next step was a code review with the Techlead and some team members, to explain what I did, why I took some decision and also implement some additional feature live.

So, the day of the next interview, the Techlead told me that he was really impressed with my submission, he really liked the code structure, the look and feel of the UI, and asked a the following questions:

Question 1: Why did you choose the tech stack you choose for this project, why you chose Redux and not Context API ?

My Answer:

Initially I was gonna use the Context API, because this particular project is not too big, and I think the context API is good enought for this use case. But after learning that you guys use Redux internally so I thought I would use Redux just to show that I am familiar with the technology. I also use Immer along to make the redux code cleaner, that way I reduced a lot of boilerplate and improve the readability of the codebase.

Question 2: What would you do differently and how would you improve your codebase if you were to move this to production ?

My Answer:

Right now, the code works properly, I did a lot of testing and I am happy with how it is. However there is no unit-test or integration tests. Before moving it to prod, I would add unit-tests using a library like React-Testing Library and probably integration tests as well with a Library like Cypress or PlayWright.

Question 3, Live coding: Right now, if you refresh the browser, all the data is lost, Let's say a user don't want to lose their watch list, what would you do to prevent that and can you share your screen and implement this functionality?

My Answer:

So the best way is to have a backend API and persist the user watchlist in a database on the server, but since I don't have a backend for now, I can use the LocalStorage or IndexedDB to store the data and ensure data persistency on page refresh.

Then they decided that I can use LocalStorage for simplicity, so I shared my screen and implemented data data persistency on page refresh, and everything went smoothly.

So they had a couple of React core concept questions afterwards.

And the Techlead give me the feedback on the spot, that he was already impressed with my submission, and he liked my answers to the question and he think I'd be a good asset for the team. And last step was an interview with the Manager.

So I eventually had the interview with the manager, it was just a chat, he said that he had a super great feedback from the Techlead and the rest of the team, and someone will reach out with an offer.

So, one day later they sent the offer, they offered 175K, and I was able to negotiate to 190K.

If you'd like to see the codebase of the submission for the assessment, I created a Community of React.js Developers to share knowledge, learn and collaborate. You can join here if that interests you, and the code base is available in the community resources here.

So that's it. I wanted to share this story and hope that it will serve someone out there.

Watch the Video of the final project here: https://www.youtube.com/watch?v=EFQDiQFDL9c