Full Stack React Project ( AI Career Coach ) - Next JS, Tailwind, Gemini AI, Prisma, Shadcn UI 🔥

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

is working but let's just add the else

condition over here as well else I'm

going to say remove the scroll if the

threshold is not less than that right so

let's see yep amazing this is working

flawlessly great so now that we have

created our hero section let's move

forward to this feature section over

here so I'll go back to my page. jsx and

below this hero section I'm going to

have another section right here for the

features so I'll add a d and a h two tag

which will say powerful features for

your career growth okay now to render

all of these features right here we

would need all of this data right and

all of this data over here as well so if

you want you can create your own data or

what you can do I have added this data

inside of my GitHub repo so inside of

this data folder over here you can find

these four files FAQ features Industries

and testimonials make sure to download

all these four files right so let me

just do that real quick all right I have

downloaded Ed them and put them inside

of this data folder right here right

don't worry about it right now we're

going to be using one by one so first of

all we would be needing this features

and simply what we're doing over here is

we have the icon title and description

these three are what we will be

rendering over here right and we will be

mapping through this features array so

I'll go to page. jsx and after this H2

I'm going to have another div which will

render my features so features. map and

we will take each and every feature and

the index and inside of this we will

render all of these features inside of a

shat CN UI card so how do we create a

card in shat CN UI let's see I'm back in

this documentation and over here in the

card Yep this is what we want so let's

just copy this code right here and I'm

going to say return and paste it over

here okay we won't be needing this card

header so let me just get rid of it and

import this card card content and card

footer as well I don't think we will be

needing it this is all we need first of

all insert this card content I'm going

to have a Dev right here which will

render the feature do icon and I'm also

going to be having a H3 tag which will

render the feature do title and then a

paragraph tag which will render the

feature. description let's save this and

see if we can see anything over here

features is not defined okay we need to

import it just like this from data

folder and if you scroll down yep that

is what we want let's just go on and

style it first of all for this parent uh

section right here I'm going to say

class name to be width full padding

vertical to be 12 in the bigger screens

padding vertical is going to be 24 and

in the larger screens it's going to be

32 and background is going to be this BG

background color from shat C and UI

right so let's see yep we have some gap

between them and yeah it gives us this

error each child in a list should have a

unique key prop so that is what we have

to add over here in the card I'll say

key to be index okay now for this div

right here I'm going to say class name

to be container margin horizontal to be

Auto some padding horizontal to be four

and in the bigger screens it will be PX

to be six for this H2 I'm going to say

text to be 3 Exel font is going to be

bold and tracking tighter so that the

you know words a little bit closer to

each other text is going to be Center

and margin bottom to be 12 so yep that

is what we can see over here and now for

this D we will be giving a display grid

right here right so I'll say class name

to be display grid in the smaller screen

The Columns will be one medium screen

columns will be two and larger screens

columns will be four we can see all of

them right so Gap is going to be six

between them and Max width is going to

be six XEL and they will be in the

middle so I'll add margin horizontal to

be Auto just like this let's just add

some styling to each and every card so

for this card right here I'm going to

say border to be2 when we hover on it

border is going to be primary color that

is we can see the you know border around

them transition color so that when we

hover on it we can see the colors

transition and 300 millisecond is going

to be the duration so if I H on it yep

just like this now for each and every

card content over here I'm going to be

saying padding top to be six some text

Center display flex and flex to be colum

so that they are on top to bottom over

here and items to be Center horizontally

for this internal div I'm going to be

saying display Flex Flex to be column

items to be Center and justify to be

Center so that you can see everything is

in the very middle now for each and

every one of them first of all for the

H3 tag I'm going to be saying the class

name is going to be text Excel and font

bold and margin bottom to two so there's

some gap between these and I'll make

this paragraph a little bit muted color

so I'll say text muted foreground so

like this now we can clearly see them

right here all right now after it we

want this feature right here this

Statistics feature right so let's build

that section so over here below this

