In this video, we’ll build the Login Page of our Job Portal App using Next.js, TypeScript, React Hooks, and ShadCN UI. 🚀 We’ll start by copying the registration form, simplify it for login, define an interface for login fields, and add navigation with the Next.js Link component to move between Login and Register pages.
By the end, you’ll clearly understand why TypeScript makes React development easier and safer, plus a small task for you: create the Login Page of our job portal app as practice. 💡 ------------------------------------------------------------------------ 🚀 Boost Your Skills with these Pre-Requisite Videos:
⌛TIMELINE⏳ 0:00 – Job Portal App – Login Page 0:50 – What we have in login form 1:25 – Get source code for free 1:45 – Creating login page in Next.js 2:30 – Copy registration page into login page 2:50 – Delete unnecessary fields for login page 4:10 – Login form interface for fields 5:25 – Adding Link component to switch between Register & Login 6:50 – Next video updates
Hello, what's up guys? Welcome to the next, just, present, job portal, full-stack project.
Today is our day number 8 and today we are going to see the login page.
In yesterday's video, we saw how we create the registration page and the beauty over here is that we are using TypeScript.
And because of this TypeScript, we checked out so many things in our simple registration form.
Like, what is this interface? What is this react.fc?
You understand, right? Everywhere we were showing its type, interface, generics.
So I gave you a task, a simple task.
And that is, like I made the registration page, in the same way you make the login page, right?
Because once you register, then it is necessary to log in.
Right? Did we register every time?
No, right?
So in this video, I will tell you how you can create a login page in a snap.
See, if you think carefully, what exactly happens in the login page?
In the login page, you write your email, mobile number, you know, or else you write the password.
So if you see, you either keep this field with you or keep your username field.
And the other one is your password.
Here you don't even have a scene like a confirmed password.
So if you see, we just have to copy and paste this.
Okay, so how can we do it? I'll tell you.
But if you haven't done it yourself yet, please try it yourself.
And before that, if you like the video, then please like it with your friends.
You can tag me on Instagram.
And if you haven't subscribed to the channel, please do it.
Because it takes a lot of hard work.
Okay?
All right, guys, so see.
And yes, by the way, someone commented, update the playlist.
So this is my next project.
I will make a separate playlist for this.
In addition to our next course.
Okay?
So you can check it out there easily.
The source code is completely free.
I have put it on GitHub.
Okay, the link will be found in the description and comment section below.
All right.
So see.
First of all, I'll go here.
Again, what did I say?
Login page.
I didn't say login component.
Here I said login page.
So like we are working on Next.js.
Using TSX.
Basically TypeScript.
So our app router.
Basically, call it app folder.
Whatever folder you create here.
That is, if you write page.tsx or page.jsx in this folder.
So that becomes your default route.
Not default.
Basically, it becomes that route.
Like I want login now.
Right?
So I will go inside the app and write login in this way.
Forward slash page.tsx.
So after doing this.
So now.
Now see.
If you look closely here.
So what did I make here?
My login folder was made.
With this particular file.
So that means my login route was made.
Right?
So whatever was on my page.
Basically registration.
If I copy and paste it here.
Okay.
Now if I go to my.
Not VS Code Editor.
Over here.
Like instead of register.
I will write login here.
So 3, 2, 1.
And boom.
Like this.
See.
I mean.
I can see the same page on login.
Which I could see on registration.
The only difference would be that.
I was fine in registration.
But during login.
I don't need all this.
So what will I do here now?
So what will I do?
I will delete one by one.
Right?
I am going to do it in front of you.
Don't worry.
Like.
Let the form be as it is.
Like here we have this name field.
So I don't need the name.
So I deleted it.
Suppose I don't need this either.
Username.
I deleted that too.
And I want this.
I don't want role.
Okay.
And let my password be.
But yes.
This is the field of confirm password.
I delete this too.
Right?
So once I delete this much.
So if you see.
My login form is ready.
But yes.
It won't be just this much.
If you go here too.
So see this.
Now there is no need for select item.
So delete that.
So do it properly.
And make sure this is also your client component.
Though we have copied and pasted.
So there is nothing to worry.
But still.
Like here there is no need for user.
Delete that.
Right?
And yes.
Like confirm password.
There is no need for this.
Now delete this.
Now the second important thing is.
Here I have written registration form data.
If you want.
You can also write registration form data here.
Or else.
If you want.
Change it.
Right?
Write login here.
Login.
Form data.
Right?
That's it.
Delete role.
Delete confirm password.
Delete username and name too.
Right?
That's it.
Delete name and username.
Delete confirm password and role.
So like this.
You have again defined an interface here.
That your login form.
That you are going to create.
Here you should have only two properties.
Basically only two fields.
And in both fields.
This data type should have only one value.
And you have written it here.
Again.
It's not the registration.
Here you go.
Login.
Form.
Yes.
Login component.
Write it.
Right?
Yes.
Right.
Okay.
So here.
Login form data.
What is the name of the component here?
Login form.
Right?
So again.
Our login form.
This is also a functional component of react.
We have said.
Though in today's modern.
I guess.
Even if you don't write.
But if you write.
Then it's a good thing.
What happened?
Right?
So we have a form data.
Set.
Let it be as it is.
Because anyhow.
We need data.
Whatever the user is feeling.
Right?
And console.log.
I have done.
Yes.
Come on.
Form data is done.
There is no other card.
Our form is equal.
Handle submit.
Value on change.
I told you everything.
What is change event?
Even here.
Form event.
You will see somewhere.
Yes.
Here we have.
Right?
Everything else is the same.
Yes.
I haven't registered yet.
So I will go.
On my register page.
I have registered.
I have to go to the login page.
So I have come.
On my login page.
Right?
Console.
Form data.
As I showed you yesterday.
I will show you here too.
Look at this.
As soon as I wrote.
I got an email.
Password.
Now I will keep writing something upside down.
Look at this.
I got my password.
So basically.
My hook.
Basically.
State management.
We have done.
Now when we.
Guys.
Actually.
Create a schema.
With the help of drizzle.
MySQL.
Basically.
We are working on it.
We are using drizzle ORM.
So that.
It will be a little easy for us.
Right?
So through that.
How can we create registration?
I mean.
How can we complete it?
And then.
Once registration is done.
So how can we do proper login?
How can we add session in it?
Authentication.
Authorization.
All these things.
Now we are going to start from tomorrow.
But yes.
Not for today's video.
You saw.
How easy it was.
Where.
Create your account.
Guys.
Change the name here.
But whatever.
Registration.
Page.
And login page.
We have created.
Our job portal.
And here.
We have used.
TypeScript.
Right?
So yeah.
This is it.
For today's video.
Yesterday's video was so long.
But.
I don't want.
To keep today's video long.
Because.
Whatever was yesterday.
Is the same today.
So please.
If you haven't checked out.
Yesterday's video yet.
So do it.
I will update the whole playlist now.
So you can check it out.
I have updated the source code on GitHub.
So you can check it out.
As I have already told you.
TypeScript.
React.
Next.
React.
I have updated the whole playlist on all of these.
Check them out.
So that you can get more help.
Right?
And if you have any opinion.
Any suggestion.
So please tell me by commenting.
I will definitely work on it.
Right?
And if you like the video.
Like it.
Share it with your friends.
And I will meet you in the next video.
Till then guys.
Thank you so much.
Take care.
