Enhance Your Career with Sensei: The AI-Powered Career Coach

this is that AI powered project that will take your resume to the next level by building this full stack AI career

coach called Sensei with features like user onboarding to generate interactive dashboard displaying in demand skills

and salary Trends in your industry which is updated weekly an AI Resume Builder that generates ATS optimized content

based on your industry and skills and it is fully customizable as well this awesome mock interview feature with role

specific questions to prepare for your upcoming interviews which also displays your performance over time and gives AI

generated Improvement tips as well an intelligent cover letter generator that analyzes job descriptions and creates

tailored content accordingly along with this fully responsive and beautiful user interface that we will be building using

nextjs and Shad CN UI so right of the bad we have this professional and modern looking landing page with this beautiful

scroll animation which I'll teach you how you can Implement as well if you further scroll down we have the list of

features that our app contains like interview preparation industry insights AI powered career guidance smart resume

creation and much more we have all of the statistics related to our app how our app works and also some testimonials

from our users along with some frequently asked questions right here so we have included all of the important

elements that a modern SAS website contains and a call to action button at the bottom and as I always say a modern

landing page like this can play a huge huge role on if you'll be getting a call back from that HR or that company or not

so so let's click on get started and we are on the login page now we can go on and login with Google or email address

and password so let me just quickly go on and login with Google and there we go we have successfully logged in and it

has presented us with this user onboarding page where we can select our industry so let me select technology and

I'm a software developer years of experience let's say four let's select our skills for example if I select

JavaScript react postgress nodejs we can enter some professional bio and click on complete profile and here we go we are

on industry insights now this is our dashboard page and over here you can see on the top left we have a user drop-

down with options like manage account or sign out if I click on manage account we can see more details about our user we

can update our profile over here like first name last name or email addresses Etc if you go to security you can see

different different places where the user is logged in right so we have all of these production great features

implemented inside of our app let's close this and over here you can see there's another drop down which will

display all of our AI tools we will come back to this very soon but here in the industry insights you can see it shows

us The Market Outlook based on what we have selected on the user onboarding screen how fast our industry is growing

how much is the demand or you know jobs inside of our industry what are the top skills over here and it shows different

different job roles with minimum median and Max salary for each and every one of them right these are all the top job

roles in the industry and if you further scroll down it will tell you the key trends that are going on right now in

the industry and the recommended skills that you can learn learn and all of this data is updated constantly right every

single week you can change it if you want as well and it will be updated in next six days and to implement this

feature we will be setting up a background job a crown job which will be running every single week and not a lot

of tutorial teach you this kind of features and that is what makes this project different now let's go to this

growth tools dropdown and let's select Resume Builder and we are on this form right here right we can select our email

addresses let me just select Anish over here some random mobile number we can enter our LinkedIn URL our Twitter

profile we can enter professional summary along with the skills as well now when it comes to work experience

let's say you're entering something in the description right let's say worked on an Ecommerce website and now you're

St what am I supposed to write further in this right let's say an e-commerce websites selling clothes so you can

click on this improve with AI button and notice it will generate a complete description

ATS friendly description with all of the analytics and everything as well right using Gemini Ai and I will show you

exactly how you're going to go on and Implement a feature like this you know so you can build any type of AI

application we can also enter over here our title our company from which date we started and if it's a current experience

you can click on this else you can select the end it over here as well and you can click on ADD entry button over

here and this will be successfully added and similarly you can add more experience if you want to add education

if you want to add projects it supports links and everything as well right and after you have built this rume

successfully you can go to this markdown tab over here and your complete rume will be rendered right over here so let

me just fill this form completely and let me come back and there we go I have created my complete resume right over

here now obviously you want to download this resume as well right so click on this download PDF button and this will

allow you to download this rume as a PDF let me click on Save and there we go our resume is successfully downloaded

awesome if you want to save this markdown rume in your uh you know database you can click on this save

button over here and if you want to directly edit this resume you know how to edit markdown right so you can click

on edit resume and you can change anything directly over here and then you can click on Show preview and it will be

updated over here and you can click on save button and to manage all of the forms inside of our app we will be using

react hook form along with the Zod validation Library so that you are following all of the latest industry

standard practices as well all right now let's go on to the interview prep page and over here you can see we have the

data related to the users's performance over the time what is their average score how many questions that they have

practiced what is the latest score and if you scroll down you can see all of the latest quizzes that user has

attempted if you click on it you will see the result for that particular quiz as well along with the Improvement tip

as well so let me just go on and start start a new quiz there we go it tells us that this will have 10 questions let's

click on start quiz and it's loading our quiz it has generated 10 questions using Gemini API so let me just go on and

randomly answer these questions for now and you can see we have this show explanation button like if you're not

able to think for any of this question if you on show explanation it will show you and give you the idea of the right

answer so let me just click on next question and randomly select all of these and we are on the last question

let's finish the quiz and we will see the result right over here so you can see I have scored 20% and it's given me

this Improvement tip that I need to focus on solidifying my understanding of core JavaScript concept asynchronous

programming blah blah blah for every single question it will give you the summary of your answer and the correct

answer and along with the explanation of the correct answer so these are the Enterprise grade features that you see

in the big applications right and if you go back to the interview preparation see it showed me my latest performance which

was 20% so the chart died and we will be using recharts for rendering all of these charts inside of our application

and you can see inside of our postgressql database we have all of these data stored like related to our

assignment our resume you can see the complete resume stored in the content in the markdown format the industry

insights for every single user right so that all of this data is persistent now let's check out the AI cover letter

