Tesla Frontend Intern Mock Technical Interview | React.js, JavaScript, Algorithms

them so yeah so first thing we're going to do is get started with the behavioral questions so my first behavioral question for you is can you introduce yourself just tell me a little bit about you given like you're an OSU student some of the things you do on campus and yeah oh yeah um my focus is definitely on web design I'm also working part-time as a software engineering editor of the Oregon State University sustainability office where I manage some website support traffic energy usage on campus um in my free time I also work on some open source projects for the career that Hitman Gaming Community and I'm excited to learn more about my work here at Tesla awesome great nice and could you talk a little bit more about your current job as a software engineering intern so what does your day-to-day look like so the day to day is that uh this is like a like the bulk of my product and maintaining already existing projects uh and we always need updates for example recently we had to update the Lambda runtime from those 10 to note 12 or I think we're on node 16 now stuff like that or I'm always looking for opportunities to optimize the workflow and build what we already have so for example I received recently implemented a system for checking all of our endpoints for our energy usage database kind of like do some data validation and then you know it'll send me an email if there's any errors this was something that successfully proposed to my manager I'll discuss implementation details and uploaded it awesome awesome sounds good thank you great and then I also wanted to ask a little bit about Tesla and like the role so we're applying for like a product manager role but it's definitely very front end focused so why in particular did you apply to Tesla and like why should Tesla hire you yeah so um of the awesome thing I became interested in this particular Tesla role because my good professor Alexander Old Bridge has a connection with the super targeting team at Tesla I recommend a role to me um but even before the recommendation of a professor I'm using Tesla's website it's all power guide for my sustainability office work at OSU we currently use the test Plus data for I know a lot of what Tesla stands for a sustainable energy they kind of like making a future where everyone can drive safely with electric cars yeah I think since I'm already doing some sustainability work with the OSU I guess I'm interested in continuing to access that as well as a engineer or product manager awesome yeah that's great to hear that you have a background in sustainability already you're a very good fit for the role awesome so thank you for introducing yourself now I think we're ready to get started with the cutting exercise so the way this is going to work is I'm gonna first ask you like a very simple code in question and then we're gonna like just keep expanding from that and then just you can treat it as a collaboration chess I'm not really going to be um I'll let you write the code let you like come up with ideas however if you need help at any time just be sure to call it out so for this first question um it's a very simple question but if you can see I would say navigate to the app.tsx file and I'm just going to clear the or clear the app component and the first thing I want you to do is when I'm going to give you an input so let me write a test input so let's say I have an input name word or I'm going to say sentence and we have this sentence so this sentence can be Tom is a cat and then what I want you to do with the sentence is count the number of words in this sentence and then you can do this in any language you want but I highly recommend doing it in JavaScript and jsx and if you want you can just write it in the component and then just render the number of words in a sentence so essentially what you'll be doing is taking the sentence as like a prop and then counting the number of words and rendering that on the screen right yeah awesome so I'm not sure about I'll do this in Charlotte and react and I'll do it rather JavaScript but my general coach who would be to split by the spaces that seems the victim goes straightforward method and then so the only way you just use the JavaScript splitting it was too confident but I guess I got started by making an input box I guess as it seems like this is different yeah for sure feel free to edit the code however you see that so I want the open documentation at this point that it will be a way to communicator yeah so you'd say normally I'd actually look up this because I don't have full understanding of like the method so I'm going to look up the documentation for that so I'll look at the documentation because I generally for sure no worries foreign foreign console feel free to assume that app is receiving a prop called sentence so what you could do is um assume like you're getting a sentence actually destructure it send or you can also handle input as well which would be a nice to have so whatever you feel fit or more comfortable doing it does not currently exist in the code exactly foreign box so how do you think you could make it essentially Dynamic to whatever the input is okay yeah that sounds like a great idea foreign yeah awesome all right Jeff let's move there really quick sorry to interrupt you it's on a channel right below General stage moderators so it should be all good appreciate that Robert thank you yeah yeah no you did it right so could you possibly walk me through what you're doing right now I see yeah so the way we do it in react is just using a callback with the on click so if you wanted to pass that function in you would do um just right and click foreign yeah what do you think about using so while we were doing I see I'm seeing your implementation it definitely could be valid but could you possibly do it in a more reactive way so that you can react to uh the changes so I assume you know about something called state so that while the user is typing if they just type Tom without clicking the button you can essentially count the words as they type how would you implement that import oh yeah so there's already you stay imported yep and then you can just change this to react.u state foreign so what are you currently doing excuse me foreign so you'll have to update this to be a callback or so you could do so now you can just cancel our log value awesome so Tom if I click the button it constantly loads time awesome like I know how to like if this is a big product I'm used to looking everything up if you're I think on the spot you're a simple question about that like let's see yeah so how would you count the words now all right so yes I would say like this is the start and then for you so I'm kind of thinking like we just detect every space right and then like okay word exactly I think you're on the right track with using the built-in method dot split yeah but overflow okay I could probably remove this part for the function s foreign [Applause] [Applause] uh a week after a wonderful awesome perfect so why did you add that dot length minus one awesome great so now if I type taco cat one I should get three perfect great job so that was the intro question just to like get your feet wet and yeah awesome so now I'm gonna clear what you currently have since you successfully solved it and then we'll move on to the next question um return uh oh I think I deleted the function foreign just remove that okay and that and this perfect so for this next question I'm going to test like your knowledge of just pure react and see like what you can do in regards to like ambiguous requirements so what I'm gonna do is I'm going to give you a link to essentially uh image URL so I'm going to give you some link to the URL and what I want you to do is create a series of cards of that URL so essentially like a picture gallery but all of them can be the same URL but I want you to create an array of cards essentially so yeah I'm gonna give you this URL really quick let me get [Music] um second so URLs currently bugging let me see if I can just grab an image awesome so here's the URL that I have for you um and what I do I want you to do is essentially show a bunch of cards on the screen and I'm gonna say can you have so it's going to be a count so depending on what the prop takes in is the function so we're going to have some function so function card and this is going to take a prop and the props that I want you to grab from this function is the count and that's going to be the number of cards you're going to remember render so if I give you 20 account you're going to render 20 cards [Applause] yeah so I want you to make a list of 20 cards and you can style it however Warren doesn't have to look great but I just want you to create a yeah so for the content I just want you to create um any type of like placeholder hello from card kind of like what I have in the card component already so I kind of set it up for you but I just want you to expect that and then I'm also going to set up the rendering so Carter I'm just going to say props we'll say count and yeah and then I'm going to set the count here set account react.u state and then we'll set count to 20 to start off and then if I render the count I can just do props.com and that didn't work let's just destructure it awesome and to make it easier what you can do is actually assume that there's also going to be a URL and yeah and then I'll also pass in the URL so cons hero and we'll set it to this URL so there's an example of the card showing up on the screen so what are you thinking off the bat let me see if I can get you a better image so what are you thinking uh as I'm trying to make a dynamic with cars awesome so there's some built-in methods for doing that and react as you know so one thing I would recommend is possibly looking into State and creating an array of objects report thank you also no rush but we have about 15 minutes left it's not like these are a different contest right I'm thinking about like doing a career we didn't take the same confidence yeah but don't worry about the content being different do it the right way like that when you saying um so we're currently at 30 minutes in and you have until 45. foreign so what was that code that you just pasted foreign so how would you transfer this to map a component and where should the the variable live given that you're expecting a count in a URL foreign so I see that you're kind of going down the wrong path um could you possibly think about where the state and everything else lives versus what the card component's actually trying to do I feel like that could make it a little bit more clear on where you should be implementing this stuff yeah so if you're given the count in the URL and we want an array how would you create an array given that I'm thinking maybe like a for Loop where you create an object for each Loop which contains the count and then the URL foreign so I think you we kind of have to recall like what the card component is for it's purely just to render a URL given account if it makes it any easier what if I just removed count and then here I just give you your own foreign so I'm gonna I'm gonna give you a little hint so I'm gonna give you a state variable it's gonna be card and then set cards and then that's gonna be a reactive State array foreign state favorable position and you've done that on that array that particulation I'm sorry I see okay yeah that's that's exactly what I wanted sounds good yeah however how would you access the state from within this component like this isn't valid code oh yeah because if you're setting the card state to the URL it's no longer an array so you're calling the hook Within a loop which is anti-patterning and you're calling a hook but then yeah so I don't think this would be valid code but remember this is just purely for rendering this card component here you're only given a URL and you have to show the card so I think what your your misconfusion is is that you're trying to implement it in the card component but not the app component where the state lives and you can't you can't reset a state variable without using set state or set cards in this case yeah I can give you like a default value of what I expected so or in this case that Euro that's above there and what you're trying to I don't know if you've checked out the program output but you're getting a lot of Errors because you're doing an infinite Loop by setting a state within the main part of the component so how would you counter that oh it looks like we actually ran out of time so yeah we're gonna have to call it but yeah I think when you describe like what your approach is trying to do I feel like that was like a valid solution so if you just kind of stuck with that you probably would have ended up solving the problem but yeah you completed the first problem so that's good and yeah so I guess now we can go into like debriefing so so at least like as like the interviewer in this case in this scenario I'm thinking like a lot of the things that you're doing weren't very clear to me especially since you're doing a lot of Googling and like and since it's the nature of an interview to like see what you know I don't think it's actually like a right choice to do that because essentially I'm trying to see exactly how much like react and JavaScript you know not some like arbitrary HTML CSS Etc so my one tip for you is probably just brush up on that type of thing and like just peer react and then also my comment like it goes hand in hand with like using Google is great like we're software Engineers but I really want to see like test your knowledge not Google's you know and then also like by clarifying so notice how at the end you kind of clarified the question if you clarified the question more up front I think it would have been more clear on how to like go about it and then also whenever you're coding in silence I can't really like tell what you're doing so I kind of want to like hear you like speak aloud and explain your thought process while you're typing and I know that's like not inherently easy but if you could give me like some comments or some way to know exactly what you're doing and when that would be great and yeah also like I saw you tried using like set State and stuff like that but that's just kind of trying to fight against react so I would have liked to see more like following the pattern that I kind of started going with so I could see how you would like take some requirements and then figure it to that spec but yeah all in all you solved the first question pretty good um I will say that like you probably don't want to be like Googling highly like how do you split a string JavaScript in a Tesla interview but I'll say that you solved the problem so you have that and yeah I guess we can actually like just reveal the solution right now I've done things yeah and and then I'm just revealing the sushi right now all right uh actually this is a card index awesome so you can see that actually renders the car and then if we increase let's say we have like multiple cards so I do this this um this is exactly how you would do it in any code base yeah yeah so you were definitely like overthinking because of the pressure of an interview but that's pretty normal but yeah so that's the solution I expected and yeah but yeah so thank you for watching peace

Channel: Tom Nyuma

Views: 232

Keywords: react, interview, frontend, intern, mock interview, javascript, typescript, coderpad

Id: DEm4qqylqhQ

Length: 49min 1sec (2941 seconds)

Published: Fri May 26 2023