section you know what let me just copy

this section up from over here and paste

it right here and let me remove these

features from here let's also get rid of

this H2 right here instead of back BG

background I'm going to say PG muted

oops

muted to be 50 opacity padding vertical

to be 32 let's just remove this in the

larger screens I think this should be

enough and over here inside this D we

can add four different stats now when I

was building this app I had written the

HTML for it and I forgot to create the

separate data for it so let me just

bring this in it would look something

like this so for each and every D we're

going to have the stat and the subtitle

for it right like 50 plus Industries

covered we're adding display flex and

flex column so that these are on top to

bottom item Center and justify Center so

that they are on the middle and space y

to be two so that we have some gap

between them right and simply for 50

plus we will have text 4XL and font bold

and this one will be muted and similarly

we will have three more stats over here

which again if you want you can create

your own or you can copy just like I

have written like 1,000 plus interview

questions 95% success rate 24/7 AI

support right so let's see if we scroll

down yep that is what we want right so

after this section uh you know what one

thing but while creating a landing page

I would say the development is the

easier part the main thing is to

understand how you can create the design

right and what are all the elements that

you can separate separate elements that

you can create to build an app like this

so you can use there there are variety

of websites available like behance and

dribble which we can go and take the

inspiration of design from right just

don't copy it take take some inspiration

and add something on your own as well so

below this section let's just again so

this is going to be pretty similar to

this feature section right so I'm going

to take this section and uh copy it

right here and on the top instead of

this we can write how it works and we

can also add a paragraph tag over here

which will say four simple steps to

accelerate your career growth and you

know what let's just wrap this whole

thing inside of a d so that this is

separate from the below section

and let's remove all of this and I'm

going to say margin bottom to be four

and for this div over here I'm going to

say text to be Center Max width to be

3XL and some margin horizontal to be

Auto and margin bottom to be 12 so let's

see if I go down yep we can see this we

just need to change this thing right

here and let's remove everything inside

of over here in this features. map

instead of this I'll take the how it

works and make sure to import it that we

copied inside this data folder over here

right how it works. JS I'll take each

and every item and the index so I'll

take each div over here and actually

since there are I think how many items

are there so there are four I think we

don't need to change this grid over here

so inside this div I'm going to Simply

render my item do icon and let's see how

it looks if we scroll down okay we need

to add a key prop as well so key to be

index and for this div let's just add

add a class name of width 16 height 16

rounded to be full background color is

going to be primary with 10% opacity

flex and items to be Center justify

Center and now if you see yep we can see

it right here but we cannot see the icon

over here so what did I do wrong it

should be icon with the capital I no I

think it should be small I over here

that's better now if I see yep we can

see the icons let's get this Dev some

class name of display Flex Flex to be

columns items to be Center text to be

Center and space y to be four so that

these are in the middle yeah that looks

good now below this D I'm going to have

the H3 and the paragraph tag as well

which will contain item. title and item

do description which will be a sem font

semibold and text to be Excel and again

paragraph is going to be muted just like

what we've been doing up until this

point right just like this great after

this what do we have we have what our

users say right again this will be very

similar to what we how we have been

creating this featured section right so

I'll just copy this feature section over

here again and go down after this

section and I'll paste it right here

right first of all over here I'm going

to Simply say what are users say and

instead of this features I'm going to be

mapping my testimonial right so I'll say

testimonial I'll take one single

testimonial over here for this card

simply I'll say background is going to

be this background color that we have

defined like that shat scene UI has

defined now inste of this card content

let me just remove everything and write

it from scratch but first of all let's

see if we can see anything over here yep

what our user say with three cards of

our testimonial let's just first give

this card content just the class name of

padding top to be6 now inside of this

card component over here I'm going to

have a d and let's plan how we're going

to be building this so if you see over

here we have this Dev first and then we

have this Dev for containing this uh

block code right so inside this div I'm

going to have first div for that one and

then we will have a block code for our

code right and then inside this div