Builder so you can see I have already created two cover letters over here if you click on create new it will ask you

the name of the company enter job title for the job description obviously you can copy it from the job portal and

stuff like that but let's say for now I'm going to say nodejs and mongod DB required right let's click on generate

cover letter and this should generate a proper cover letter that we can provide to that particular company to you know

apply for that job so you can see it has given us this empty columns to fill our name address phone number email and the

complete cover letter over here as well right it has mentioned the back end develop at roadside coder and stuff like

that amazing let's go back to the all cover letters and also I would like to mention this is not a spoon feeding

course I will also give you some assignments to do as well along with this course right because on this

channel We Believe taking action and building projects yourself is what makes you a better developer so before

starting up let me know in the comments down below from where you watching this video and what is the best feature that

you like about this app let's get started all right so open vs code over here and let's quickly open our terminal

and initialize a new nextjs app so I'm going to say npx create next app at latest and I'm going to press enter it's

going to ask us to proceed yes what is your project name now if you name our project anything it will create a new

folder over here but we are already inside of this Sensei folder I'm going to press Dot and press enter would you

like to use typescript no would you like to use es lint yes yes Tailwind CS says yes of course would you like your code

to be inside of SRC no we're going to be using App router right so yep that's exactly the next question yes we're

going to be using App router turbo pack yes comes from nextjs 15 would you like to customize import allias no and there

we go it is going to be initializing a brand new nextjs app inside this folder right here there we go let's go on and

run this so I'm going to say npm run Dev and it has started a brand new server let's

click on over here there we go our nextjs app is running now where can we find this code so if I go back and if I

go inside this app folder right here we have two files one is layout. JS which basically contains the code that wraps

all of our app so if you see over here we have HTML body and then the children and this children is this page.js file

inside of this you can find the complete code that we just saw so let's remove everything inside this return right here

and I'm going to have a Dev over here which will say subscribe to Road Site coder which you should if you haven't

yet so yep you can see this is what is being rendered over here all right now next what I'll do I'll go on and install

shat CN UI so just quickly go to Google and search Shad cnii there we go and shat CN UI is not a component Library

this is basically a beautifully designed components that you can copy and paste inside of your app so this is basically

pre-built components that are built on top of Tailwind CSS that we can fully customize right right the ones that you

can see right here so let's see how we can install it if I click on docs over here and click on installation and by

the way this library is super popular noways click on nextjs and let's go and use npm so I'm going to copy it up and

I'm going to go back to my terminal let's open a new terminal over here and paste it right here so npx Shad C in at

latest in it and it's going to ask us few question base color Yes keep it neutral CSS variables yes and it's going

to ask us this question how would you like to proceed it's because we are using react 19 right and some libraries

are not yet fully compatible with react 19 so we have to choose this use Legacy pair depths option so that it works fine

with our application all right now next let's go and install some component over here so over here you can see they've

given the example of button so if you go to a button right here yep you can see we have different different types of

components over here right so for this button to install it we simply have to run npx shat CN at latest add button so

let's just copy and paste it right here and I'll show you how Shad scen UI helps us so basically it will create a

components folder inside of our app but before that we have to choose Legacy Pier depths again so you can see it has

created this components folder over here and it has created this UI folder which is reserved for the Shaden UI components

and it has created this button component over here and you can see This is highly scalable component with uh you know

multiple different variants and sizes of the but so we can better see it over here so if you scroll down this you can

see this is a primary button secondary color destructive color outline variant Etc right similarly we have ghost and

multiple different sizes for this button over here as well and if you want you can customize this here and you'll be

good to go so you see how easy it makes our job so if I you know let's just add a br tag to add a line break and I'm

going to add a button from Shad CN UI make sure to import it from this/ UI folder only and I'm going to say hello

and let's save it and let's go back and check yep you can see we can see this Hello message right here now as you can

already see inside of our app we are using this button in multiple places we are using this card component this is

also from Shard CN UI we are using um let's say this accordion component which is also from shat CNU right so we're

going to be using bunch of different things inside of our app bunch of different components from shat CN so

what I'll do let's just go on and install them one by one so you can see accordion right here we just simply have

to copy this lineup and go back to our terminal and paste it right here the other things that we will be needing is

a badge component button we have already installed we're going to be needing a alert dialogue for you know asking user

confirmation or cancelling some action right we have to use the card component a dialogue component for displaying

models like in our case we were displaying result after the quiz is finished right a drop down menu input

comp component from chat CN UI label for those inputs or you know some other places as well progress for showing our

progress in the dashboard we would be needing a radio group component a select component a sonor component for all of

the toasts that you saw on the bottom left side of the screen the tabs component and at last text area right so

press enter and this will successfully install all of these components right here inside this UI folder oops

something went wrong I believe I misspelled something oh I think it was the radio group so it has to be g r o u

and we will also be fixing this text area right here and yeah I think uh that should do it let's press enter would you

like to proceed use Legacy paer deps all right so you can see it's installing all of these dependencies right inside this

UI folder and it's asking us the button already exists let's let's override it and and yep there we go we can see all

of our components right here and we don't need to touch this unless we need to customize it and we don't need to

customize it right now right cool then now out of the box shaten also provides us with the light and dark mode and as

you can see our app is in complete dark mode right so let's implement the dark mode as well so you can click on over

here in this dark mode and click on nextjs and it's pretty simple you don't need to understand what's going on over

here so just install this next themes over here so I'll just copy it up and paste it right here and it's going to

provide us this code which will be used for you know handling our themes so just copy it up and inside of components we

have to create a component called theme provider. TSX so I'll say theme-

