Front End Mock Technical Interview | JavaScript, CSS, React, and Algorithms

[@DonTheDeveloper]

Here's a code sandbox link to the template for these problems. JS questions are in "/vanilla-js-qs/index.js" and the React app is in "src/App.js": codesandbox.io/s/vanilla-js-react-pokedex-i7clq

[@inordirectional]

I would be super happy to work on a team lead by Dan. Seems like a great mentor and an easy guy to get along with

[@DonTheDeveloper]

He absolutely is. He ended up being a great mentor and friend to me.

[@Kelz_369]

This is a really great video... i was literally pausing between some of the questions to solve them on my own. Would love to see more interview content like this :-)

[@licokr]

He's a great mentor who seniors should be, and also the interviewee has a good attitude. Under the pressure, he kept asking questions and requesting feedback, and he was waiting for until the feedback had done. Everyone would face difficulties when they start learning for the first time. I believe that attitude is more important than skills for the future. I'm sure the interviewee is going to be a great senior. Thank you for sharing the video. It's absolutely amazing.

[@alexl4853]

This gives me so much confidence! I think I’m ready for a job! Thank for this!

[@jessicachen8865]

This is a great mock interview and as an aspiring developer myself, gives me a lot of insight of what kind of questions I can expect and what my general knowledge/skill should be at. Thank you!

[@DonTheDeveloper]

It looks like this podcast episode was well received. I'm glad it helped so many people! If you'd like to see more mock interviews, what other types of interviews would you like to see? Reply to this comment with your ideas. I'd love to hear them.

[@taeril1]

Hi there, really loved this one. It's great opportunity for people to get some ideas and preparation for interviews. How ever, for me it was even better for other reasons, because I'm working on two jobs, when I get home, i don't really have time watching others coding, rather I spent this little time coding on my own. Though, i have time on my job listening Podcasts etc, that's why I like your channel as well, so I really liked this one, even without watching it I could follow it and even learn something new. What I would like to find or listen is someone coding their project and talking and explaining steps, similar to what they were doing here. Usually, developers just code, talk here and there what they are doing, but missing lot of things out, and if you aren't really watching, you can't really figure out whole process. Well, I'm not really sure there's much interest for this, but if you think this would be interesting to your audience, i would definitely like it

[@philipbeauford]

Please get Dan to just do a few more of these same type of React focused interviews but with different candidates bc each will have different skill levels and performance which would be great to learn from, seeing the differences from candidate to candidate.

[@taeril1]

@@philipbeauford Don does whatever Don wants, no need to ask me to get him to do anything, as I really don't have any such power to make Don do anything (though, if I'm completely honest, I'm writing this little sweet script that will make Don make my all wishes come true, but please, don't let anyone knows about this one, this will be our little secret and when I have it done, I'll make Don realise your wish as well, agreed?). I was simply giving suggestion based on my experience, so can you to as well, and I believe Don understood your wish as writing it for him and not for me, but I couldn't help to make fun of it, I'm sorry

[@pretto417]

Please make more! At Onja Madagascar, we use this video as an example of good interview technique.

[@marktellez3701]

It is really well done!

[@a_drunk_carry371]

I'm finding this also a year later, but thanks for this video! I'm a tech recruiter and often have frontend applicants ask about the on-site interview process. A peek into how things go after we switch hands over to the engineers helps a ton. Both in helping the candidate be well prepared and in me knowing the deeper level things on certain stacks.

[@melandau]

function sum(...args) { return args.reduce((acc, val) => acc + val, 0) }

const sum = (num1, num2) => num1+num2;

[@laszloekovacs]

Thank you. This gave me some confidence boost. I am stuck in tutorial hell for such a long time I don't even want to reveal. I always worried everyone codes like in the 30 second fireship vids. Sadly you never see how it really looks like.

[@pratikgajjar6183]

49:07 if you're using await, you do not need promise (then function). You can simply await the api call and return data.json().result.

[@scottmillion]

If this is an average technical interview then I'm way beyond ready. Let's go! Got one tonight.

[@senorarty6745]

any updates?

[@UvstudioCaToronto]

The average interview I've had is more challenging than this.

[@malcolmharris7363]

He took it really easy on him. These questions are not to be expected on standard interviews.

[@akashuday7107]

Agreed generally they are way harder😭😭

[@Last6251]

@@UvstudioCaToronto ю

