React JS Interview Questions ( Job Board - GreatFrontEnd ) - Frontend Coding Interview Experience

let's discuss a very popular react coding question that you may encounter in your tomorrow's frontend interview so the question says that we're supposed to build a job board that displays the latest job posting fetch from The Hacker News API with each posting displaying the job title poster and the date posted so over here you can see they have given us the reference of the UI that we're supposed to make and here are the requirements so the page should show six job in an initial page load okay clicking on the load more will load more jobs all right if there is a URL field then we can click on these links and go to that particular job page if not we should not make that link clickable and the time stamp can be formatted in the way you like okay so here's the API that they've given us so here's the public API that we're supposed to use to fetch all the Y combinated jobs or the companies this particular API will give us all the IDS of the jobs and this other API endpoint will use these IDs to fetch that particular object which will contain the detail of that particular job okay so here's the final result that we're supposed to make as you can see this is fetching The Hacker News jobs and if you scroll down we have this load more jobs if you click on it it's loading and it has loaded more jobs you click on it again it's going to load more job and on every page it's going to load six more jobs and initially as well it's going to have six jobs so we're going to discuss all this page Nation stuff as well in this video but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube okay so with this respect to the requirements that they've given us over here they've given us this API end point so I'm going to just copy it and paste it right over here so const API and point and I'm going to remove this job stories. Json from it because if you see over here this particular endpoint is common in both of these apis so I'll just keep it inside of this variable and just change the text after after it later on so that we don't have to type it again and again okay and the items per page that they've given us should be six so I'll just keep uh wait over here so items page should be six okay and okay they've given us this example object over here as well so I'll just keep it just so that we have something to refer to while we are developing this app so example example response Okay so so far so good let's start and build our UI first but wait you might be thinking what is this platform that I'm doing this question on this looks like lead code except it is for frontend interview questions so click the first link in the description down below and you will land on greatr end.com here you can find hundreds of frontend interview question whether they are JavaScript reactjs frontend DSA question machine coding system design and even behavioral questions as well so if I click on try a question and search job board and here we go we have landed on this question over here they have a plenty of free questions as well so you should check it out properly before deciding to pay I personally have subscribed to their lifetime plan so that I can have access to these questions whenever I like so I'm going to remove this hello world from here I'm going to add the class name of app over here and inside of it I'm going to have a H1 tag which will say Hacker News job board close this up and now first of all I'm going to create a state over here which will be resp responsible for holding all of our items or all of our job postings so I'm going to say use State and let's import use state from react so usate gives us an array and inside of it we have two things one is a variable and other is a function that is used for changing that variable so I'll just say items comma set items and now first of all we're going to check over here if items. length is less than one then just show loading B tag loading our class name of loading else I will display our job listings I'll just have a div over here inside of which I will say job listing so it says cannot read properties of undefined length obviously because this is not an array right now we need to give it some initial value so I'm going to make it initially as an empty array so right now as you can see it's showing loading but let's push some item inside of it so we have our example response over here so I'll just put these example response two times and yeah you can see we have job posting instead of the job listing I'll have a div over here which will contain all of my job listings and then below this I'm going to have a button which will be responsible for loading more jobs this button will simply say load more jobs and inside of this div I'm going to create a new component called job posting and this will render all of our jobs and I'll just give this Dev some class name of items and the role will be off list now this role is very crucial over here because it tells the browser what this div is doing this div has the list of all of these jobs right so you can either say list or job list or whatever right so let's create this job posting component create a function over here obviously you should create a separate file for these components but for now so that everything is visible over here I'm just making this component inside of this file itself and now this will take a few things so let's see if we open our requirements we have a title we have date and time who posted the job and the actual URL to that particular job so I'll have a URL title who posted the job I'll just say buy and the time and I'll just return the title for now so I'll just say d and title cool so obviously we're not supplying anything to this component yet so then I'll go over here and just start rendering all of our Jaws by I'm going to do items. map and I'll return this job posting component from here the item spread that item over here because if you see all of these uh ramps that I have taken over here are the exactly the same that we have inside of here so I've spread this item over here so that this job posting component will receive the exact same params and also we're supposed to provide a key to it which is very important so which I'll keep this id item. id cool and yeah you can see this is starting to show up since both of these job have the same name that is why it's showing this exactly same text and our load more Button as well cool let's go on and further add some stuff inside of this job posting component instead of this title remove it I'll just call this with the class name of post and the role will be list item now of this obviously it's going to have a title so I'll just give h two for the title this will have a class name of postore unor title now this this way of writing CSS class names it's called BM convention you can Google and read more about this now inside of this I'm going to have an a tag which will contain the title so the reason why I've kept this inside of an a tag so that if this has a URL you can click on the title and just directly go to that particular job list okay and I'll just say hre equals to URL if we click on it we go to that particular job listing this will have a class name of so if the URL is there then we're not going to give this any class name but if URL is not there I'm going to say inactive link and we're going to make it not clickable apart from that I'm going to keep Target as blank so that it opens up a new page when we click on it and I'll give it a real tag of no opener this is just so that we can open these links securely so if I click on it you're going to see it opens up a completely different page for our job listing all right now below the title we're going to have a span tag which will contain all of the other details first of all it will contain the buy who has posted the job by and then we're going to format our time so for formatting our time I'll just keep keep a variable over here formatted time and I'll just say new date so this is the date that they've uh given us right the this is the time stamp that they've given us so new date I'm going to create a new date object I'll just say time sorry time multiplied by th000 do2 local now we have bunch of different uh dat date for formats available over here to render so I'll just say what I'll use two local string if you do this and now if we render this time you're going to see the format that it is displayed in will be this which is what we want but if we let's say change it to some other format let's say get day so it's just going to give us the day or let's say do ISO string it's going to give us some other format update so there are bunch of different functions available over here but I'm going to use two local string all right great so I guess that's pretty much it for the GSX part let's go on and give it some Styles first of all I'll just reset everything by doing margin zero padding zero in our body I'll say font family science siif background color so I'll just give this this background color or you could just use white whatever uh feels best because styling is not the main highlight of this question color I'll keep black font side size I'll keep 16 pixels by default padding will be 16 pixels now let's style the individual items first of all I'll style the a tag so color it will inherit the color so that it will not show this uh those purplish colors and text decoration will be none so that we don't uh display these underlines below this after that when we hover on this a tag we want underline so then we're going to say a hover text decoration underline now when there is no URL available we don't want to show these underlines right so I'll just say inactive link will be pointer events none and cursor will be default so if okay let's just remove this URL notice it's not going to show any underline over here so I'll just bring back the URL now for our app Styles I'm going to give it Max width of 600 pixels and some margin zero Auto so that everything is centered in the middle for our title I'm going to say font size of 24 pixels some font weight some color and some margin bottom oh I guess I haven't given the class name of title to this yep that's better for displaying these items over here I'm going to say display grid and draw gap of 16 pixels so I have some gap between them for every single post I'll say background color and some border with some border radius of 4 pixels as you can see over here some padding and some display grid with some row Gap so that they have some gap between them as well now for the title of our particular post I'll say font size of 16 pixels some font weight of bold and some margin top of zero now you can see our UI is starting to take the shape and so over here um we have this pan tag I'm going to give this a class name of post meta data and for this post metadata I'll say font size of 14 pixels and some color of gray some light color of gray then if you remember we have this class name of loading where we will display the loading so let's just remove everything from this and see so yeah let's style this I'm going to give this some color some font weight and some font size and finally for our load more button let me bring back yeah for our load more button I'll just give it some Styles some background color some border some border radius I guess I haven't given it class name yet yeah I should give it load more button button okay that looks good and when we hover on it I should say background color of whatever you feel like so yeah that looks good and obviously I'll just say cursor pointer all right that is it for our UI you can you can see it looks beautiful now let's go on and fetch the API and display the actual data over here but before that if you're preparing for your frontend interview and you would like me to help you in your front interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailor to your situation which is going to help you out a lot in your front-end interview preparation so click the link in the description down below and book a one-on-one call with me so inside of this uh app component first of all I'll just remove these example responses so I'll just create a function here const fetch items and this will take the current page and with with respect to our current page it's going to fetch all of the data so okay before this I'll just um create a few States first one will be item IDs set Item ID so this particular state will contain all of the item IDs that we'll get from the first API so these all of the item IDs it will keep the track all of of all of the item IDs that we already have with us then I'm going to create a state for fetching details this will have the initial value of false so this fetching details state will be responsible for showing loading on our load more button so when we click on load more button it should show loading State over there so obviously this will be false by default and then I'll have one more state which will be of current page so this will keep the track of our pagination Set current page and by default this will be zero okay so now for this fetch items function first of all when we don't have any data with us we're going to invoke this function so inside of our use effect hook so I'll just create a use effect hook over here with empty dependency array so that this runs only one time when our component loads so I'll just say if current page is equals to zero that is we're fetching all of these items for the very first time if it's zero then fetch fetch items and I'll just provide the current page as zero or we can say current page because it's zero by default as well right so yeah all right now let's write the logic inside of this fetch items so this contains two API calls right so we have to be very careful on how we are invoking the second API call because that can result in multiple Network requests and that can be very bad for our backend so okay first of all when uh this fetch items function is called I'll just say Set current page to current page now this uh is the pagination logic will which we will write later in this video but for now uh this will be obviously 0 by default fault so it's just setting the past to zero set fetching details to be true so that we have started fetching all of our details and when the details are fetched successfully we're going to make it false so okay after this I'm going to say let items list equals items IDs so I'm just taking a reference of this items IDs which will be null by default I haven't kept it null over here and now for this item IDs I'll just say if item IDs is equals to null that is it hasn't been fetched yet then I'll go on and fetch this const response equals weit Fetch and now we're going to fetch our API end point so first of all if you remember we've kept this API end point over here also I can remove this since we don't need it so okay I'll just [Music] say API endpoint and now after this we can add our API so what was the API it's job storage. Json so job stories. Json now this will give us some response let's format that response so I'll just say items list to response Dot Json and I have to put a weight over here as well since this is also an asynchronous request and also this function over here will be an async function since we're using a weight over here now after this we're going to set the item IDs to this items list just like that what's wrong use effect is not defined okay let's define the use effect now we have the list of all of our item IDs so let's uh console log this over here console.log let's see inside of our console yep we're getting all of these item IDs great now after this I'll have a variable item IDs for page now this will be responsible for how many item IDs we need to actually render this time I'll just add that page Nation logic later on but for now I'll just replace it with this item list and now since we have this I can fetch all of the actual objects or or the actual job data which we will display over here so const items for page equals a wait wait promise.all now why am I using promise.all combinator over here so because if any one of these job IDs fails to be fetched we want this complete request to be you know discarded we want the complete request to be failed so that is why that's what the job of promise.all is you can if you don't know much about promises you can watch this video that I've made on promises over here link will be in the description down below so inside of this now we can make all of the separate API calls for all of these IDs so I can just say this item ID is for page I'll just take that page. map and I'll take Item ID every single for every single item ID I'll just say fetch and back Teck API endpoint and slash items let's just confirm the API URL it was Slash item okay SL item not items slash item id which we will use over here anything else do Json now I'll say dot then and take the response response doj now you can see there are multiple ways of fetching uh API and then formatting it I've used async aate over here you can use something like this do then. catch way of doing things and then in the end when this returns us all of the response in this items for page as you already know this map returns us with an array right so it will return us with the array of the result so I'll just take it and set items the original set items State I'll just take whatever it's inside of over there items comma items for page and I'll spread that over here and after that I'll just say set fetching details to false let's see how it works so okay it's still showing the loading oh there we go we have all of our data displayed over here okay nope everything is working fine all right so you can see we have data of all of the jobs over here we don't want this much data at one go we just want six items and then we can load more items accordingly with the help of pagination okay before pagination I need to do one more thing if this um this item this item IDs if this is still null then I'll still show loading so I'll just say Item ID is if it's null or item. length is less than one I'll just put it in one bracket then still I need to show loading all right now let's move on to the pagination part of our app so over here in this button on click and on click I'll call fetch items function with the Page Plus one so the current page which was zero plus one I'll move on to the next page and one more thing so we're showing load more jobs over here but when the jobs is being loaded what I want I'll I just say fetch details if it's fetching details that it's if it's loading more jobs I'll just say loading cool then let's go inside of our fetch items function and apply the page ination logic so over here as I already mentioned we're going to say dot slice we're going to only fetch those IDs which are in our current page so let's say for the zth page we fetched from 0 to 6 for the first page we don't need to fetch those 0 to six because they've already been fetched right so we're going to fetch for 7 to 12 so over here let me show you inside of our slice I'll say current page multiplied by items per page so this items per page that we defined at the start of our video and then I say current current page will oops Yeah current page multiplied by items per Page Plus items per page okay so what have I done over here let's see so if the value of current page is 0o to 0 into 6 will be 0 so from 0 to 0 into 6 + 6 so if it's 0 so it's going to go from 0 to 6 if it's one then it's going to be 1 into 6 will be six so 6 2 six uh sorry 1 into 6 will be 6 + 6 will be 12 so for the first page it's going to go from 6 to 12 so this is how we're going to fetch all of the data as we move along so now if you see okay I haven't saved it yet refresh our app yep you can see we are only fetching six items over here and when you click on load more jobs h okay it's not showing the loading State why is that okay on click current Page Plus one so okay we have used current page instead of this variable that we're passing over here should be Cur page so okay now if I click on this yeah you can see loading and it fetched six more jobs if I click on it again awesome but there's one problem over here which is going to be our Edge case so in every video I mentioned that we need to handle edge cases as well in these interviews so if I click on multiple times over here you're going to see it it has made multiple Network request I don't think you can see over here but if you go on into your browser you can definitely see that this will make multiple Network requests so when this is being loaded we need to disable this button so I'll just say disabled and I'll say fetching details this this state over here so now this will disable that particular button while this is being fetched so okay let's just add some Styles so that we can see it being disabled so so I'll just say here cursor pointer will be there when it's not disabled so if it's say load more button to disabled okay now when we click on it you can see it is being disabled while loading great okay so that is it for this app and one homework for you is that make sure all of these items over here are accessible so try to add accessibility to it and comment down below what solution you've added to it also check out great front end by clicking the first link in the destion down below and if you want to see more such videos like this click this card above my head to access the complete playlist

Channel: RoadsideCoder

Views: 12,805

Keywords: react js pagination, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview questions and answers for experienced, web developer interview, web developer interview questions and answers, javascript interview, reactjs interview questions, reactjs interview, Namaste javascript, namaste react, progress bar react, greatfrontend

Id: KJ-cf62ioQs

Length: 25min 34sec (1534 seconds)

Published: Sun Dec 10 2023