provider. TSX and in our case since we're using jsx we have to say jsx right so paste it right here and let's get rid

of these types we won't be needing them Yep this looks good and after this we just have to wrap whole of our app using

this theme provider object right here or sorry theme provider component right here right so I'll just copy it up and

go to our layout. JS file as I already told you this layout. JS file is responsible for wrapping h of our app so

instead of this children I'm going to put this theme provider right here and let's import the theme Provider from

this/ component / theme provider and I'll put the default theme as dark and yeah that that is all we need to do to

set up shat CN UI great let's work more on this layout page over here so inside of this let's plan what all the things

that will be inside of our app so we will have a header component okay then we will have a main component which will

contain all of the children components so I'll put children inside of it then below it I'm going to have a footer

component right let's just create this footer right away and for this main tag I'm going to give the class name of

minimum IM um height to be screen and this footer let's just have a footer component over here inside this I'm

going to have a d inside that I'm going to have a paragraph tag which will say made with love by roadside coder let's

go back and see yep we can see it right here and you can see our app is now in the dark mode as well great let's give

it some styling so if you have not work with Tailwind CSS is pretty similar to bootstrap you just have to say class

name over here and you can start giving the class name which are inbuilt in typescript and you can refer to

typescripts documentation and I will also show you how you can use it right here so like for example if we have to

add a background color of muted and by the way these colors are predefined in shat cnii so if you go to this global.

CSS you can see we have different different types of colors that are defined over here for muted it's this

muted foreground you can you know check more about these in the shats and UI documentation about what these colors

are exactly so I'll say background muted and SL I'll provide the 50 opacity I'll say padding vertical so py and if you

hover on these Styles you're going to see we have padding top and padding bottom to be 48 pixels you can see the

exact values right similarly for our da as well I'm going to provide the class name of container now what is a

container class so basically container provides us with some break points like for example in the smaller screens we

have Max width of 640 pixels in the you know medium screens or screens less than 768 pixels we have Max withd this and

different different things right so this helps make our websites more responsive so I'll say MX Auto so that we can

display it at the very middle some padding horizontal of four text is going to be in the center and text Gray is

going to be 200 let's see Yep this is exactly what we wanted amazing for our header right here let's just quickly

create a header component as well so I'm going to create a new file called header. jsx R A fce and I'll say

header over here let's import our header over here make sure to import it from slash

components let's see yep we can see the header over here as well now before moving forward before doing anything

else let's start working on our user authentication so click the link in the description down below and you will land

on Clerk and this is the most comprehensive user manager platform as you have already seen in my previous

videos I love to use cler because it provides us user authentication and user management right out of the box so let's

click on start building for free and let's go on and log in with Google and you will see a similar interface now

here we can add the name of our application so let's say Sensei we can choose what are all the authentication

types that we are going to be adding inside of our app like for example we can add email password we can add Google

login as well or like username phone number bunch of different things right and I'll show you how easy it is to

implement inside of our application so let's just choose both email and Google and click on create application and we

are in amazing and you can see it tells us exactly how we can go on and add clerk inside of our application so I've

chosen nextjs over here so all we need to do npm install at clerk / nextjs okay I'll copy it up and go back to my

terminal and paste it right here now what's next we are supposed to set up our environment variable so that

app can connect to clerk so okay let's copy it up and instead of our app I'm going to be creating a new EnV file this

will contain all of our secret environment variables and which we are not supposed to share with the world

right and obviously if you try to use my environment variable they won't work because I would have deleted them after

the video okay after that we have to create this middleware DJs file now what is this file all about so this file runs

before our application is run right so before our application starts we need to figure out some things like for example

in this case user authentication so you can see it is going to initialize the clerk before our application is accessed

so I'll copy it up and I'm going to create a new file middleware do JS and paste it right here

just like this then next we are supposed to wrap our app inside this clerk provider function okay let's see so if

we go to our layout. JS this whole thing this whole app is supposed to be wrapped in clerk Prov provider so let me just

move it to the very bottom and let's import clerk Provider from at clerk SL nextjs like this and also by the way we

don't need both of these fonts right here so I'm going to remove them and we would be needing the font

enter and let's just add this font right here so simply you have to do const enter equals we have to import enter

from next SL font / Google subsets Latin so this is basically just for changing the font of our application if you don't

want to keep it that's fine you can use some other font so over here in the body I'm going to remove this let's remove

this class name and over here simply I'm going to say enter do class name this is just a onetime configuration don't worry

about it we're just adding the fonts inside of our app and let's just change the title to AI career coach or you can

also say Sensei AI career coach and you can add your description according to you right all right now let me show you

how easy it is to set up the user authentication using cler so what I'll do over here you can see we have this

example over here so I'm just going to quickly copy it up and I'll go to my header. jsx and inside of it I'm going

to paste it and import all of these things from clerk so clerk / nextjs signed in component user button

component all of them right now you're going to notice if I go back to my app we are getting this warning right here

hydration warning oh so this is actually H this happens because like when we add this theme provider inside of our

application to so you can check the shat scen U documentation as well they have recommended that you can simply add

inside of the HTML this thing suppress hydration warning and you won't see this error so what's going on over here so

basically we're saying that if the user is signed out then show the signin button and if the user is signed in show

the user button let's see you can see we have this signin button over here or sign in text if I click on it what's

going to happen it takes me to a completely separate login page amazing and we didn't even do anything right we

just took that code from Clerk and obviously this is highly customizable as well so if I click on continue with

Google it's going to allow me to sign in and let's see we are in you can see we have this user drop- down button right