we're going to have two things first the

image and then the information about the

user right so I'll have a div for the

image and then another div for the info

about the user so first of all for the

image so I'll add a image tag over here

import it from next SL image and inside

of this I'm going to have the SRC of

testimonial. image width and height of

40 and all tag of testimonial. author

let's see if I go back to our app um

okay so we're using this random user. me

over here right if you go to the data

we're using this image with random user.

me API so we need to add this to next.

config.js we need to tell nextjs that we

are using this so insert this I'm going

to say images and remote pattern I'll

say protocol https and host name to be

random user. me so let's see now if I

refresh this let's scroll down okay we

cannot see the image yet y now we can

see great let's add the class name of

rounded full object cover border tob2

and like border color to be primary and

20 opacity so let's see yep like that

now after this inside of this T over

here we're going to have three paragraph

tags first one we'll have testimonial

author testimonial role and testimonial.

Company right this will be semi- bold

this will be text small both of them and

this will muted and this will be text

primary color so let's see yep that is

what we want and for both of these for

this parent da over here I'm going to

give the class name of display Flex

items to be Center and Space X to be

four let's see now sorry I had to give

this class name over here not there and

now let's see yeah that's better for

this image Dev I'm going to give the

class name of relative height and width

to be 12 and flex shrink to be zero so

yeah it will take the space available to

it for this parent div right here I'm

going to give the class name of display

Flex Flex column because the block quat

will be in the bottom of it right in

like below it and space y to be four

like this okay now you can't see much

over here right now but for this parent

Dev of this testimonial do map let's see

okay okay I've have given grd columns 2

and over here I think it should be grd

columns 3 because we just have three

items over here right so let me just

remove it and let's add gap of eight

between them and yeah now we should see

them in the middle yep something like

that okay so now let's work on this

block code so here simply let me just

bring in the code real quick we will

just have a paragraph tag which will say

text muted foreground and it will be

italic since this is a quote right and

position relative and insert this we

will first add this quote Right double

inverted commas so to write that you can

write something like this and we will

just style them text 3 XEL text primary

and Position will be absolute minus top

four and minus left to be2 similarly for

this one as well minus bottom to be four

and then we'll simply insert our

testimonial quote between them like

which looks something like this right so

yeah let's see yeah that's exactly what

we wanted in the it as well and let's

just add some background to this so what

I'll say background muted to be 50 over

here okay yeah that looks much better

now I think the only thing remaining is

frequently asked questions and this CTA

at the bottom let's just build it real

quick this will be very easy just like

what we've been doing up until now let

me just copy this section above it this

how it works section and let me just

paste it right after it let me just get

rid of everything inside this map

because we will be mapping through the

fa cu's over here this won't be a grid

so let me just remove everything over

here in like apart from these two things

on the top instead of how it works I'm

going to say frequently asked questions

and instead of this paragraph I'm going

to say find answers to most common

questions about our platform let's see

okay yeah let's just render the FAQ real

quick so we have created this fuuse data

of question and answer over here so

inside this I'm going to say return and

I'm going to return a accordion actually

over here not

accordion accordion item we will wrap

this with the accordion so let me show

you so if I go back to shat CN UI we

have this accordian component right here

just like this and to use it this is the

code I'm going to take it and paste it

right below it and we will take the

accordion item and first of all let me

just wrap this with the accordion and

over here is what we will be returning

the accordion item right let's go back

and see accordion is not defined

obviously we have not imported it so

let's import accordion from /ui folder

accordion trigger accordion content all

of this has been Tri like imported I

guess let's see yep but obviously we

have to provide the key as well right

and also it takes this value right here

so I'll say key to be index and value to

be item and whatever the index of that

item is right so now we can access every

single

separately and instead of this we will

add the dynamic value that is FAQ do

question and over here as well FAQ dot

answer let's make it full width so I'll

say class name to be width full so page

crashed let me just reload it FAQ is not

defined oh sorry FAQ over here not the