[@Akash-yr2if]

Most Chilled Interviewee ever born

[@guerra37]

Very helpful, informative, and very well put together. I have an interview this week and this video helped A LOT. Thanks to all parts involved, great stuff.

[@DonTheDeveloper]

Good luck with the interview.

[@ozzyfromspace]

the interviewer is an incredibly patient dude, mad props to him. the react section was particularly painful ngl. I hope the guy interviewing for the position has made even more progress since then 🙏🏽☮️

[@alechemy]

Awesome video. For any curious about the final, "hardest" question in the JS lightning round (the one that deals with Promises and async/await), here is one solution: const delay = (n) => { return new Promise((resolve, _reject) => setTimeout(() => resolve(), n)); } (async () => { console.log("Testing delay"); await delay(1000); console.log("Testing delay end"); })()

[@alfredwindslow1894]

Yes, also an even cleaner option is to just do setTimeout(resolve, n), since you aren’t passing any arguments into resolve and you’re only calling resolve in the callback, you can just directly use resolve as the callback.

[@rrrrrrrojan]

this is a gold mine. I had one interview, if I would rate my performance it would be below 50%. I knew what to do, how to build projects(using google, documentation and so on). But, I was unable to explain very simple things in clear way. Anyway, really helpful video, it inspired me, give me bit of hope that I can make it as developer, I need more time to learn, and improve communication and interview skill.

[@TheVideogamemaster9]

As someone who already has experience doing pokedex projects as far back as 2017, I'm so hyped that I could've fully completed the project (with css styling) within the allotted time. If my interviews are anything like this, I'll be a frontend engineer in no time!

[@barcalona55]

Wow I got all the HTML and CSS questions correct. Gives me confidence now.

[@DonTheDeveloper]

I just released another mock interview today that gives a peak into a senior software engineer interview. Check it out here. kzbin.info/www/bejne/r5vYZa2tgLiln6s If you'd like to participate in an entry level backend mock interview (on the podcast), just share your email with me here and I'll be in touch. forms.gle/r6cs4X6kR38sWAZV6 Thanks!

[@jpm8288]

10:20 starts the technical questions

[@xrr-1]

I wish frontend interviews in India were this awesome. All questions that are asked in this interview are used in the day to day life of a FE engineer. There are some companies here that reject if we don't memorize the latest version of a framework/library.

[@DonTheDeveloper]

I've heard many stories similar to what you're sharing. You're definitely not he only person in India that feels that way.

[@xrr-1]

@@DonTheDeveloper true. great video, would be great if you guys can also do this with a senior frontend engineer as the interviewee.

[@DonTheDeveloper]

@@xrr-1 As the interviewer or interviewee?

[@xrr-1]

@@DonTheDeveloper interviewee

[@DonTheDeveloper]

@@xrr-1 Why’s that?

[@usernamediv]

Thank you so much for doing these! They are extremely helpful! I think one thing that would be really cool is having access to the codepen or interview questions so that we can try the problems out ourselves before watching.

[@DonTheDeveloper]

You're welcome! You're not the only person to suggest that. I'll reach out to Dan to see if he still has those links available.

[@liezlmier1687]

me too I lke to try coding this as well

[@wesatat]

@@DonTheDeveloper Did he have the link?

[@Ohcheesewhiz]

Seriously such a great video! I was feeling really nervous and unconfident for my interview but after watching this I hope it is actually like this. Super confident after watching this. Thanks for making this! Hope you guys can do more like this.

[@DonTheDeveloper]

I'm glad this gave you a confidence boost. You got this!

[@consoledoterror971]

How did the interview go for you?

[@fragrantbloom]

How did it go!?

[@CreeperCatsGaming]

Thank you for uploading these mock interviews, they really help boost my confidence and show me what I need to improve on.

[@DonTheDeveloper]

Glad to hear it. You're welcome.

[@n_fan329]

38:40 tab.filter(val => val.name).map(val => val.name)

[@swtlynn93]

Thank you for sharing this! It gives me so much more insight as I’m still on my self-taught journey as a FE Dev. It’s nice to know that they actually give you prompts. I thought they just show you a random website and say, “okay, share your screen and build” - which is extremely intimidating. I hope this is exactly how majority of the interviews are because my brain isn’t creative enough to just “build” a website. Based off of this video, it really seems like it’s a lot of “how you think” and “what you’re thinking” and “how are you executing this code”.