out of the box coming from cler right click on manage profile you can see we can update our profile over here as well

update our profile picture like for example if I go back inside this configure tab in clerk you can add some

options over here like for example I want users to be able to change their name as well right so I'll enable this

and now if I go back I'm going to click on update profile and now I'll be able to change my name right here amazing and

you can also go to this security tab to see where you are logged in and you can delete your account as well right so

yeah all of these things comes right of the box from clerk let's go on and properly design our header for our

application so you can see see inside of our deployed app we have this logo right here right Sensei AI so you can get this

logo from my GitHub repository so just click the link in description down below and you will land on this GitHub

repository right here and if you go to public folder over here you can find different different things like for

example this logo that I've kept apart from that I have three different types of banner so that all of you know all of

you building this app don't have same types of banner images inside of your app right so I'm going to go on and

download both of these there we go I've downloaded them and kept it right here in my public folder let's get rid of

these SVG files we won't be needing them so delete all right so right here in the header component let's above it I'm

going to change it to header inside this I'm going to have a nav tag over here which will contain all of the navigation

items of our app like for example first of all I'm going to add a link tag so link tag in nextjs basically helps us to

navigate between different different pages so this link tag takes a h riff just like our anchor tag in HTML right

so this will be let's say slash for our homepage and to add any image inside of nextjs we use this image tag which comes

from next SL image and the reason for this is this optimizes our images in the server right and sends it to our client

so let's say SRC equals SL logo.png let's save this this and see we cannot see anything over here in fact we

have an error over here that missing required width property so yep this takes a width and height property over

here as well and we will also give this the alt tag that is the description of the image so let's just say Sensi logo

and width and height let's just give this some class name of height to be 12 so this is basically the resolution of

the image right and here I'm going to provide the Styles like padding vertical to be one

width is going to be Auto and object to be contained so that it doesn't get deformed let's see now yep that is

exactly what we wanted below this link let's add some action buttons right like for example to be able to navigate to

our dashboard or industry insights or the d drop down menu uh displaying all of our AI tools and you can see so

inside of this div we will display all of those things only if our user is signed in right so I'll say signed in

and insert this I'm going to first display the link tag to our industry insights right so I'll have a link tag

which will have a button which will obviously be coming from Shad Cen UI so make sure to import it from / ui/ button

inside this we can add an icon over here as well along with the text so you don't need to worry about the icons because

Shad CN UI contains Lucid react package which you know contains all of the icons so just say layout

dashboard and you can see we're able to import it from Lucid Das react and let's give this some class name of height to

be four width to be four and below this I'm going to say industry insights let's see how this looks oh of course we need

to give the link tag a HF let's just call it dashboard if you want to call it something else again that is up to you

yep that looks good we need to obviously this a little bit more so what I'll do I'll go to this header right here I'm

going to say class name and our header will be fixed on the top right I'll say top to be zero and width is going to be

full let's give it some border bottom and some background color to the background from shat Cen right as

already told you these things are already defined in the global. CSS file you can go and check it out and I'll

keep the opacity to be 80 I'll say back drop blur to be medium so that if anything comes behind our header it is

you know it has the blurry effect I'll say Z index to be 50 so that this remains on the top and I'm going to say

it supports backdrop filter right and then I'll give it the background of sorry BG to be background color with the

60 opacity let's see how this looks like this looks pretty good and you can see I think whatever behind this I think there

was a button right it went behind this header now and we'll come back to this to fix it right now for this nav button

right here I'm going to give this some class name to be container I've already told you what container does mx Auto

said everything is in the middle padding horizontal to be four height to be 16 and I'm going to give this some display

Flex so that everything is in one single line and items to be Center so that we vertically align it and horizontally I

want justify between so that they are on Far ends of each other let's see yep that is what we wanted now one thing

that I want to do over here is make this website responsive out of the box right so when this becomes smaller we don't

want to show this whole button right here so what I'll do let's just put it into a span tag right here and over here

I'm going to give this class name of hidden by default and when it's more than the medium screens I'll say display

to be block so now you will see if it's less than medium screens yep that is exactly what we want to do great now

after this we're going to be showing a drop- down button which will display all of our growth tools right so after this

let's go back to shat ceni documentation and over here we have to find the drop down menu component and we already

installed it so if I click on it you can see this is how it will look like okay so let's take this code right here I'm

going to copy it up and paste it right here so let's import them one by one and make sure to import it from from /ui

folder and not the radx UI right so sometimes we make this mistake and then it won't work so let's import all of the

separator and yeah I think they would have been imported now oh I think I did not import this drop down menu item now

it would be important yep if I click on open yes we can see the drop down all right let's uh configure it according to

us we would need the three items over here and we won't be needing the separator and the label okay for the

trigger here I'm going to Simply add a button just like we have done right here so I'll just take this button and paste

it over here instead of this layout icon I'm going to add the Stars icon over here and instead of this industry

insights let's just say growth tools and below this let's add an icon for you know indicating the Chevron down key you

know indicating a drop down over here so let's see um yeah that is exactly what we wanted let's create some gap between

both of these so over here in the div we would need to give some class names so I'm going to say display flex and items

to be centered so that they are vertically in between and some space X tob2 so that they have some space

between them and when the screen size is bigger we will add Space X to be 4 yep that is what we wanted all right so now

over here for each and every one of these I'm going to add a link tag which will take us to that particular you know

growth tool like for example Resume Builder cover letter Builder or you know interview preparation page again inside

the link tag I'm going to have two things one uh icon and the name of the growth tool so over here we just going

to get rid of this class name inste of this Stars icon I'm going to say file text icon so import it from Lucid react