item yep just like this this is exact

what we wanted the most asked questions

about our app and then in the end we

want to have a this beautiful seat here

right which most of the SAS companies

nowadays have to make the conversion

even better so again let me just um

duplicate this section I'm going to copy

it and paste it right here you won't be

needing this accordion now let's get rid

of this div all together for this H2 I'm

going to say ready to accelerate your

career and for this paragraph I'm going

to say join thousands of professionals

who are advancing their career with AI

powered guidance now obviously we will

be changing these Styles a little bit so

instead of this section over here I'm

going to say width to be full instead of

this div I'm going to be saying margin

horizontal to be Auto padding vertical

to be 24 some gradient so if you

remember we created the gradient

Tailwind CSS class right so we will be

using over here for our background color

and rounded to be large so let's see yep

something like this we have to enhance a

little bit more for this div over here

I'm going to be saying display Flex Flex

column so that we are aligning them from

top to bottom items to be Center justify

Center so that they are in the middle

space y to be four between them text to

be Center and maximum width is going to

be 3 XEL which is around 768 pixel right

and obviously we want them in the center

so margin horizontal to be Auto for this

h2 tag I'm going to be saying in the

smaller screens three XL some font bold

and tracking tighter so that texts are

closer to each other text color to be

primary foreground in the smaller

screens it will be text 4 XEL size and

medium screen 5 XEL so let's see yep

that is what we wanted let's do the same

for the paragraph tag as well so margin

horizontal to be Auto and Max width is

going to be 600 pixels text primary

foreground but with 80% opacity and in

the medium screens text Excel like this

now in the bottom below this P tag I'm

going to be Simply Having a link tag

which will take us to the slash

dashboard page a button with size large

variant secondary and class name to be

height 11 margin top to be five and it

will bounce right this is a native

Tailwind class of animate bounce and I'm

going to Simply say start your journey

today and I'm going to add a arrow right

icon which will come from Lucid react so

link is not defined let's import link

from next SL link let's see yep there we

go this is exact ex L what we wanted

amazing so we have successfully

completed our landing page Pat your back

now let's go on and dive into juicy

stuff that is designing our database

right designing the tables inside of our

database using Prisma so first of all

let's just first go on and install

Prisma inside of your app and then what

we will do we will go on and design our

database so I'll say npm install

dashd Prisma so let me show you what

Prisma is all about so if you just

Google Prisma right here just open it up

and in the documentation let's see this

example right here of create right like

if you were to create something using a

SQL query it will be super long right

like insert into this table blah blah

blah blah it will be a headache but

Prisma makes it super easy like you can

see Prisma and let's say if you want to

insert into user table do user do create

and simply providing our data right here

super easy so the Prisma has been

installed I'm going to say and PX Prisma

in it and it will initialize our project

with Prisma over here so you're going to

notice it has created this Prisma folder

with schema. Prisma and this is the

place where we will be creating our

tables and you can see it has picked up

this database URL that we have added

inside of the EnV file and it will use

it to connect to our post G SQL database

so this is how our database will look

like so first of all we have a user

table where we will be storing all of

the information of the user now you

might be thinking we are already using

clerk for storing uh the user info right

but we will also be storing a copy of

that information inside of our database

along with few more uh things like

industry bio experience skills Etc right

so that we can access all of these

details fast and we can query the other

tables along with the user table faster

all right so as you can see we'll be

storing the ID like obviously this ID

will be generated but we will be storing

the clerk user ID over here and the

email the name the image URL and the

industry so this industry will be a

foreign key to this industry table right

here we'll come back to this apart from

that we will obviously have a created ad

and updated ad that we generally do in a

database table then we will have the bio

of the user so bio experience and skills

these are the three questions that we

will be asking the user when user is on

the onboarding screen right so we will

also be asking their um you know

industry so we will have to uh you know

categories for this one like the first

category will be for selecting the uh

industry like for example Tech Finance

etc etc and then the sub industry like

for example in Tech are you in data