[@claraharmonson2181]

This video is pure gold!!! Thank you so much for this. please have more interviews coming!!!

[@andrewwoan]

This was an amazing interview. Thank you so much for sharing this video it's super helpful.

[@abrahamosas7129]

super grateful for this mock interview video. It really helped boost my confidence

[@iheachochristian807]

Write a function that takes two strings A and B and return whether B is in A in case-sensitve way const checkChar = (string1, string2) => { return string1.indexOf(string2) >= 0; } console.log(checkChar("Obinna", "Ob"))

[@polyAesthetics]

Nice Don! Thanks to Dan and Noa!

[@crisi6754]

This was awesome bro! Thank you so much for this!

[@deepseablu91]

I have a frontend engineer interview next week!! My dream job!! 🥺 Thank you so much for doing this!! Also, love the Pokemon theme 💚💚💚

[@DonTheDeveloper]

Haha thanks. Good luck with the interview.

[@AnonymousWolfx]

Hey Gabrielle, How did it go?

[@bakihanma1865]

this was an awesome interview , I haven't gone through any interviews myself yet , but it gives me hope that I'm getting closer to start applying for jobs, since all these tasks seemed to be pretty basic

[@Wanderer2035]

I noticed it’s easy to fall into the trap of focusing on and learning a lot of the big stuff like frameworks, JavaScript, databases etc, but not on the small easy fundamental things, so small that it’s overlook and that’s how the interview can catch you off guard. Like css specificity and html webpage formatting, those things are really easy, but so much so that it’s easy to forget about and that’s why it can be challenging. So we should not only focus on the big things but also the small fundamental things.

[@joeblack5638]

Nice. Thanks for the interview!

[@lifeincentralvalley9430]

Great job! I liked it, could you do more front end engineer interviews like this one? There's not a lot of resources on FEE interviews

[@DonTheDeveloper]

Thanks. What things would need to be similar and what would need to be different for another FE mock interview to be valuable to you?

[@oktadoputra872]

@@DonTheDeveloper i think some technical coding interview, like hackerrank etc.

[@EstebanInTech]

Love this this was very helpful as i will start applying to front end developer jobs next month! great to know what to expect. Please make more of these!

[@alpsavasdev]

This is awesome! Thank you for this, really appreciate

[@shabnamnaaz4676]

this interviewer is really sweet.

[@costcomembership4617]

wait.. im a noob at javascript and have been learning react for about a week, and these questions are pretty easy. is this the difficulty of an average frontend technical interview?

[@horne1395]

this seems too easy tbh.

[@justusbuyu9344]

Loved this ! Definitely looking forward to more!

[@ultronsam1214]

@29:33 The dot dot dot parameter is known as Rest Parameter. More efficient than the argument keyword (pseudo array-like). I guess!

[@coyoliver7410]

This is seriously valuable content!

[@kevinchaplin672]

Front End dev job interview in two days, very useful, thanks guys.

[@DonTheDeveloper]

Good luck!

[@SatoshiSky]

2 years late but how'd it go? Are you a Front End Developer?

[@kevinchaplin672]

