Live Coding in an interview and how companies are starting to do it right.

This week's Part Two was supposed to cover my improvements to the NPC Generator, but I decided to table that and focus on coding interviews instead. I had one this week, and it was the best one I've ever had.

Keeping track of dishes while traveling was the company's project and I was asked to design an MVP spending 30-45 minutes max. The premise was that it would be an application used by a chef to enter dishes in a form, add them to a list, display the list, and finally delete a dish.

In a nutshell, I presented my application during the interview and we would build it to offer more functionality according to the interviewer's directions.

What impressed me most about the email was the words they used to describe my success in the technical interview phase. I liked how it addressed how interviews can be stressful and presented it in a more personable way. They encouraged me to work in a language or framework I was comfortable with and genuinely seemed to want me to succeed, and that came across in the interview and after.

Was a great report built in the beginning with my interviewer and us exchanging some stories and with me sprinkling some small hooks for later use in my questions at the end.

During the interview I was asked to add functionality to add ingredients to each dish. Since I needed to build this quickly I opted to not use a backend to store data and just use State to store all info.

originally my constructor was this

constructor(props) {
    super(props);
    this.state = {
      dishes: []
    };
    this.addDish = this.addDish.bind(this);
    this.deleteDish = this.deleteDish.bind(this);
  }

just an array to concat the dishes into with two binds to pass "this" down to the delete and add dish methods I created.

I hadn't worked with state in a minute but was so glad I had gone back and refreshed my brain on syntax and constructors before. the interview.

BIG TIP

go back and refresh on your basics. that is one thing. I learned from a previous one I could do some very advanced things but man some of my basics were lagging. That made this interview so much more fruitful.

END OF TIP

my updated construcor became this.

constructor(props) {
    super(props);
    this.state = {
      dishes: [
        {
          name: "",
          ingredients: [],
        },
      ],
    };
    this.addDish = this.addDish.bind(this);
    this.deleteDish = this.deleteDish.bind(this);
  }

then I had to go through and update the rest of the app to account for the ingredients.

my add dish went from this .

addDish(event) {
    if (this._inputElementName.value !== "") {
      const newDish = {
        dishes: this._inputElement.value,
        key: Date.now(),
      };

      this.setState((prevState) => {
        return {
          dishes: prevState.dishes.concat(newDish),
        };
      });
      this._inputElement.value = "";
    }

which was then changed to this.

addDish(event) {
    if (this._inputElementName.value !== "") {
      const newDish = {
        name: this._inputElementName.value,
        ingredients: this._inputElementIngredient.value,
        key: Date.now(),
      };

      this.setState((prevState) => {
        return {
          dishes: prevState.dishes.concat(newDish),
        };
      });
      this._inputElementName.value = "";
      this._inputElementIngredient.value = "";
    }

I then updated my ref elements to account for the new value and new ingredient and then changing dishes to name which was one thing I over looked and had me debugging for a little bit. to figure out why my values where not presenting when I added a new dish.

BIG TIP 2

get comfortable with console.logs() and whatever debugger your language uses and use them often and frequently. one thing I learned from my teacher was to solve a lot of headaches was anytime i was passing data "which is pretty much all the time" it always keeps you on your toes and will let you know data isn't being passed correctly before you get to far and have to hunt down why and where you made your mistake.

END OF TIP 2

the other functionality that we didn't quite get to was using a list of ingredients what possible dishes could someone make. I was able to make a pseudo version of what it would look like and then walk my interviewer of how I would build it. We did this Because she wanted to make sure to leave time for my questions.

Those questions are so important in an interview that I spent a lot of time coming up with ten and then whittling it down to five depending on how technical the person was.
through those I was really able to build a good report with my interview finding out what set the company aside from others. I was able to cut through the typical BS responses. The information they provided was useful for getting a better understanding of what to expect in the next steps. They had gone through the same program as me, and some solid advice was given. It is always my practice to ask for a timeline at the end to temper expectations and be aware of when to follow up if I do not hear back.

All in all, it was the most professional and personal interview I have ever had. It was really impressive to me how everything was designed to really drive me to succeed and that I was able to really demonstrate my strengths in what I know and how I work.

I'm happy to see more industries take a page from their book and keep building toward creating a better interview process. I think for all parties involved it will really push the industry forward to have those who may be overlooked because they don't have a traditional learning background. Which will create stronger developers and stronger more profitable companies because us underrepresented and untraditional learning background people need a foot in the door and we will show you how much drive we have.