science uh front end development backend

development Etc right so that is what we

will be storing over here in this

industry table and we will be generating

the industry insights and storing them

right here and as I already showed you

in the intro that we will be updating

this uh particular information every

single week right so for for example if

there are two users who are uh you know

in Tech and they are front end

developers this information will be

updated for both of them right along

with the salary ranges the growth rate

demand level what are all the top skills

that they can learn how does the market

look like in the future right key trends

what are the recommended skills that

they should be learning right so this is

the whole package that is being provided

to the user in terms of the insights

when it comes to their industry okay so

that's that apart from that the user

table is connected to these three things

these two like these three AI tools that

we have inside of our app right first

one um let's start with the resume right

so we can build our rum we will store

the markdown of the rume over here in

the content if we want we can generate

an ATS score over here I've just kept

this uh field over here even though this

is not the part of our application so

that if later on we decide to add this

feature we can add this feature right

here right but right now it's not our

priority because we are just generating

the

and alongside it we can also provide

user the feedback on this right so if

you want you can ignore these two Fields

over here as well right the major field

over here is this user ID that this

belongs to and the content that is what

is the markdown content inside this

resume and again the updated at and

created at now we will also uh like user

will also be taking the mock interview

inside of our application so we'll be

taking like we can configure it we can

ask them five questions 10 questions Etc

right so we'll be storing information

about every single assessment like what

are all the questions that were involved

in that particular assignment along with

the answers what category does it

belongs to the score of that particular

quiz if user gave any wrong answers we

can ask like we can provide them an AI

generated Improvement tip over here as

well and of course the user ID as well

right apart from that when it comes to

generating a cover letter we will have

the user ID the content of that cover

letter that is generated right the job

description from which this was

generated

the name of the company the job so

basically these three things are the

ones that we will be using to generate

our cover letter right so yeah this is

the basic structure of our database now

let's go on back to our code and let's

design all of these database models

inside of our schema. Prisma file right

here so to create a model we have to say

model and the name of that model like

for example in this case user right so

what were the things that we discussed

first of all it was the ID which will be

generated uh automatically so let's say

string and if we want we can provide it

some default value as well which we will

do it over here so I'll say this is an

ID you can read the description about it

right defines a single field ID on the

model and then I'm going to say add

default and we can provide the type of

ID this will be so I'll say uu ID so it

generates a global unique identifier

based on The UU ID spec apart from that

we will also have the clerk user ID as I

already showed you which will be unique

we will have the email name the image

URL of the user and name and image URL

I'm keeping optional over here then I'm

going to have the industry which will be

a string and as I already showed you

let's see user belong in the tech

software engine like software

development industry right so we will

combine both of them that usable from

Tech and inside of this we will have the

software development then after this we

want to connect this industry to the

industry table right so we will be

creating a industry table over over here

as well so I'll say industry insights

and obviously we'll come back to this

later but over here I'm going to say

industry insights is going to be the

type of Industry insights

table and then we will Define the

relation between this user table and

Industry table so inside the industry

table we have a field called industry if

you remember this thing right here and

we will be connecting this to the

industry field inside of the user table

that is this field right here then after

that we will obviously have the created

at and updated at Fields as well okay

then on the onboarding screen we will

ask users some questions right so I'm

going to say profile fields and I'll add

bio which will be type of string

experience which will be of type integer

and the skills which be which will be

array of skills right or string then

after that we will also store the users

resume and the assignments that they

have uh attempted first of all the

assessments the resume and the coverlet

and obviously these three will be uh

related to the separate table that we

will be creating so let me just um

create it real quick over here I'll say

model assessment let me duplicate it

twice I'll say model resume and model

cover letter so each user can have more

than one cover letter and more than one

assignment but a user can only have one

single resume all right so let's check

this assignments or the assignment table

right so let me just bring it real quick

and then I'll explain you what's going

on over here so obviously in the

assignments table we will have the ID

the user ID that this belongs to and

