How-To: A Coding Challenge
“ The key is to challenge yourself everyday to break the mold and continue learning new skills for problem-solving. The value is happiness […] ”
Hi World!
I completed GitHub’s Take-Home Coding Challenge to assess my job readiness as I prepare to start interviewing for my first role as an engineer. I want to start applying for junior roles at companies that I believe I could make a difference at in the programming industry and GitHub is the hub, pun intended. I have been programming thus far using React and vanilla JavaScript and wanted to demonstrate the core concepts that are most commonly used from the framework.
A take-home coding challenge is a small project or task given by an employer to an applicant to assess their level of skills and communication. In the next five steps, I am going to walk you through how I solved this take-home challenge. I also hope this publication helps others who may experience anxiety and uncertainty around what to expect and to learn from my mistakes so that you hopefully pass your coding challenge.
1. Understand the problem
So many mistakes are made by not fully understanding the problem before writing your code. I read the instructions more than three times and then read them once more. Here is the README.md from the challenge:
- I would be coding in the profile.js file
- Controlled inputs are required and pure components are preferred
- CSS has been assigned to display errors
- Form submit needs to happen
- Provide notes if unable to complete
- Separate the profile rendering function into smaller components and remove form state hooks from DOM to profile form
- I have one hour to try and have the code functional and identical to the original example
After reading the file, I made the notes above that could help with writing the code and staying on time.
2. Take Notes
To take a note, for me, is a break in visual & auditory learning; a mental pause to document something important.
Whatever process helps you to capture those key elements (i.e., taking notes on paper, creating a separate .md file, etc.), do it. What you think is important to note may differ from person to person. However, during code challenges, pseudocoding with specific keywords to the programming language will help with time when it comes to writing the code. Here’s an example of what that note may look like:
I find it helpful to take notes directly in the file, however, you do not have to take notes in your code.
3. Test Example Logic
This step in the process may be as important as taking notes because when we run example logic through the code and get what we expected (or not) in return, it’s a clear indicator as to what needs to happen next. The coding challenge came with a working example form where I could test example data and see how the form submission handled that data.
When my console.log() tests failed, I did not get back what I thought my code should have returned, which meant the logic was wrong.
Taking a look at the example below I asked myself, where have I seen code like this before and what resources did I have available?
This was my first time doing any real application assessment with my coding skills and my nerves were getting the best of me. Therefore, taking note of state now was crucial because React has hooks, and using hooks is what makes React fun. Use state is a feature that comes installed with the React library upon download. It’s used like a net and a boomerang for capturing and returning data. Here I set two variables [formData, setData] to equal useState().
Inside the parenthesis of useState, you are stating your base value, the return place. In this example, I have set useState() to an object with four properties, all of which are different keys with empty strings as values. Wherever you want to capture a change of data in your application, cast your net by using formData and use setData to boomerang back every change of value on that input field.
In this code challenge, they preferred pure components, as these types of components should not rely on prop drilling (receiving state from a parent source).
Then, I noted to use the onChange() method to control inputs and to import useState() to set the changes on those input fields.
Lastly, once I knew how I would incorporate useState() and where to lift state in the hierarchy of the application, I briefly took note (because at this time in the challenge I had roughly 30 minutes left) to sketch out which component would hold state and which one would be rendered in the App().
4. Write the Code
One of the core deliverables for this challenge was to “DRY up the code and make the render function into smaller components”. I had taken the first half of the challenge to take notes, test logic, and understand the problem fully before actually changing the code, leaving me with the last half of the hour to accomplish this deliverable. It took me 25 minutes to refactor the profile component and created a “New” component that would pass props down to the “profile” component.
The profile component held state for all inputs as the form was created there,
Then I set the forms inputs to equal the handleChange() callback like below:
And set the form’s onSubmit to the handleFormSubmit() callback like below:
And lastly, I lifted the New & Edit components to the App() to be rendered on the home page. Meaning you will see the form data(which is in the New component) and the example data(in the Edit component)
5. Detail Your Next Steps
The last few minutes were dedicated to running the code and documenting what I would have done next if given more time. Not everyone will complete the coding challenge in an hour, but, the information you provide next detailing what you would have done could be just as sufficient as completing the challenge.
After that, I inspected the console in the browser and saw a setInterval() timer being flagged so I stood up and breathed, waving the white flag. 😁
— — — ____ — — -______ — — — _______ — — -________ — — ________ —
What did you think about my walk-through? Hope it helps.