and I'll say build resume let's see if I click on it oh yeah of course this again needs the HF tag which will be slash

resume and I'll give this the class name of display Flex items to be Center and some gap of two between them so now we

should see this if I click on it yep build resume similarly I'm going to do for both of these as well so let's just

copy it up and paste it right over here and then we will change it for the cover letter I'm going to add a pen box icon

and for the interview prep page we're going to add a graduation cap icon so let's just import both of these and now

let's see yep that is exactly what we want let's change the link so for this one I'll say AI cover letter and for

this I'll just simply send it to the interview page okay now after this we need to display our you know login

button and user button so let's move this back inside of over here inside this div and when the user is signed out

we don't want to show this sign in button instead this will have some children inside of it where we will

render the button from Shad cnii so I'll say sign in also by the way we want to differentiate between both of these

variant right so for my dashboard or the this uh industry insights let's just say variant to be outline and let's go back

and Y that looks much better and for this thing right here okay sign in button I want this to have the variant

of outline as well so if I go now and try to log out let's click on sign out over here you can see just the sign in

over here and growth tool wise it's showing up over here I think we need to move it inside of this signed in so just

take this signed in from over here and put it right here now it should not show up just the signin button okay now for

our user button over here if we quickly go on and sign in again there we go you can see it is very small right the

circle is very small so we can customize it actually over here in the user button we have a appearance prop inside of this

let's just say elements we can choose the element and we need to choose the Avatar box which will be width to be 10

and and height to be 10 user button pop card is going to be Shadow Xcel and user preview main identifier is going to be

font semi bold so you will see this will have some Shadow and some font to be semi bold okay and we can also Define

when we click on sign out where this page goes right so for now I'm going to keep it slash only if you want to keep

it something else I've kept it right here looks like this is deprecated but don't worry it will still continue to

work all right now let's try to uh click on this industry insight we're going to click on it and this will take us to

the/ dashboard page and again this page does not exist but still we are logged in right now right if we log out you're

going to see it took us to the slash page right that's fine but now if I try to go to slash dashboard page it should

not allow me to land over here because we are not logged in right now right even though this page does not exist it

should us it should route us to our home page right or maybe our signin page where we can sign in so let's add this

protection to our app so I'll go to the middle .js file and over here on the top I'm going to say cons is protected route

and we can add the different routes that we want to add over here so we'll import create route matcher inside this we will

give an array and we can Define all of our routes right over here so our routes will be dashboard resume interview AI

cover letter on boarding right all of these and I've added dot asteris over here that means anything that comes

after it will also be a private route okay now after it inside this export default

clerk middleware we're going to be adding a call back and this will be an asynchronous call back which will take

the Au and the request object and we will work with these to you know add the production to our app first of all I'm

going to say await o and this will give us our logged in user's ID so const user ID then after it right that is user is

not logged in right now and is protected route that is this thing right here we're going to pass the current route so

I'll pass this request object if request object does not contain any of these then we will route them back to the Lo

login page right so I'll say await or and this will give us something which will be redirect to sign in and we can

simply take this and in the next line I'm going to say return redirect to sign n that's it we're going to call this

function and this this will continue to work this will reroute us back to the signin page and then in the end I'm

going to say return next response. next that is whatever comes next we can continue our app after this and make

sure to import it from next SLS server okay now let's try to do this again if I try to go to/ dashboard you can see it

sent us back to this signin page but wait you might be thinking what is this URL over here this is a weird sign-in

page right I want the sign-in page to be inside of my application and and not go to some third party URL right and that

is exactly what we will be implementing next But first you can see our app is in dark mode right and this is light mode I

want this to be in dark mode as well so what I'll do I'll go to my layout. Js and in the clerk provider I'm going to

say appearance and inide of this it takes a base theme and this will basically be dark so I think we need to

import it or probably install it from uh some package let me me just check inside of the clerk Yep this is what we want

npm install at clerk SL themes you can find it in the docs right so I'm going to paste it right here and P install at

cl/ themes and this will install it and from here we can you know get a lot of themes like for example you can see we

have different different types of themes right here and this is what I need all right so this has finished installing

let's try to import it yep from at clerk / themes and now if I go back to my app looks like it won't work on this page

but it will work on the component when we go on to add this signin component inside of our app right so okay let's

try to do that and how are we going to do that we have to define the custom uh you know signin page for our application

and to do that we have to go to the EnV file and we have to add four environment variables over here actually two

environment variables other two are going to be for something else so first one will be next public clerk signin URL

this will Define the signin URL for our app and the second one will be sign up URL sign up right now what will happen

when the user signs in or signs up so I'll say next public clerk after signning URL to be SL onboarding and

after signup URL to be/ onboarding as well all right now you're going to notice if I go back to my local host

3000 I'm not dashboard I mean just the Local Host 3,000 if I click on sign button this will take me to/ signin but

this page does not exist so what should we do inside of our app now we going to be creating a brand new route right and

don't worry I'll show you very soon the in-depth ways to create you know routes inside of our next CH but for now just

try to understand what I'm trying to do over here if I want to create a new route I have to create a new folder

that's all if I let's say sign Dash in this is now a new route inside of our application like if I say new file page.

jsx and this very important you have to create a file called page. jsx for it to be recognized as a route so I'll say

page and um let's say sign in right let's see if I refresh this now I think this is in like behind our header right

now if I just remove my header from over here let's get rid of this header y you can see the sign in is behind this

header let's take care of this as well we don't want things to be uh you know overlapping our header so what I'll do

