Download "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FveA5tIwU1XI%252Fmaxresdefault.webp&w=1139&q=75)
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FBLDFsvWf8zY%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FHv68IixGqYE%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:03
hello and welcome to part three of M00:00:05
stag block project Series in the00:00:07
previous video we were just able to00:00:08
finish the nav bar and menu of our blog00:00:11
website project today we will create00:00:13
login API in nodejs and by the end of00:00:15
this video we will finish both login and00:00:18
sign up API but before we do that I00:00:20
would like to urge you guys to subscribe00:00:22
to intellipath YouTube channel and don't00:00:24
forget to press on that Bell icon for00:00:26
regular updates coming from our team so00:00:28
without any delay let's head over to our00:00:31
code editor and start with today's00:00:32
agenda so first of all to create backend00:00:35
first of all I'm closing all of this uh00:00:38
terminals over here you can see uh I'll00:00:40
be closing all of these tabs and I have00:00:43
also closed my terminal over here okay00:00:45
so first of all we will go to our mongod00:00:47
Atlas and create00:00:53
our database so first of all I'll be00:00:57
moving to my mongodb uh you you can see00:01:00
I already have the account if you don't00:01:02
have the account from here you can00:01:03
create your account and I already have00:01:06
the account so I'm signing00:01:16
in I'll be directly uh logging in with00:01:21
my uh Google account okay so if you00:01:24
don't have account uh go ahead and00:01:26
create one because we will be using00:01:29
mangodi as our back end okay and also00:01:32
download mongod compass in your system00:01:34
so from here just you have to type00:01:39
DB00:01:43
compass compass download and from this00:01:47
you can download your mongod compass00:01:49
because we will be using a GUI interface00:01:51
for our mongod to keep track off all the00:01:54
data okay so from here you can see this00:01:56
is the latest version and you can00:01:59
directly cck on click on download and00:02:01
download this mongodb Atlas this is00:02:03
completely free tool um and if you want00:02:06
to use Atlas as well you can use atas as00:02:08
well but I'll be using Compass over here00:02:10
okay so if I'll just close this tab and00:02:13
over here you can see uh my dashboard is00:02:16
loading but I have want to create a new00:02:19
project so I'll just click on new00:02:20
project over00:02:25
here and with that you can see this00:02:27
window has popped up uh of creating new00:02:30
project so over here I'll be uh giving00:02:32
my cluster a name so let's say00:02:36
blog okay and click00:02:39
next uh if you would like you can add00:02:42
more owners to it but right now we don't00:02:45
uh need to do00:02:47
that because only you will be U managing00:02:50
your database Cloud right if you want to00:02:52
give access to others you can also do00:02:58
that it will take a while if your00:03:02
internet connection is slow or sometimes00:03:04
it uh takes a lot of time so uh wait uh00:03:08
until it's loading and then we will move00:03:10
ahead okay now after loading you can see00:03:13
over here uh the screen to create your00:03:17
database okay so I'll just click on00:03:18
create over00:03:24
here and then you can see this option so00:03:27
here I'm selecting this free version00:03:29
okay and you don't need to change any of00:03:31
these and you just have to uh click on00:03:33
create00:03:35
okay okay so it's asking whether if we00:03:37
are human or not and trust me guys uh00:03:41
I'm never able to crack this at first00:03:44
time okay00:03:47
so brao I did it in first okay uh jokes00:03:52
apart uh let's add our username and00:03:55
password so here I'm keeping my username00:03:58
as admin and and my password is admin as00:04:00
well okay so just make sure you remember00:04:04
your username and password because you00:04:05
will be needing this a lot so don't you00:04:09
know just click on create user because00:04:11
you will forget that particular password00:04:12
and you won't be able to access this00:04:15
database then you have to go through the00:04:17
whole process by changing the password00:04:19
and a lot so just click on create00:04:22
user now over here you can see uh it's00:04:25
giving you00:04:27
the function to add the IP address so00:04:30
right now this IP is only accessible00:04:32
inside my system if you guys want to00:04:34
access this particular database from00:04:36
your system you won't be able to do that00:04:38
because this IP is restricted to my00:04:41
computer only this is my computer's ID00:04:44
so we don't want that right if we are00:04:46
creating some database we want everybody00:04:48
to access that particular database data00:04:51
right we don't want them to give00:04:53
permission to manipulate those data we00:04:55
just want to give permission to use that00:04:58
database or you can say f the data from00:05:00
it okay so that our application works so00:05:04
over here just click on ADD00:05:08
sorry over here you just have to uh you00:05:11
know add IP address over00:05:14
here so uh here we will be adding uh00:05:18
0.00 something um for the IP address to00:05:21
make it accessible for all so over here00:05:24
uh we will add this particular ID that00:05:26
is 0.00:05:28
0.0.0.000:05:29
sl0 so what this IP will do this will00:05:32
make your uh database accessible from00:05:35
all the apis coming from okay so it will00:05:37
accept all the IP addresses requests00:05:40
okay so let's just click on ADD00:05:48
entry and it didn't add entry let's try00:05:51
again okay so over here you can see this00:05:54
IP is added to our IP access list okay00:05:57
so now this database is accessible from00:06:00
every um point in the whole Wild World00:06:04
okay now uh what I'll do I'll go to my00:06:15
database00:06:16
and over here you just have to uh click00:06:19
on00:06:21
connect and go to this Compass option00:06:24
okay so as I have mentioned I have00:06:26
already downloaded my compass and if you00:06:28
haven't just go go ahead and do that00:06:30
okay so what we will do uh we will just00:06:33
click on I have mongod compus installed00:06:36
so if you don't have from here you can00:06:38
you know directly download or copy URL00:06:41
to download it okay so from here also00:06:44
you can download or uh you can download00:06:47
it from the website which I have just00:06:48
shown you okay so I already have it so00:06:51
I'll just click on this and I'll just00:06:53
copy this00:06:54
particular link you can see this is the00:06:57
connection string over here so what we00:06:59
will do we will just uh move to our00:07:01
Compass so you can see over here I00:07:04
have00:07:09
Compass over here we will create a new00:07:12
connection over here so you can see uh00:07:14
this is mongodb and here you have to uh00:07:17
give your password over here okay so00:07:19
what password I have took I have took00:07:22
admin as my password so I'll keep that00:07:24
and I'll uh click on seven connect now00:07:28
uh here you can select any color you00:07:30
want so I'm just going with this uh dark00:07:33
color and name is blog and save and00:07:37
connect00:07:41
okay so you can see it has created our00:07:44
database over here now what we will do00:07:46
we will paste that same connection00:07:48
string inside our uh vs code so inside00:07:50
my back end I'll be creating one um dot00:07:53
EnV00:07:54
folder and over here inside my EnV00:07:57
folder what I'll do I'll just you you00:07:59
know uh create one variable let's say00:08:07
URL so that we don't have to uh you know00:08:10
publicly write this particular URL so00:08:13
that's why I'm doing this and uh over00:08:15
here also you just have to mention a00:08:17
password so let's say admin over here00:08:20
like this okay so this is just a00:08:24
URL we don't write it inside our code00:08:26
because we don't want it to be00:08:28
accessible to anyone with anywhere we00:08:31
deploy the project okay let's say I have00:08:32
deployed this particular project and00:08:34
inside that particular project uh00:08:36
instead of EnV not EnV means the00:08:38
environment variables okay so instead of00:08:41
creating EnV I have just mentioned this00:08:44
particular real whenever I'll be using00:08:46
my inant of that okay so what00:08:49
people can access my particular database00:08:52
from this because I already have my00:08:54
password and ID right so what happens is00:08:58
anybody can access your particular00:09:00
database and we don't want that00:09:02
obviously we don't want that right00:09:03
that's why we create our environment00:09:05
variable so it's not just about the00:09:07
mongodb URL we store sometimes this00:09:10
uh password and user ID also00:09:13
inside our EnV file also we store the00:09:16
port number or you can say uh repeatedly00:09:19
uh using things so let's say um we want00:09:21
to access our particular project on port00:09:24
number let's say 8,000 so for that what00:09:26
we do we directly mention that port00:09:28
number number like this let's say Port00:09:31
is equal to 8,000 over here okay so what00:09:35
we will do instead of uh you00:09:38
know writing the port Local Host 8,00000:09:42
again and again we directly write Port00:09:44
whenever we need that Local Host 8,00000:09:47
variable okay so uh as of now let's keep00:09:51
this two things inside EnV and later on00:09:54
we will add our JWT Secrets also and00:09:57
I'll explain you what JWT is but right00:09:59
now let's just focus on this00:10:01
first okay so after doing this much what00:10:04
I'll do I'll just um create one more uh00:10:08
you know file over here and I'll give00:10:10
that file as uh index.js you can use00:10:13
server.js as well uh it's your choice00:10:16
okay but I like index.js better so I'm00:10:19
just creating index.js maybe for next00:10:21
project we will create um server.js or00:10:24
something like that00:10:25
okay now over here first of all I'm00:10:28
opening one ter Al and inside that00:10:31
terminal make sure you move to your00:10:32
backend folder so let's say CD00:10:36
backend00:10:38
okay I hope this terminal is visible to00:10:43
you better00:10:45
right now what we will do we will uh00:10:48
install few of the you know required00:10:50
things first of all is00:10:53
npmi00:10:58
Express00:11:02
this will uh install Express inside our00:11:04
uh you know particular folder so you can00:11:06
see by doing this uh npmi express it has00:11:09
already created a package.json package00:11:12
log. Json and install the node modules00:11:14
inside it so let it be now we will um00:11:18
install our so npmi00:11:22
so if you will just move to you00:11:25
know00:11:26
um00:11:27
npm00:11:35
install so you can see this npm00:11:38
you can uh refer this particular00:11:40
documentation for uh you know knowing00:11:43
how it works if you are like really a00:11:45
fresher inside this field so you can uh00:11:48
directly uh refer this particular00:11:50
documentation of how we can use00:11:53
and what actually do for our00:11:55
project and everything is written over00:11:56
here you can see um how to connect your00:11:59
database is already given over here00:12:00
defining a model and everything because00:12:03
uh whenever we will be creating any you00:12:05
know database so first of all we have to00:12:07
create a schema so for creating that00:12:10
that schema inside our mongod pet we use00:12:14
so to create schema we directly uh00:12:17
use do schema and uh inside that00:12:20
we give all the variables we need okay00:12:23
similarly uh to connect we have mongus00:12:26
doc connect and so on Okay so so this is00:12:29
how we import inside our project00:12:32
so if we are using um you know nodejs or00:12:36
modules in that case we directly write00:12:39
like this or if you use es6 in that case00:12:42
we use import from00:12:44
okay it's just that whenever you are00:12:47
using mmas script 6 Imports in that case00:12:50
whenever you are importing some other00:12:51
files let's say I have one file inside00:12:54
my config folder and that files end00:12:57
withjs so in in that case what you have00:12:59
to do you just have to mention do JS00:13:02
over there but when we are using uh this00:13:05
kind of uh you know node js in that case00:13:07
we don't have to do that00:13:09
so we will see how to do it both the00:13:12
ways but uh mainly we will be using00:13:15
nodejs version better okay so let's move00:13:21
back now after Mongoose we also00:13:25
have do EnV so what EnV does is it00:13:30
configures our EnV and after EnV I have00:13:36
my course so course basically set up the00:13:39
connection between front end and back00:13:41
end okay so you will face lots of course00:13:45
error so in this video we will be also00:13:47
discussing how to deal with our course00:13:49
errors okay then uh I have my00:13:54
multer so let's just uh also move to our00:13:58
uh you know00:13:59
multer00:14:02
package over here00:14:10
documentation so you can see this multer00:14:12
over here so multer is basically used to00:14:15
manage our middle Wares so whenever we00:14:18
will be um making our middle we so this00:14:20
is not very big project but whenever we00:14:23
are creating a very big project in that00:14:24
case we need mulle to you00:14:27
know00:14:29
change the data manipulate the data or00:14:32
to handle the middleware requests so in00:14:35
this case we will be uploading images so00:14:37
that's why I'm using multer over here00:14:39
but um on the big projects you will be00:14:44
uh using molter as a main middleware00:14:47
handling tool okay so for molter you can00:14:51
also refer this particular documentation00:14:53
it gives you you know uh every these are00:14:56
the keys which we use with the molter uh00:14:58
which includes buffer path file name and00:15:00
everything okay00:15:02
and here are you you can see how you can00:15:06
fedge the you know file data using00:15:10
molter inside your back end so that's00:15:12
what we are going to do in this00:15:14
particular uh00:15:16
project so you can see over here uh we00:15:19
are fetching the data from our dis00:15:20
storage as well by using00:15:24
molter here you can see uh con M and00:15:27
Storage storage so this this is00:15:29
basically uh where our data is stored or00:15:32
everything okay so by using this we can00:15:36
basically manage our images and our Pro00:15:38
middle vs more efficiently now after00:15:41
downloading all our packages uh which is00:15:44
required as of now then we will move00:15:46
ahead and download other packages as we00:15:48
will be moving forward with the project00:15:50
okay so right now I'm just um minimizing00:15:53
my terminal over here and we will start00:15:56
by creating our index.js so index.js00:15:59
right now I'm what I'm doing over here00:16:01
is I'm just uh establishing a connection00:16:03
between my uh database and my project00:16:07
okay so let's just check whether our00:16:09
project is running or not so for that uh00:16:12
once go to our package.json and you can00:16:14
see over here uh there are no you know00:16:17
scripts to run this particular project00:16:19
so what we will do over here I'll be00:16:22
just writing npm in it like00:16:26
this and this will create a our you00:16:30
know particular script and everything00:16:32
okay so I'm giving this package name as00:16:35
a back end only version will be one00:16:37
description I don't want to give and00:16:39
entry point will be index.js obviously00:16:41
because we will be running our index.js00:16:44
so um we will be using node moon but00:16:48
I'll show you first how to uh you know00:16:50
manually U edit this particular U script00:16:54
so I'll be just uh writing enter enter00:16:56
enter and uh is this okay and then we00:16:59
will hit enter so you can see over here00:17:02
uh you have so many things which00:17:04
includes your script test and everything00:17:06
okay so if you will move to a00:17:08
package.json package.json here you can00:17:11
see all the dependencies we have just00:17:12
installed so um we don't have to focus00:17:15
on this as of now we have to focus on00:17:19
package de so over here you can see uh00:17:21
inside my scripts I don't have any start00:17:25
script yet so what we will do so first00:17:28
of all I'll install my nodon00:17:31
so why I'm installing nodon is I don't00:17:34
want to restart my server again and00:17:36
again whenever I'm you know uh making00:17:38
any changes so that will be very hectic00:17:40
right so I want to know where I'm making00:17:43
any errors while I'm typing or let's say00:17:46
I want to keep my server running and00:17:48
then I want to uh check whether there00:17:51
are errors or not inside the code which00:17:53
I'm writing right now so that's why I00:17:55
have installed um nodemon over here and00:17:59
uh over here we will create a start00:18:01
script so let's say start like this and00:18:05
inside this we will write node Monon and00:18:08
U the file we want to start so let's say00:18:12
file we want to run basically so that00:18:14
will be our obviously index.js so I'll00:18:16
be clicking on Tab over here you can see00:18:19
now we have the start script now over00:18:22
here what I'll do to check whether our00:18:24
start script is running or not so I'll00:18:26
just write console.log00:18:31
running00:18:34
okay now what we will do we will just uh00:18:38
write00:18:39
npm it's npm Run00:18:45
start so over here you can see your node00:18:48
modon is running just fine uh you can00:18:50
see uh clean and exit because we don't00:18:53
have anything to keep it running okay so00:18:56
once our project is uh executed and then00:18:58
it say it is exist exited now if I'll00:19:01
just uh change anything over here you00:19:03
can see my server is rerunning so that's00:19:06
why we will be using our node mod okay00:19:08
so one more thing you can do over here00:19:10
is you can just directly write00:19:12
node00:19:14
index.js so this will do the same thing00:19:17
for you but it's just that whenever you00:19:19
are changing anything inside your server00:19:22
uh it won't be restarting itself okay so00:19:25
that's why we basically use the node one00:19:26
so right now I'll just clear my terminal00:19:29
like this okay I'll also remove this00:19:31
particular part and let's start by uh00:19:34
you00:19:35
know using all of the dependencies we00:19:38
have just installed starting with the00:19:40
express so let's say const00:19:42
Express is equal to00:19:50
require Express like this so you can see00:19:53
the line coming over here you can see uh00:19:56
file is in a common JS module right so00:20:00
if you want to convert it to es module00:20:02
then you also have to mention that00:20:04
particular thing inside your public.00:20:06
package.json Al as well so if I'll just00:20:09
click on this and if I'll just uh click00:20:11
on this convert to es model you can see00:20:13
this converted into Express import00:20:16
Express and everything okay so to make00:20:18
you know um this working what we have to00:20:21
do is we just have to uh mention that00:20:24
particular thing over here uh inside00:20:27
here we will just write00:20:29
type is equal to you can see the two00:20:32
options common JS and module JS so we00:20:34
will select module whenever we are using00:20:38
like this okay but in this project we00:20:41
won't be using module we will be using00:20:43
commonjs over here so if I'll just00:20:45
control Z Now similarly we will uh you00:20:49
know make our server running by using00:20:52
app app is basically a variable to00:20:54
create a particular server so here uh00:20:57
the V variable name is app in my case00:21:00
you can change anything you want you00:21:02
want to take Capital app you can do that00:21:05
or however you like it okay now00:21:08
similarly we will uh do for mango so00:21:11
let's say00:21:13
mango is equal to tab require uh00:21:18
okay now we will00:21:21
also create a constant variable for a00:21:25
EnV is equal to require00:21:28
EnV same for the00:21:34
course course is equal to require00:21:37
C and uh again for the00:21:45
molter molter is equal to require00:21:49
molter now we will first establish our00:21:52
course connection okay so for that we00:21:55
will write00:21:57
app.use00:22:03
course so if you are someone who creates00:22:06
this you know mon St project now and00:22:08
then then you might have faced a course00:22:10
error so what does the course error says00:22:13
that it basically refuses to send the00:22:16
data to particular origin so for that00:22:19
what we do we basically create our00:22:22
course options so let's say uh const00:22:25
course00:22:26
options and uh over here we basically00:22:31
allow all the origins to access our00:22:34
particular backet00:22:36
so like this and I'll be including all00:22:40
the origins by mentioning the star over00:22:42
here okay Aster over here and U we also00:22:45
wanted to U have the credentials so why00:22:49
I'm passing the credentials over here00:22:52
because uh I don't want anybody to00:22:54
access my uh you know blogs without00:22:57
creating account over there so that's00:22:59
why I'll be you know passing my00:23:02
credentials as well when I'll be00:23:04
accessing my particular data okay so00:23:07
that's why I'm using uh this uh origin00:23:10
uh star and credentials true00:23:15
okay00:23:17
now after that we have to make use of00:23:21
our particular course so let's say00:23:23
app00:23:24
dot00:23:26
views and inside this we will be passing00:23:29
our00:23:30
course and course00:23:34
options like00:23:38
this00:23:40
now we have enabled the access from all00:23:43
the origins to our database now it's00:23:44
time to connect our database so let's00:23:46
say00:23:48
const connect00:23:56
DB and whenever we are dealing with our00:23:59
back end we always make our function as00:24:02
a sync operation because um because of00:24:05
let's say network error or let's say a00:24:08
lots of data we wanted to wait until the00:24:12
whole thing is loaded so that's why we00:24:15
make it as a a sync operation always so00:24:19
remember that then uh inside my dry00:24:22
block I'll be creating a try and cache00:24:24
block because uh while creating uh you00:24:26
know backend from functionalities we00:24:29
always have to handle this particular00:24:31
error so that we know where we are00:24:33
making mistakes00:24:36
so do00:24:38
log always make a practice to write this00:24:41
uh you know try and cach block whenever00:24:43
you are dealing with the backend00:24:44
functionalities so you will see that as00:24:46
well uh whenever we will be creating00:24:48
anything any request from our backend we00:24:51
will be creating this try and cach00:24:53
blocks inside okay00:24:55
so inside Tri block I'll be trying to00:24:58
access my mongod DB okay so let's say00:25:01
do00:25:02
connect and over here we will be passing00:25:06
our uh EnV URL so let's say EnV so00:25:10
whenever you want to access anything00:25:12
from our EnV file we Al always have to00:25:15
mention process. EnV do whatever the00:25:19
name of your particular variable is so00:25:21
in my case my uh URL is saved with00:25:26
the name URL so I'll be writing00:25:29
mongoor00:25:31
URL so make sure this name is same00:25:35
whatever you have returned inside your00:25:37
uhv file okay and over here I'll also00:25:40
have to uh give an message that my00:25:43
console or you can say my um database is00:25:46
connected so let's say database00:25:48
connection established okay like this00:25:52
now let's try to uh run this once again00:25:54
so by you know uh using your up Arrow00:25:57
key inside your console uh you can move00:26:00
upwards with the command you have just00:26:02
written so you can see if I'll just go00:26:04
to uh press my down key then um I'll be00:26:08
coming back to the latest and if I move00:26:10
up Arrow key you can see all the00:26:12
commands which I have wrote so right now00:26:15
I'm using npm Run00:26:17
start00:26:20
okay so you can see over00:26:26
here00:26:30
let's wait for a while this is not00:26:37
uh okay uh we forget to uh make call to00:26:41
our uh this uh connect DB function okay00:26:45
so let's do that as well so for that00:26:48
what we have to do um you know uh right00:26:51
below my uh connect DB I'm writing app.00:26:54
listen because we have also have to make00:26:56
it listen to somewhere right so where00:26:59
this particular server will be running00:27:01
inside our Port 800 8,000 right so for00:27:04
that I'll be writing process.00:27:08
EnV00:27:09
potp because I want it to run on that00:27:12
particular pot and U one Arrow function00:27:16
like this and over here I'll be calling00:27:19
my function connect DB connect DB like00:27:23
this and I'll also give one console.log00:27:30
as00:27:31
a app is00:27:34
running app is listening on Port and00:27:37
particular Port uh EnV okay so now let's00:27:41
try to run00:27:46
this so over here you can see uh this is00:27:50
giving some error to us so uh let's try00:27:53
to figure out why this error is coming00:27:55
okay so over here what we have done00:27:58
wrong we have seted our course we have00:28:01
seted course option we have connected to00:28:04
mongodb uh we took the process. EnV okay00:28:08
okay okay so whenever we are creating00:28:10
our uh EnV right so we also have to00:28:13
configure that so you can see over here00:28:15
we have uh you00:28:17
know uh imported ourv and we have also00:28:21
downloaded that particular dependency so00:28:23
we have to make use of that over here to00:28:26
fet the data from our EnV file so for00:28:29
that we have to write dot uh EnV do00:28:36
config like00:28:38
this and uh this will be a function00:28:41
called okay and uh we also have to write00:28:44
app. use express to establish the00:28:48
connection so let's Express dot let's00:28:51
say Json because we will be passing all00:28:53
the data uh in our Json format so here00:28:56
you can see now now our you know our00:28:59
Port is running on 8,000 our app is00:29:02
running on Port 8,000 and data Bas is00:29:06
connected so here you can see uh we have00:29:09
successfully established our connection00:29:12
now so in this video we have00:29:14
successfully established our connection00:29:15
with database and in next video we will00:29:18
be setting out our routes and models for00:29:20
our particular database so that's it for00:29:23
this video and I'll see you guys in next00:29:25
one just a quick info guys intellipath00:29:28
offers a fulltech developer course which00:29:30
enable you to learn textech from both00:29:33
frontend and backend through this course00:29:36
you will gain hands-on experience with00:29:37
the skills and Technologies such as SQL00:29:41
Java data structure JavaScript HTML CSS00:29:45
nodejs and react under the guidance of00:29:47
industrial professionals with this00:29:49
course we have already helped thousands00:29:51
of professional in successful career00:29:53
transition you can check out the00:29:55
testimonial on our achievers Channel00:29:58
whose link is given in the description00:29:59
below without a doubt this course can00:30:02
set your careers to New Height so visit00:30:04
the course page link given in the00:30:06
description and take the first step00:30:08
towards the career growth with the00:30:10
fullstack developer00:30:23
courseDescription:
🔥Enroll for Advanced Certification in Full Stack Web Development: https://intellipaat.com/full-stack-web-developer-mean-stack-certification-training/ In this video, we will build Login and Registration with MERN (MongoDB, Express, React, Node). We will use react for the front end and node for the back end, as well as the Mongo database. This is a complete Authentication system with MERN. By the end of this tutorial, you will have a complete understanding of how to create a basic React JS project from scratch. 🔵 Following topics are covered in this session: 00:00 - Introduction 00:48 - MongoDB Atlas Setup 01:06 - Sign In To Mongodb Atlas Account 01:48 - MongoDB Compass Download 02:18 - Creating a New Project In MongoDB 03:18 - Creating Database 04:28 - Changing Ip Address To Null Ip 06:17 - Connecting Database To The React Project 07:50 - Creating .Env File 10:08 - Creating Index.Js 11:35 - Installing Mongoose 14:00 - Installing Multer 16:12 - Creating Scripts To Run The Project Inside Package.Json 17:30 - Installing Nodemon 19:33 - Importing All The Dependencies 20:46 - Creating Express Server 21:52 - Establishing Cors Connection 23:41 - Establishing Backend Connection 28:58 - Connecting The App With the Backend 29:26 - Course Page ✅Join us in this exciting tutorial where we'll guide you step-by-step in creating a stunning login form using the MERN stack! With the power of React, we'll embark on an immersive journey to build a fully functional login system from scratch. But that's not all! We'll go the extra mile and implement user authentication and form validation to enhance security and user experience. ✅Throughout this comprehensive tutorial, we'll demystify the React framework, unravel the magic of MongoDB, Express, and Node.js, and showcase the incredible capabilities of the MERN stack. You'll learn how to create an elegant and responsive login form that will impress your website visitors. Plus, we'll dive deep into the world of web development and explore various features, including user registration, password hashing, and error handling. ✅Responsive Login Form in React JS provides a secure and user-friendly way for users to authenticate into the web application. It ensures data validation and error handling in real-time, enhancing the overall user experience. Responsiveness helps in adapting the login form layout for different screen sizes and devices ➡️ About the Course Our Full Stack Developer course will help you gain expertise in the latest front-end and back-end technologies of Application Development. Gain hands-on experience with skills and technologies such as SQL, Java, Data Structures, JavaScript, HTML, CSS, NodeJS, React, etc. under the guidance of industry professionals. Get an executive post-graduation Full Stack Developer certification from iHUB DivyaSampark, IIT Roorkee & Microsoft to advance your career! ➡️Who should take this course? ☑️Anyone with a bachelor’s degree and a passion for full-stack web development ☑️Professionals looking to grow their careers in software development ☑️IT professionals with a bachelor’s degree looking to transition to full-stack development ☑️Project managers/product managers looking to up-skill ☑️Anyone who wants to build a full-stack developer portfolio ✅ Key Features - (Course Features) 👉🏼12 months live online instructor-led sessions 👉🏼100 Hrs Self-paced Videos 👉🏼300 Hrs Project & Exercises 👉🏼Learn from IIT Faculty & Industry Experts What’s Covered in This Program? - ✅Programming Fundamentals ✅Object Oriented Programming ✅Exception Handling and Threading ✅Data Structures and Algorithms ✅Front End Development ✅Back End Development ✅System Design 📌 Do subscribe to Intellipaat channel & come across more relevant Tech content: https://www.youtube.com/user/intellipaaat?sub_confirmation=1 ▶️ Intellipaat Achievers Channel: https://www.youtube.com/@intellipaatachievers 🚀 Intellipaat Advanced Certifications 🌕 Advanced Certification in Cloud Computing: https://intellipaat.com/advanced-certification-cloud-computing/ 🌕 Advanced Certification in Data Science: https://intellipaat.com/advanced-certification-data-science-ai-ihub-iit-roorkee/ 🌕 Advanced Certification in Full Stack Web Development: https://intellipaat.com/web-development-certification/ 📌Website: https://intellipaat.com/ 📌Facebook:https://www.facebook.com/intellipaatonline 📌Telegram: https://t.me/s/Learn_with_Intellipaat 📌Instagram: https://www.instagram.com/intellipaat 📌LinkedIn: https://www.linkedin.com/company/intellipaat-software-solutions/ 📌Twitter: https://twitter.com/Intellipaat 📚For more information, please write back to us at [email protected] or call us at IND: 7847955955 / USA: 1-800-216-8930
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Login Form Using MERN | Login API in Node JS | Blog Application MERN - 3 | Intellipaat"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.