Next.js Job Portal Project Completed 🚀 Final Features + Navbar + Search | Full App Wrap-Up

Hello what's up guys Welcome back everyone to nexist and MySQL present the job portal application and today is our second-to-last video yeah guys So this is our second-to-last video and the last video will obviously be about hosting so today everything will be completed basically the coding part It's all done today no need to worry so let's start the video right away without any delay But before you go don 't forget to check out the rest of our awesome videos in this playlist This is our 93rd video with Jay and it's becoming our second -to-last one I thought we'd go ahead and make it 100 but no No need for such a long scarf anymore and now it's done everything that was left I hope I've completed it all If you feel anything's missing let me know in the comments alright guys so first of all right here The best feature I'm adding is this section right here on our homepage — check it out: Search a Job which basically shows you all your most recent job searches Anywhere there' s a job-related website—Naukri LinkedIn or any other—initially you'll find the option to search for jobs en I also added it here please look closely if I had written just F U L L full and if you're searching for main agar check this out guys I'm here by default full ahead I'm searching for full stack this way matlab we've put the search functionality right at your doorstep so you don 't have to worry about a thing and the best part is we've done it this way by default it's hitting your search like when I type " full " I mean look whatever I type automatic shows up at the top it just shows you check out full stack automatic always shows up at the top meaning whatever is You were searching for it and now you've found it right here—what you were looking for is exactly what' s working perfectly So this is it That's a really awesome feature guys —you're gonna love it and don't worry when we get further ahead and look at the code I'll explain everything I'm handing this over to you I won't be going into great detail but yes everything that was needed we've done as much as possible It's trying hard to do it slowly but you can see how our previous homepage looked kind of strange but now take a look at how our homepage looks finally we have a navbar which I 've been telling you about all along we'll add it and now we have a navbar a footer too small you know but whatever it is we have a footer and we have a feature jobs Philal is for now I feature jobs which is first we have a features Skypeyou will see we have a so we will defineetcetera futuresJune 2017 2015 futuristicdescription We'll have access to all the data here Philal is currently at the top of the jobs list Recently the situation has recently escalated The job I have here is Has tried to show likes And this is yours this is yours — you can see it I've just logged out so Sign in here So now no user Who hasn't even signed Yet our job page will still be visible to him Where the cow the first one is If you remember Because Employers need to do a bit of job searching Employers post their jobs here So this feature was initially available only to The applicant had it but now doesn't It is now publicly accessible to everyone You wanted a job now see if you like it you'll have to log in Nothing matters anymore Login successful That old thing of ours is everything The data coming in is also your dynamic data if you've taken a look Allait is on this beat I like that Clicking the link led to a redirect Look closely I can still see the sidebar even if I don't go there This is also a beauty in how it's turning out Because whenever we used to go to the sidebar When the user clicked on the Apply on Job butto So forward slash dashboard then forward slash jobs—it's showing up for me Still I can see it right in front of me Sidebar provides you with the applicant's When you're at the pass Apple Inc If you're looking at those people you can see them right there We're also making these changes In this manner You were Leave it to be seen The component source folder where our folder is located contains a file named nappa tsx o obviously current user hai whether or not it's necessary for us to verify for authentication purposes and then we have this header look here at the link Every time someone clicks on your job posting they'll default to our homepage — that's one link taken care of — the second link is yours Back home again found jobs Check it out I've already done the jobs You know I'm about to tell you now about the employees Philal as it is hi rakha hua kyunki main iska kuch add nahi kara and ye important hai agar user present nahi hai to sign in ya post or job dikhao and jab post or job pe click karne ke liye to obviously usko register karna hi padega to register ke page pe It will navigate to the sign-in page when clicked and if the user is already present that will also be significant So which dashboard should we send them to Should we send them to the regular dashboard or to the employer's dashboard marked with Here you can check out the employer's employer dashboard the SIP dashboard and the employer dashboard—I feel like this is the right one okay All right it's not here it's on your login page Ah yes employer dashboard—this is exactly what I needed Just take this employer dashboard f employer then dashboard if employer then okay otherwise dashboard or slash setting simple if user role is strictly equal to employer The employer will go to their dashboard otherwise come here normally that's fine and finally log out and log out user action—we've already covered that too From this point on you can see here that our navbar has been completed alright o main I'm working here I'm doing a job I specifically focus on signing in Logged in successfully employer dashboard Perfect Marlabar is working as expected If I click on as a employer it redirects me to the employer page If I click as an applicant If you're going ahead take me to the applicant's dashboard Alright I'll log out of this There's no problem here everything is fine here All right we're done with the navbar I hope you now understand how the navbar works It becomes a navbar again then we have this job search page which is very important because so far we have not ye He didn't even create such a page so where did all this code come from o main ab aapko logic batata ho to humne pata hai kya yaha pe humare applicant mein applicant jo tha humara if you remember source we have an app where the applicant was inside which basically the applicant's dashboard contains a jobs folder—if you remember correctly— I just picked up that file or folder from here and moved it directly into the app folder I guess I kept it in my jobs folder which was inside the applicant folder inside the dashboard folder which is why the applica Any applicant who clicked on the dashboard and then on Find Job would previously see it displayed but now I've removed it We've already done it inside the app as soon as you type " forward slash jobs " it immediately shows you our jobs page right The tension has gone but now another problem has arisen — if I do it this way when the applicant logs in Login successful and when I click on Find a Job look see here forward slash dashboard forward slash jobs I just changed it to that I did what I did—I picked up the jobs folder and moved it inside my app and here's our applicant Here's the page dot tsx sorry we have a layout right in the layout we have an applicant sidebar here's the link we're getting this is what we have You'll find it somewhere over here in the applicant nav items — logout isn't it — look everywhere has a dashboard there it is the dashboard It was the empty jobs section right I removed the dashboard from there I removed the dashboard from here It means the applicant is logging in and coming here and even if they're clicking on Find a Job I'm not sending them to the dashboard The main app will automatically send it to the job folder by default the app will just proceed and once it's sent to the job folder it will start running That's solved for you now there's one more problem that we've been facing when I typed in jobs I was about to click on the job post but I couldn't see this layout it wasn't showing up because I directly went to the app/job and that doesn't even exist there so this section is showing up for you What I'm doing for him is this —I needed this so that if the applicant has logged in meaning any user who has already logged in Already logged in and if he is an applicant isn't that right and if he tries to visit this page then show me this Don't show your caste and we could have easily done that after a little thought you realize that this is our share source app we have a jobs and there we have a page and here we've added layout tsx now by adding this layout guys I hope there's no need for me to say Go to the jobs folder take a look inside see what we did we created a jobs layout children added and placed there obviously And here if you look at Gohar we'll check again whether the user exists or not if the user exists we'll check whether their role is that of an applicant or not If the applicant is present display the sidebar which is our main children section meaning the remaining items currently visible to you Obviously these are your children aren't they This part here please show us and if this applicant meaning role if the applicant is not the case then likely it's a side employer Show it to him just like a child would and if he hasn't even logged in yet just show it to him normally and you'll understand right away As soon as you create a layout it will automatically apply to every page inside the jobs folder—provided this user is present meaning the applicant has already logged in f present show the sidebar otherwise show the children children meaning the remaining pages leave it as is this layout page addition will The issue that wasn't there before in the jobs has now been resolved here for me See the nine o'clock hour is above you enjoying itself inside it this is what's happening and yes one more thing one more thing I need to tell you You've forgotten even the one who showed you this path so there must be a reason for that too right Yes guys there's also a reason for that and it's because your source folder and then your app folder contain something called layout and here I've placed it The nap bar is placed there for that one reason alone whether you go to the applicant's page the employer 's dashboard or the regular login No matter what you'll always be shown at the top always on top just look see you're always shown at the top That's exactly the reason here you need to focus on the layout — within the existing layout you'll need to add this o is tricky we've never seen it before found a job what was the problem there for the applicant well we've taken a look anyway You don't need me to tell you that if the user hasn't logged in then log in and apply You've already written something here after logging in First log in then apply I guess I'll show you where your jobs job id page tsx and Log in to apply if the user exists it will show the apply button if the user does not exist it will show login to apply All of this has already happened Here the portion shown to you right now how it works this search How would it look if you typed it fully and searched Just check it'll take you directly to the job page that's the search That's the query I'm getting you won't believe so we have our home page right here The page tsx is currently running our main page tsx is this this is your form this is all your form has here we have a search bar This is your search bar inside it we have a search jobs button which Tailwind has basically given it this look and feel whatever you're typing here see whatever you type it's a form Whenever you're typing just write this: these two things xn equals the route you want to rewrite and then the method you needed to get—just type that much and it becomes automatic What you have here see I've given this name so a question mark then search equals Whatever you're writing comes here in this way and if it comes this way He's gone so my work's done right Because we've already secured our own finder job using this trick what if I write anything like I wrote flowers look That's exactly what we wrote yes brother after the question mark basically the query string is what we put in the URL searc I remember it thanks to that calculation I've just given this look and feel here and nothing else was needed for The name in the input is the one we used to search so the search can be performed and the action is your route and then you simply needed to use the GET method And your task is done the rest of this feature jobs no need for me to tell you what you can see here we've already done this task we ran a function where we applied select from labjoin and set order by and limit 6 you can see exactly that here only when the feature equals true Abhi is still trying to create a replica focusing on the top 6 basically whatever is latest whatever job posting has been made the top 6 I've shown you everything there is—nothing else remains—whatever there was I've already shown it to you We added the Nabbar add to the homepage Find Job page for individuals regardless of who they are we've made it for everyone After logging in you can view details and apply immediately upon logging in you'll be directed straight to your dashboard Everything's been taken care of by us— if anything's missing I'll make sure to let you know just comment below How did you like our series Let me know in the comment section Next tell me in the comments which topic you'd like to see in the next video I'll definitely explain that now we'll definitely see how we'll host this next one but yes finally I think we should wrap up this series now since we've already seen as much as possible How did you feel after understanding so much Please let me know by commenting You could also post it on Instagram if you'd like That final awesome series is finally over thanks for everything you can do whatever you want now So yeah this is it—today I've updated the source code on GitHub so you can check it out 93 videos almost 3 maine barabar chala gaya hai jo ki bahot achha tha so guys please video pasand aaya to Share this with your friends and hit that subscribe button — next target is 800 000 subscribers so if you haven't subscribed yet please do so now — see you in the next video Until then guys thank you so much take care