over here I'll create a sign up folder over here as well sign Dash up and I want to provide some common styles to

both both of these so what will I do I want to grip them somehow right and to grip them I'm going to create a new

folder called o but this won't work right this will create a new uh route and I don't want to Nest another route

like / signin so what I'll do I'll wrap it inside of parenthesis and this will essentially ignore this folder as a

route right so if I move both of them inside of it move now this won't be considered as a route right here and I

can provide it a layout. Js file and whatever we write inside of this file will directly affect

both of these right so I'll say R A fce let's say o layout and I'll take the children over here and I'll render them

right here so this sign in and sign up will render right over here and I can Pro now provide some common Styles like

for example I'll say class name display Flex justify to be Center and padding top to be 40 let's check it out if I go

back and ref refes this yep you can see sign in right over here now instead of this sign in I'm going to display the

clerk's signin component right so if you go to the clerk's documentation you will find that there's a convention on

creating these signin pages right what you have to do you have to create this signin route first then inside of this

you have to create a new folder which will contain a catch all route and we will discuss what this catch all route

is basically you have to write two square brackets inside of it dot dot dot sign Dash in and this is basically an

optional route if you have anything over here it will catch it like for example if you go back you can see we have all

of these options over here right so these are for clerk to be managed so that's why you have to create this scat

all route over here and let's move this page. jsx inside of it move now inside this page. jsx simply all we have to do

is to import a sign in component from clerk that is all let's get of this import Port react and now let's see yep

you can see such a beautiful sign in form right here and this is right inside of our application if I go back and try

to click on sign in yep you can see we are landing on the signin page great let's do the same with our sign up page

as well so inside of the sign up page I'm going to get a new folder and I'll add a catch all route for sign Dash up

inside of this I'm going to add this page. j6 file so I'll create a new file page. jsx paste it instead of sign in

I'm going to say sign up right let's remove this sign in over here and let's see if I click on sign up it should take

me to sign up page all right we can you know fill up this form and create a new user all right great so we have

successfully set up our user authentication and now let's go on and connect our back end or you know set up

our database basically so click the link in description down below and you will land on neon and this is a postgress SQL

database and you already know how important it is to be knowledgeable working with a post SQL database right

so I'll tell you everything about how you can get your database set up and also use it alongside with Prisma orm

which again is a super trending technology nowadays right so click on get started and let's log in with Google

and we are in now we're going to create our project so let's name our projects and say database name we can just keep

it empty and click on create project there we go we are in let's go on and set up our database so all we need to do

we need to go to this overview tab over here and this roles and databases and click on ADD roll let's add rule of

roadside coder that I'll be the one managing this database create and then below it we need to add our database

right if you want you can copy this password over here as well let's click on ADD database and let's name the

database Sensei and the owner will be roadside coder let's click on Create and yeah

with that we have created our database successfully let's go to our dashboard over here let's choose the database and

the owner and we can simply copy this connection string from over here right and then go back to your app and inside

of EnV file I'm going to create a datab basore URL equals and I'll assign it right over here so basically this

connection string will enable us to connect our project and to communicate with neon DB using something called as

Prisma omm which I'll show you in just a moment but let's set go on and set up the service which we will be using for

managing our background jobs like you know fetching the industry insights every single week so click the link in

description down below and you will land on inest and click on sign in over here quickly I'm going to sign it with Google

and there we go we are in let's click on take me to onboarding and you can see over here they've given us this command

so just copy it up and go back to your terminal just run npm install injust first so that it installs the injust

inside of our application and then we can run npx in/ CLI at latest Dev proceed yes there we go it has

successfully ran inest on our local machine and click on this Local Host link right here and there we go our

inest server is running in our Local Host okay so let me just open the injust docs over here real quick so we have

already ran this Command right here and we can see our injust running now we have to create an inist client and to do

that we have to do new inist and provide the ID of our app okay so what I'll do I'll go back and insert this lib folder

over here I'm going to be creating a new file and actually new folder for inist and I'm going to be creating a new

file called client do JS andert this I'm going to Simply paste this code so I'll just copy it and paste it right here

right let's name our app Sensei and this will also take the name so I'll just say Sensei just like that and this will take

more things like for example later on we will go on and configure our credentials for the Gemini API key right so yeah we

will come back to this later let's go to the docs and see what else so now we have to set up this/ API SL inest route

inside of our application now how does inest actually works so in nextjs we have something called as this API folder

right and inide this we can as the name suggest build our apis right it can be public API can be private API so we have

to build a public API for inest to connect to our application right so you can see we just have to say/ API SL

inest so I'm going to say new folder inist and so that this AP works we have to create a route inside of it route

file so I create new file route. JS inside this route. JS file we have to add this code right here so just copy it

and paste it right over here and also we're going to remove this because our inest client will be coming from at lib

slin client so what is going on over here so we have created this API with get post and put requests and this serf

function which also comes from inest / nextt and now over here we can Define our functions which will be running in

the background let me show you how you can quickly go on and create the function so over here they've given this

example in the code of a simple hello world function right let me just copy it and explain you how this works so um

let's say I'll go insert this inest folder and create a new uh like file called functions do JS and paste it

right here now this function takes an ID of hello world and the event of test/ hello. world now this event right here

is something which will trigger this particular function over here right so this is very important over here this

first object takes more things like for example if you want to add the retries that is how many times this function

will retry before it fails in the background it also takes things like rate limiting throttling ability to bash

the events debouncing and much much more right so you can find all of these things in the official NES documentation

and learn more about it okay so now what we are doing inside of it we're simply saying that make this function wait for