then we will Define the relation between

both of the table so since this is a

foreign key I'm going to say inside of

this table we have user ID Fields user

ID which references the ID of this user

table that is this particular ID of the

user table which we are storing right

here then we will obviously store the

quiz score that we got after attempting

the quiz the question so this basically

be a Json so it it will contain the

question answer the users's answer and

what is the correct answer right so all

of these information that we'll be

storing over here we will have the

category of that quiz that is if it's a

technical quiz behavioral quiz Etc what

is the you know a generated Improvement

for that particular quiz if any so this

is optional and obviously created at an

updated ad and then we are saying that

Index this table with the user ID so

that this remains unique then comes

resume again very similar to what we

have already seen ID the user ID and we

are referencing the user table over here

the content which will contain the

markdown of the resume we can if you

want you can skip both of these right as

I already mentioned I've just kept it so

that later on if I want to update

something inside this project I can add

the atss scoree feature over here as

well right so you can remove that and

then we have created it and updated it

over here as well right when it comes to

cover letter we will have the ID the

user ID again referencing that user

table the content of the markdown

content of that cover letter the job

description from which this was created

company name job title and obviously

created at and updated at and again we

are indexing this with the user ID now

let's see the industry insights this is

uh you know quite complex first of all

obviously we will have two things over

here right the ID of that particular

table and the industry that the unique

industry like I already gave you the

example tech software development right

then we will have the list of all of the

users in the industry so we will write

them just like this then after this we

will have more things like salary ranges

which we will get in this particular

format we will get the role that this

industry has like for example data

scientist or backend developer then what

is the minimum and the maximum salary

and what is the average salary so let me

show you something like this so over

here you can see we have multiple

different uh information about that

particular industry right mobile app

developer devops engineer backend

developer Etc then we have the growth

rate demand level and the top skills

right so again you can see the growth

rate the demand level and the top skills

over here right this will be an array so

I've added string array growth level

will be in the float format then next we

will have the current market condition

right and what are the key trends right

now so this can be positive neutral or

negative key trends can be array of

current industry Trends then we have the

array of recommended skills and last

updated and the next update that will be

happening for this right so which will

be next weekend so also you can see we

have a lot of these enums over here

right that this should only have these

many values this should only contain

these many values right I mean either of

these values so let's create the enim

for this so for demand level and Market

Outlook I'm going to say enum demand

level and I'll say high medium low and

Market Outlook can be positive neutral

or negative right so I can just take

this and provide it right here and same

for Market Outlook as well over here

right this is much more better and much

more robust and yeah I think uh that

should be it let's just open our

terminal and I think there's some error

over here so industry Insight I think

that should be it not insights and now

we have to say npx Prisma migrate Dev

and we have to provide the commit

message which let's say create models

and press enter so what this will do it

will push all of these schemas to our

database that is our neon database and

we can see it right there so let's just

open the neon database there we go this

is pushed and now if we go back to this

tables tab inside of our database let's

just select Sensei and uh let's see yeah

you can see all of these tables have

been created successfully amazing so now

what I want to do first thing first

let's just store our user inside of our

database right so to query Prisma inside

of our app I'll be creating a file over

here in this lib folder there I'll say

new file and I'll name it Prisma do JS

and inside of it I'm going to say

export const DB equals new prisas Prisma

client and let's import it from at

Prisma / client now if we were to use

this uh new Prisma client to query our

database every time the nextjs uses hot

reloading that is it refreshes our app

it will create a brand new Prisma client

over here as well so we don't want that

right so what we want to do we want to

store it inside of our Global variable

so I'm going to say if

process.

env. nodecore EnV is not equals to

production right so I'm going to say if

we are not on production that is we are

on the development I'm going to say

Global this. Prisma equals DB and every

time we export this I'm going to say

Global this. Prisma if this exists then

take it else we will take the new Prisma

client all right let me just add an

small explanation over here for you guys

so you can refer it later on cool then

so now to store our user inside of our