@@SatoshiSky lol Not sure if it was this one, but I got a job in the end. I think the numbers were something like 1000 hours of study, 100 job applications, interviews at 5 companies (some of them up to 3 interviews) and `1 job offer! It was just a contractor job, so worked there for a year and now in my second job, full-time at a very nice company and a great team. To anyone reading this, just hang in there, don't over think it, just keep working and you'll get there.

[@alexandrnasonov]

Thanks for your video it's really helpful for me because I'm not a native English speaker and I searched example frontend interview for my next job in English

[@jpm8288]

When he brought out the pokedex problem and wanted him to solve it on the spot, I started to get worried lol. I would shit my pants if they wanted me to put all that together in 25 minutes in an interview. Seems more like a take home problem. Also, it would be nice to have a link to some of these mock problems. I would like to try the pokedex problem myself.

[@madhusudhan4001]

Shout out: --- "I KNOW THIS IS MOCK INTERVIEW BUT IF YOU CAN SOLVE THIS IN GIVEN TIME, WE WILL GIVE YOU JOB IMMEDIATELY" this is epic lol A pro and con about this interview: pro: first, the content is amazing every question is super good and this is how questions will be usually in interviews. con: in my experience i was never asked this many questions in that limited amount of time: the algos in this video during the functions part --- i would never go for a predefined method, instead, i would do a proper algo which would almost take 30 minutes of my time.

[@racerten4481]

Gold interview. Thank you

[@TheMeepPlay]

I just recently went on a interview where the person ask me to build a single app with react with fetch, saving data, forms, pages, validations, with all methods to save the new data from the form, basically a crud, delete with a popping ui to ask if you are sure of the delete, and all of that 1 hour, i felt really discourage cause i wasnt able of doing it all, and it was my first interview for a junior job...

[@eldowado]

That is such a large task, especially if you weren't expecting it. I think that interviewing in itself is a skill that we need to work on - I personally am here because I am pretty well established a developer by now, but I never really had to interview for any of the roles I got. Be encouraged, and I that you at least took something away from that interview!

[@TheMeepPlay]

@@eldowado ty, yeah at least it was worth the experience!

[@DonTheDeveloper]

Sounds like a lot of fun. Stop focusing so much on finishing the challenge, and enjoy the process. Talk with the interviewer. Have fun!

[@riceball100]

Would love to see a mid-level to senior level coding interview around 4-5 years of experience kind

[@DonTheDeveloper]

Here you go. kzbin.info/www/bejne/r5vYZa2tgLiln6s

[@kinxori]

I feel like most of the interviews I've had for a Jr role are mid-level 💀💀💀

[@arifmuhamadthalhah9043]

Just landed my very 1st job with the same api😂, thx for the mock interview , great as always

[@hirekaanmanasseh4692]

This was really an amazing mock interview really gave me a good insight on how a frontend technical interview is , Thanks a lot for sharing, Please would love to get the starter code, if possible for the react interview to try and test myself and also try to time myself while doing it

[@DonTheDeveloper]

I just pinned a new comment with the code sandbox link.

[@hirekaanmanasseh4692]

@@DonTheDeveloper Thanks alot

[@slaffsla]

This was very helpful and fun to watch! The text was hard to read from time to time, but mostly it was fine.

[@MakeshiaCook]

Awesome insight! Thanks! Greatly Appreciated..

[@MirzaIrtiza]

I have a front-end Engineer III level interview coming weekdays. can anybody help me to provide the technical interview links

[@JakeSummers2424]

The real question is how good are they at writing e2e and unit tests.

[@brettRaper1996]

41:00 no disrespect at all meant in my statement, are you actually allowed to look things up during an interview? very surprising to see.

[@stan_de]

Nice interview. And I feel so confident now :) I would pass this one even maybe a bit faster though :) Do you hire more ppl? 😅

[@FatahChan]

Hey there, I am a student, and I haven't had an internship, I would like do a mock interview as it seems like it's really helpful thing to expernice

[@AndrewTSq]

Actually, I felt like a pro when I saw him do the plain javascript :D and I would never be hired as a developer for JS. just a thing like doing the sum of arguments function sum(...args) { return args.reduce((a,b)=>{return a+b})}

[@AndrewTSq]

getnames function, I wrote as function getNames(arr) { return arr.filter(value=>value.hasOwnProperty("name")).map(value=>value.name) }

[@AndrewTSq]

but I felt stupid when it comes to react lol :)

[@elisamunozespineira6809]

Loved it! Where can I find more templates like this to practice?

[@angelrivera4491]

Thanks for this video ! it is gold for me !

[@DonTheDeveloper]

You're welcome!

[@CuongQuoc-el2sl]

Can i have the codesandbox links? thx.

[@ainneo]

please do more mock interviews!!!! loved this!!!!

[@DonTheDeveloper]

Don't worry. There will be more.

[@tonidwi4123]

Why fe interview no solve struktur data and algorithm like be but just solve interface?

[@philipkenyatta6638]

Great video guys but tiny font zoom the coding area

[@pinpon163]

Love the Sufjan Stevens lyrics at 26:43

[@alia2279]

Thank you so much Don😊 Do you have any information about Tech Elevator coding BootCamp? Can you do a review.. I was thinking to join this summer but was not able to find any reviews on KZbin. Thanks

[@DonTheDeveloper]

You're welcome. I'll certainly keep it in mind. Thanks for the suggestion.

[@only_oneone1751]

Just wondering which level of position does this interview aim to?

[@DonTheDeveloper]

junior

[@taggs4317]

This was so good!!!!

[@rawstrife9762]

Please more react fee interviews this was very enjoyable to watch!

[@SatoshiSky]

Would this be an "entry level" interview or would this be a mid/senior interview? Trying to gauge the complexity level of the react project from the perspective of someone who is brand new to coding (me).

[@DonTheDeveloper]

This is an entry level interview ...back then. It'll be a little more difficult now for entry level developers.

[@youtubejproasters1224]

Hi, so i am about getting into a bootcamp for web development and its for beginners without prior knowledge at all , is this Interview for entry level pass?

[@SS-bb1nc]

Hey I may be closer than I thought!!

[@MirzaIrtiza]

can anybody tell me, what is the front-end level for this interview??

[@DonTheDeveloper]

junior

[@truth8422]

@@DonTheDeveloper So junior means a total beginner? I have almost 2 years of experience. Is this what I should expect? Thanks in advance.

[@akeinchina]

I hope my interviewers are nice like this..

[@heroyuki44]

Thank you for this excellent interview! Are these some common questions for entry level positions?

[@DonTheDeveloper]

You can expect any of those questions to potentially come up in a frontend interview. The real question is - should you have answers to all of those questions? Definitely yes.

[@heroyuki44]

@@DonTheDeveloper this makes me confident. I listened to the podcast version of this and I was answering the questions out loud. I really need to get those projects done and hosted!

[@handikadwi7559]

can we really open google while doing tech interview?

[@dimapintilie2760]

Don i appreciate this format of video but there is a issue about 720p quality and that makes hard to read the codes shown. Thanks again for your content 🙏

[@DonTheDeveloper]

Bump it up to 1080p. Looks readable on my end.

[@dimapintilie2760]

@@DonTheDeveloper Ohh , i pressed Higher picture Quality, this option sets no more than 720p. I put this video on 1080p by accessing Advanced mode option . Sorry for disturbing 🥲

[@MarinaVendetta]

How long should one take to finish the whole Pokedex App? Great video btw! Very helpful.

[@DonTheDeveloper]

Thanks. I don't think finishing the app or timing it was ever a focus. If you practiced building the app yourself and finished it. That's awesome.

[@CharlieNotChaplin]

The man has some insanely fast typing speed. 🤯

[@johnacsyen]

@22:58, having !important in the css is a no-no in my opinion

[@sakibcoder]

If this is what Frontend Interview look like, then I'm ready for interview. I don't think anyone can get hired with this preparation. Am I right?

[@raphaeljatoba]

Thank you Don.

[@CreepyHollow]

Good Lord, I'm currently self-teaching in an effort to change careers, if I ever get to the point of applying for jobs, I'm going to die during the interview.

[@williammansfield7471]

Funny watching this. Today I don't have to think through the "possible" solutions. I consult A.I. so I'm curious how new employers are dealing with that. My current employer embraces and insists that we use A.I. and select the most streamlined appropriate answer. Anyone have any interviews where they are not allowing A.I. still?

[@sarahconteh1406]

What is something that you would traditionally do as backend that is now frontend?

[@阳蔡]

It realy helps! thx!

[@manishmayur7454]

wanna talk personally with you is it possible?

[@Mamuka_Khurtsidze1]

Respect!

[@itSUFzz]

I’m going to be honest; I’m very scared on seeming dumb during these interviews… that crazy thing I’m just starting a Thinkful bootcamp and 3 days in my prep and I feel like I’ve just absorbed nothing

[@taylorswyter3621]

You can one-line the sum function. const sum = (...numbers) => numbers.reduce((acc, number) => acc += number, 0); Is there any reason you wouldn't?

[@lollv524]

Cool Thanks!!!

[@thomashoffman5217]

This was great, but y'all should have checked the typeOf of the parameter in those beginning functions before doing any type of logic. That's just me nitpicking, but excellent video!

[@timtim1145]

Is this mock interview more geared towards mid-level applicants?

[@DonTheDeveloper]

Entry level

[@timtim1145]

@@DonTheDeveloper oof, looks like I'll need way more studying to do lol. Thanks for letting me know

[@DonTheDeveloper]

@@timtim1145 No problem. You got this.

[@jhjhj2172]

till 13:36

[@tkimdev]

I wish I got pokedex problem for an interview :)

[@DonTheDeveloper]

That'd be so much fun.

[@jhowzeen7141]

thanks guys