1 second and then we will return a message called event. data. email which will be provided by us right so this

takes the event and the step so injust functions are executed in different different steps over here right and over

here we just have added a step of sleep so now if I just take this and where did it go I'll go back to my route. ts and I

can import this right here right so import hello world from in just SL functions and now if I go back to over

here in in my development server inside the app you can see it has all autod detected it inside of the functions we

can see this hello world function and we can manually invoke it from over here right obviously inside of our app we

won't be manually invoking it and you can see it's asking us for some data if we want to provide let's say email and

and let's say example at gmail.com click on invoke function it will wait for 1 second and yeah you can

see it has already completed the function and provided us this message hello whatever the email was and you can

see we have this wait a minute step run over here right we can see the data that we have sent to inest yep right here

email so this is a very basic example of an injust function again we will be coming back to this and build our

industry insights function which will be fetched every single week right so let me just um get rid of this for now and

we will come back to this very soon and if you're someone who's preparing for frontend interviews you can definitely

go and check out my front-end interview preparation course this is the only thing that you will ever need to prepare

for your fronted interviews and not only this I've covered every single topic of reactjs like react router D Redux all of

the hooks class based component function based component react even the performance optimization

which is asked from senior developers a lot tons of machine coding questions as well and obviously in-depth interview

preparation course on JavaScript as well and not just this along with this course you get an active Discord Community

where you can ask your doubts whenever you get stuck and we will be there to help you so click the link in

description down below because right now we're having the biggest sale of the year for a very limited time so don't

forget to check it out or you can also scan this QR code on your screen to go directly to the the course page and now

let's go on and build our beautiful landing page right here as I've already told you having a beautiful landing page

like this plays a huge role on if you'll be getting that call back from your recruiter or not right and you can see

this looks super professional with all of this you know grid background and everything with all of the FAQs provided

over here as well so cool then let's get started we have already imported this banner. jpeg from my GitHub repository

which we will be needing while building our app right all right so I've opened my page.js file over here let's remove

everything inside of it and let's see what are all the things that we will be adding inside of it so first of all

obviously we have a hero section this hero section right here then we will have the feature section the statistics

how it works what our users say and obviously frequently asked questions okay so let's first add this background

that you can see over here right this grid background to our app so I'll go to my Global start CSS file and right on

the bottom I'm going to create a class name called grid Das background inside this I'm going to add a position fixed

top to be zero left to be zero width and height to be 100% for our page right because this is going to be fixed and

we'll be inside whole of our app okay so to create those lines I'm going to be adding this background property over

here of linear gradient so basically what we will be doing we will be creating a line of one pixel with the

opacity of of 10% or 0.1% right and it will go from left to right similarly we will create another

line or linear gradient which will go from top to bottom right and we will do it with the gap of 50 pixels right so

I'll say background size to be 50 pixel and 50 pixels I'll say pointer events To None because we don't want to select it

and Z index to be minus one so let's take this grid background and go back to this page. jsx I'll add a div over here

let's actually rename this file to page. jsx and give this the class name of grid background and let's see yep that is

exactly what we wanted let's add a radial gradient over here right if you notice this is fading on the sides but

it's visible in the middle so I'll go back to global. CSS and below this I'm going to say dot grid background and

I'll add before sudo element and inside of it let me just quickly get the Styles and I'll explain you so content is

nothing we don't want to display anything the position is going to be absolute for this gradient top zero left

Z width 100 and height 100% right that's like covering the whole page but we're saying add a radial gradient property of

circle and transparent and it will be 9% opacity right so now you will see yep just like this this is exactly what we

wanted and you know don't stress much about this in real world you will most probably be searching in chat jpt or

Google to find a property like this right you won't be having to create this from scratch anytime soon all right so

coming back to this page. jsx we will first be having the hero section so right below it I'll have a hero section

component now one thing that you need to understand in nextjs is there are two types of components a server component

and a client component like for example this page this does not have any flag on the top so this is a server component if

I were to make this a client component I would have to add use client now what is the difference between both of these so

client component can have logic like hooks right and which which cannot work on our server right which cannot work on

our back end so that's why we have to make them work in our front end right that's why they are client component and

the server component are basically those component which generally are rendered on a server and contains the information

which is crucial for probably the SEO let's create this hero section component um over here so I'll get a new file

called hero. jsx or afce hero section okay let's import it right here just like this now uh over

here let's just wrap it in a section tag and start this I'm going to have a Dev which will contain another Dev which

will have our H1 and we will simply say your AI career coach for professional success and this section right here will

have class name of width full some padding top of 36 right we can see this and in Media medium screens like screens

more than medium screens we're going to have padding top 48 and padding bottom to be 10 let's see Yep this is what you

wanted below this H1 we are also going to be having a paragraph tag which will say Advance your career with

personalized guidance interview prep and AI power tools for job success now below this div over here we will display the

two buttons for getting started and watching the demo of this so I'll have a d which will contain a link tag which

will contain a but Buton from shat cnii which will say get and the link will have the hrf of/ dashboard when we click

on get started okay for this button let's just provide the size of large and class name of padding horizontal to be8

Let's duplicate this link just like this and if you have any demo video you can add the link to it over here I'm going

to Simply add the link to my YouTube channel is that because that's is the place where this tutorial exists and

this button will have the variant of outline that's all let's see link is not defined okay let's import link from next

SL link and there we go we can see it now below it we will add that Banner image that we copied from GitHub right

so below this div right here I'm going to have another div which will contain another div which will contain the image

and the reason why I'm creating two divs over here is because we will be adding the logic to this uh image right here so

