rodrigohgpontes / tonebase-interviews-fs-fe

tonebase Interview Boilerplate for Full-Stack Dev. with Front-End Focus

tonebase Technical Interview - FullStack (Front-End Focus)

Welcome to the tonebase Technical Interview! Congratulations, if you're here it means we think you'd make a great addition to the team, based on your past experience, personality and kick-ass skills!

This interview is a small/short test of those skills. Ideally the questions presented and the challenges involved should take no more than 1 hour for an experienced full-stack developer with React chops.

The initial portion of this interview is simply answering a few technical, front-end and React based questions. We can talk through these on a call as I'd love to hear how you think about them/through them!

Types of Questions

This interview has been created for someone who considers themselves a full-stack developer with a focus on the front-end. Very concretely what we mean by this is you feel comfortable spinning up an express server and handling MVC based routes, controlles and middleware... but you really feel at home diving into some React or Vue code and ironing out cross-browser bugs and optimizing SCSS patterns. Or you feel comfortable everywhere, which is even better :)

Our Stack

The questions below are informed by our stack. I will list the details of each below:

• Client
  • NextJS => Server Side React (Github Link) + MadeByWild Boilerplate (Github Link)
  • Firebase Authentication (Documentation)
  • React-Easy State Stores (Github Link)
  • Segment Analytics
• Server/API
  • NodeJS/Express (custom, no off the shelf management system like SAILS)
    • Segment Analytics
• Database
  • Firebase Realtime Database (current)
  • MongoDB (future)
• Payment Processing
  • Chargebee (Subscription Management)
  • Stripe (Payment Processing)
• Marketing Technology
  • Intercom (soon to be removed)
  • FullStory
  • Attribution App
  • HelpScout
  • Customer.io
  • Amplitude
  • Google Analytics
  • SendGrid
  • Google Optimize (A/B, Multivariate)
  • Some others...
• Other
  • Vimeo (Video Hosting)
  • Figma (Design)
  • Canva (Design)
  • Premier (Video Editing) * GIMP (Image Manipulation)

---

Okay, with all that out of the way let's dive into the question section!

1. What made you interested in/choose React as a framework? Was it a choice you made? Regardless, what is the one thing you enjoy most about it compared to other frameworks you've used and what is one thing you dislike about it?

2. Why do the component names in JSX start with capital letters?

3. What are the main types of components you can render in React? When do you choose one over the other?

4. How much experience do you have with testing frameworks? While our testing is light at the moment (read: nonexistent) this is something we'd like to move to in the future so this is a 'nice-to-know' for us!

---

Whew, okay, now moving into a couple of code questions. We don't need you to code anything just yet, but this is more around optimization and undertstanding JS/React.

1. What is wrong with this example, and how would you go about fixing or improving the component?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name || 'Anonymous'
    }
  }
  render() {
    return (
      <p>Hello {this.state.name}</p>
    );
  }
}

2. What's the issue with this component. Why? How would you go about fixing it?

class App extends React.Component {
state = { search: '' }
handleChange = event => {
/**
     * This is a simple implementation of a "debounce" function,
     * which will queue an expression to be called in 250ms and
     * cancel any pending queued expressions. This way we can
     * delay the call 250ms after the user has stoped typing.
     */
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.setState({
        search: event.target.value
      })
    }, 250);
  }
render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        {this.state.search ? <p>Search for: {this.state.search}</p> : null}
      </div>
    )
  }
}

---

Onto just a teensy bit of code + introducing you to our system! This part can be done on your own, and you can ping me when it's good to go! When you're good to go with your implementation and/or happy with it feel free to make a P.R. into this repo. under a new branch titled ${ YOUR_NAME--FullStack--FrontEnd }

Here is a link to a Github repo. containing our NextJS setup. It includes everything already setup for you -- SCSS support, a blank canvas for you to play with, and all the boileplate out of the way.

The Github Repo.

Your challenge is the following:

I, or a designer, just gave you the following design in Figma.

The Figma Design

Please open up that link - you may need to create a Figma account to be able to view it but this should be relatively easy/simple. This is testing your ability to handle design-handoffs in a clean manner, but if this is in any way tricky simply reach out because this is an easily trainable skill and not a requirement!

Your job is to implement this design on that blank page in the NextJS application. Feel free to structure the code in whatever manner you would be proud of shipping. Any framework is just fine to use -- Bootstrap, Material, whatever! Bootstrap is included by default so you don't have to look for how to interface BS + NextJS. Other frameworks might need a little more work/searching.

The implementation is good when you determine it's good -- we're excited to see what you come up with!

Note: The design is intentionally non-prescriptive on interactivity. Adding any or none is up to you. Build this how you would were this going to be shipped to 100,000+ passionate musicians, pianists and guitarists.

---

Lastly, just a bit of writing! We are a company where members of the team are constantly shifting around/traveling, whether to China to manage our upcoming subsidiary there, or to New York and Europe to head productions, attend events, etc.

Thus writing, and the ability to write clearly, logically and to formulate arguments and answers is crucial at tonebase, whether a developer, PM, or A&R manager! These questions aim to give us a better understanding of you as a writer, as well as your development skills.

1. Tell me about componentWillMount and the issues with it?

2. Can you walk me through the cycle of mounting a stateful component? What functions are called in what order? Where would you place a request for data from the API? Why?

3. If you had unlimited time budget and could fix / improve / change one thing in your last project, what would it be and why?

---

That's it! Now it's your time -- feel free to ask any questions you may have and we'd love to answer to the best of our abilities. Thank you so much for taking the time to do this quick interview - we can't wait to see your answers and see if there's a way for us to work together!

At tonebase we truly believe in the following principles:

1. To Educate & Inspire In Everything We Do
2. Think Big, Then Think Bigger
3. Align Around The Mission, Execute Against The Vision
4. Start And End With The Customer
5. Culture Doesn't Just Happen, It's Crafted

We'll let you know very soon if you've moved into the next phase of the interview. In the next step we will introduce you to the founders, our mission + vision, core company values and to our small, close-knit and wonderful team. We're all excited to see where things go and will be in touch ASAP.

If there's anything else or you need to get ahold of the team at any time, you can reach out to [email protected] or reach Abhi, co-founder and Head of Product at [email protected]