database I want to run that function

every single time my app runs right we

have to check if the user is added

inside of our database or not so what

I'll do I'll create a new file over here

called check user.js I'm going to say

export const check user equals if sync

and this will be an arrow function and

ins start of this now we will first

check if the user is logged in or not so

we will take this current user from at

clerk / nextjs SLS server make sure to

import it from this only right so we

will take this and then we will check if

user is there or not so I'm going to say

if user is not there then return null

now we will try to query our database so

I'll have a try catch block over here

inste this I'm going to say await DB and

import that DB that we just now created

do user so we're going inside the user

table and then I'm going to say find

unique we want to find one single

database which like we want to find one

single entry which is unique to you know

particular users ID so we have already

like we will be storing uh clerk user ID

right I've already showed you that so

I'm going to say where the clerk user ID

is equals to user do ID the user ID that

we got from this object user object over

here right and and then we will store it

inside of the logged in user so

basically we are checking if the user is

already stored inside of our database or

not so if it is if the user is stored

here inside of our database then we will

simply return the logged in user and we

don't have to do anything right but if

user is not stored inside of our

database then we do need to store it so

I'm going to say const name equals user.

first name space user. last name and

then to create this inside of our

database let me just copy this whole

thing up and paste it right here instead

of logged in user I'm going to say new

user and I'll say db. user. create

instead of this where I'm going to

provide the data that I'm supposed to

store so data will be clerk user ID

which will be user. ID the name of the

user that we just now created the image

URL which will be user. image URL and

the email right so user. email addresses

user can have more than one email in

clerk but we will just take the first

email address and we will store that

inside of our database and then we will

simply take this new user and return it

so return new user over here that's all

and in the console like in the catch

block I'm going to say console log and

log the error do message over here that

is all we need to do right now we will

just take this check user we will go to

our header component and making sure

this is a server component and let me

just get rid of this yeah and this

should be an asynchronous function since

this is a server component and I'll say

await check user right here every single

time we land on our app we will check if

the user is like part of our database or

not so import this check user and if

they are it will simply return it from

over here else it will create it let's

go on and check it out so now let's go

on and sign in continue with Google and

we are in this should have posted the

user inside of our database let's see if

I refresh this uh user table over here

there we go we we have the user

information inside of our database along

with the email name image URL and all of

these things obviously the industry is

empty right now and we can also see all

the tables that our user table is

connected to over here but we cannot see

anything since we don't have any data on

them right now cool then let's go on and

um you know create our onboarding page

but before that I want to explain to you

guys how routing Works in nextjs so as I

already told you guys for every single

uh route that we create like for example

over here in the O we have this layout.

JS file right so we can have a layout.

JS file and we can also have a page.js

file and page. jsx is what makes a route

possible right so for example for the

internal routes of our app we will have

the main folder right so I'm going to

group them in the main folder and

obviously this is optional you can do it

without this main folder as well but

since we want a consistent layout for

our application we will be creating a

layout

.js file over here which will wrap all

of the routes inside of our main file

like or sorry main folder like for

example I'm going to be creating a new

folder for on boarding over here and

inside this we will have a page. jsx

file let's say r fce on boarding page

right simple as that and in the layout.

JS I'll say R fce if I want this on

boarding to fall under this layout I

want to create it inside of this Main

folder right so I'm going to say main

layout and then I'm going to take the

children over here that we will be

rendering so I'll be rendering these

children right here and then if I want I

can provide them some Global Styles just

for this uh routes that fall under this

main folder right so I'll say class name

to be a container MX Auto so they are in

the very middle some margin top to be 24

so that our header does not overlaps

them and some margin bottom to be 20 and

also since all of these are protected

routes right I'm going to be adding the

logic over here so that when the user is

already onboarded we will check if like

we will land on the onboarding page and

then we will check if the onboarding

process already completed then we don't

need to do it again right so we will

redirect user after on boarding right we

will come back to this later on but

first so what are the different types of