if you notice when we scroll down see it tilts forward right so so this is the logic that we would be needing to add

and I'll show you how you can add that as well right so but first of all inside this image I'll say SRC let me see if I

have imported image from next / image yep so SRC will be/ banner. jpeg I'll provide it the resolution of 1280 to 720

and the all tag of dashboard preview oh you know instead of that let's just say Banner Sensei below it I'm going to have

the class name of rounded large Shadow tob2 XL and some border with margin horizontal to be Auto and let's just add

the priority tag so that it loads first right yeah like this all right now that we have created the basic structure of

our app let's just add some stylings over here first of all this div which contains both of these things we will

add some gap between them so I'll say space y to be six and text to be Center and for this particular div I'm going to

say space y to be six and margin horizontal to be Auto let's see yep that is what we want now for this particular

title we will be adding some uh gradients and all if you notice just like this and we will be using this

gradient throughout our application so we want to create a custom Tailwind style for this so what I'll do I'll go

to global. CSS I'll say add layer utilities and inside this let's first create a gradient class so I'll say

gradient inside this I'm going to say add apply and I'm going to apply a background gradient so I say BG gradient

which goes from from top to bottom right so I'll say gradient to bottom and we can assign either two colors or three

colors so I'm going to say from Gray 400 via gray 200 to gray 600 if you want you can remove this from the middle over

here as well but I want three different colors over here right now similarly we can reuse this class over here so I'll

create a gradient title class over here or style over here and I'll use the whatevers that we have added over here

gradient font extra bolt tracking tighter text transparent background clip to we text you know so that we can show

this background and clip it inside of our text just for our text some padding bottom and some padding right right so

we're just going to take this gradient title and provide it to this H1 so I'll say class name to be gradient title and

now you will notice which I don't think you can notice because we need to provide some uh size over here as well

so let me just add it so over here alongside it I'm going to add text 5xl font to be bold in the bigger screen

text is going to be 6 XL in smaller screen it's 5 XL and in the larger screens it's going to be 7 XL and in the

extra large screen it will be 8 XEL so right we will we can customize every single aspect of our app using Tailwind

CSS breakpoints right and of course gradient title so now if I go back Yep this looks good for our paragraph tag

right here let's come to over here and I'm going to say margin horizontal to Auto and Max width is going to be 600

pixels so that we can break it down into two lines text muted to foreground so that it's a

little bit lighter and in the larger screens I'll say text Excel okay that looks much better all right now for both

of these buttons right here let's provide some gap between them so I'll say for this D I'll say display Flex

justify Center and Space X to be four like that now for our image over here we need to add that logic off so that you

know this image is tilted and when we scroll down it's going to come forward and tilt to the normal size so for this

div I'm going to be providing a custom class called hero image wrapper some margin top of five in the smaller

screens and in the medium screens it will be margin top of zero yeah we will be getting a reference to this div right

here so that we can provide that logic so for that we will be using a use ref hook so I'll say use ref and import it

from react and I'll show you what use ref exactly does and we will take image ref over here and now you will notice

this will give us error because we are using hooks over here right so it will tell us to use this use client directive

so yep let's just add it on the top I'll add use CL and this will continue to work just like this okay so now what

will we do with this image refi we will take this and say ref equals image refi now through this image refi variable

right here we will get the access to this div's HTML right we can manipulate and we can do whatever we want and by

the way by default we can keep it as null over here and also let's give this the class name of hero image now what

will we do we will first of all take the use effect hook over here right simple use effect hook which will run when our

component is loaded we need two things over here first of all the scroll position where we are currently in our

uh you know window and the scroll threshold that is after this has been cross we want to tilt it back right tilt

the image back so first of all to tilt the image back we first have to tilt it right so we have already added these two

classes hero image rapper and hero image so let's go to our global. CSS and add this so over here I'm going to add hero-

image- wrapper and here I'm going to add a perspective class with 1,000 pixels so now you will see nothing will happen

because we have added just perspective property over here but we have to rotate it now so now I'll say do hero- image

transform rotate X by 15° and scale is going to be 1 now let's see yeah you can see now it has been rotated but if we

were not to add this perspective style notice what will happen see it wouldn't work right so we have to add this

perspectives for this transform to work and when we transform when we perform the transform I want the transition of

0.5 seconds right so that it eases out with the transform and we also need to tell Will Change to be transform

right so this provides a rendering hint to the user agent stating what kind of changes the author expect to be

performed on an element right so we just adding transform animation that's why we have added it over here now when we want

to put it back to normal we are going to trigger another class light over here so I'm going to say dot scrolled scrolled

right so this will simply have this transform actually so I'll just duplicate it and I'll put it right here

but instead of 15° it will be 0° scale to be 1 and Translate Y to be 40 pixels I want to

shift it a little bit right that's all we need to do we just have to add this scrolled class now programmatically so

now in the use effect hook I'm going to say this I'll say if scroll position is more than the threshold position right

we have crossed this 100 pixels of threshold then first of all I'll get reference to this image ref over here so

I'll say on the top over here image element equals image ref do current now we have the access to it so

I'll take this image element I'll say image element do class list and I'll add the class of scrolled and um yeah we

need to wrap all of this code inside of a function so I'll say handle scroll so that we can you know check the scroll

position so I'll add a app Arrow function over here wrap this whole thing inside of it and then after this I'll

say window. add event listener and I'll add the scroll event inside of it which will trigger the handle scroll so now if

I check if I scroll down yep you can see it comes back to normal amazing and also we need to remove the event right when

the component is unmounted so I'll say return window. remove event listener scroll handle scroll and even though it