![Video thumbnail for Node.js Express Github API Example to Display Profile & Repositories Info in Javascript & EJS [LIVE]](https://video-meta.open.video/resized-posters/30SAC8tJQt2/res640.webp?cb=2)
Up next in 10
Node.js Express Github API Example to Display Profile & Repositories Info in Javascript & EJS [LIVE]
Mar 12, 2025
Buy the full source code of application here:
https://buy.stripe.com/9AQ8zQe7DgNidDW19B
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Welcome Folks My name is Gautam and Welcome to Coding Shiksha a Place for All Programmers. You can learn Web Development and Programming Tutorials.
Donate to Our Youtube Channel at :
https://www.instamojo.com/@geekygautam1997
Subscribe for more Videos: https://www.youtube.com/channel/UCR6d0EiC3G4WA8-Rqji6a8g?sub_confirmation=1
Show More Show Less View Video Transcript
0:10
uh hello friends today in this live stream we will be displaying the github profile data inside the browser using
0:18
node.js and express so this is a module that we will use in order to display the github profile
0:26
and we will use the username of github and the
0:32
username we will take as input and then after that we will make use of this module so this
0:38
will result return all the information that we want you will see the login name which is the
0:44
github id the avatar url of all this stuff so basically we will be displaying this
0:50
github profile inside the browser so if you see this is a github profile
0:56
avatar url we will display it then we have this url of the person
1:01
followers following and all this information followers how many followers following created at
1:09
public repository guest biography so if you just go to github.com and if
1:15
you check the profile info here so for every github account there is a profile out there
1:21
so this is the section we will display it this is a picture profile picture this is name
1:27
this is username this is the biography and this is followers following and this is email address
1:36
and the website and the location so all these things we will display it inside the browser and number of
1:42
repositories also we will display these repositories in the browser so let's get started so
1:49
for this you need to make a node.js project so i will
1:54
close all the nodejs project and start from scratch
2:00
so i will go inside man if you are watching it for the very first time then please hit the like button
2:05
and here inside the projects directory i will make a new directory which is github
2:12
api i will cd into this and i will open this inside visual
2:18
studio code text editor so right here we need to
2:23
initialize npm init dash y so you can see it has created
2:28
package.json file and it has got the basic information about the project
2:35
and now we need to install this module which we are saying which is
2:40
github dash profile this is a module so this will hardly take five seconds to
2:47
install so it will install this module inside dependency section you will see github
2:52
profile is installed so if you are watching it for the very first time then please hit the like
2:57
button and now we will make our index.js file and we will require this module which is
3:06
a github profile and then this contains a method inside
3:12
if you see the documentation you will find out it contains this method github profile
3:18
so here you will provide the username or you can provide the
3:25
email as well so i will provide the email address
3:32
let me provide the username first
3:37
and after that if you see the documentation it will return you a promise
3:44
dot then and it will have the profile object so here you can console log it just to
3:51
check if it is working so if i run here node index.js
3:58
so it is saying email required so we need to provide the email so for this we
4:03
need to so i think i have this email which is
4:10
attached to my account
4:18
so if you provide this so now all this information will be
4:24
returned to you you can see this is if you provide the email address this will return you a json response and it
4:31
will return you all this information that you want here so
4:37
this is the name company blog location this is biography
4:44
so all this information we can display it inside a table like structure inside browser so that it
4:51
this application will be dynamic
4:59
so let me start building this application
5:12
so if you just uh let me for this we need to install
5:19
express so npm i express and ejs ejs is a template
5:25
engine so just install this it will hardly take five seconds
5:31
so now it has installed it so we can simply say node.index.js so this will restart the application
5:38
every time when we make any sort of changes so right here we will import express
5:48
so we will make a new express app and we will listen on port number
5:54
5000
6:00
so we will just say app is listening on port 5000
6:09
so when we load the home page
6:15
so we need to render a template which is index
6:21
so right here we need to set the view engine which is ejs
6:28
so right here inside the views folder we need to create this template which is index dot ejs
6:37
so here we will have a simple template so you will say github profile
6:47
in node.js and express so right here
6:54
we will make use of bootstrap so just write a bootstrap ctn and
7:04
so here you need to just include bootstrap and jquery cdn
7:11
right here after a title so now we have successfully included this so
7:18
right here inside the body we will have h1 heading
7:30
so github profile info and after that we will have a simple form
7:36
the action will go to get info and the method will be simply
7:42
post so inside this we will have a simple
7:48
form group class and here we will say input type text so name will be equal to the
7:56
email and this type variable will be email because here we will provide the email
8:03
and here we will provide the enter github email
8:16
so after that we will have a simple button
8:21
to submit the form
8:28
so we will say get information
8:33
so if you now refresh the application if you go to localhost
8:42
so we need to attach a class bootstrap class here which is
8:48
form control so if you do this you will see this is
8:53
will be your if you refresh it so this is your github profile info if you enter the email address so this will
9:00
display the information in a table so right here we need to make this
9:06
post get request sorry post request which is app.post
9:13
slash get info
9:20
so for this we need to import
9:27
github profile dependency which we have installed it
9:33
so right here we will need to include the body parser middleware
9:50
so here we will use this middleware simply by writing these two lines
10:01
bodyparser.json so now we can successfully get
10:08
what the user have written here so we will pass it
10:13
request dot body dot email and this returns a promise
10:20
so we can display the profile here
10:28
so now if i enter the email here click get information so you will see
10:35
this will return an object holding all this information so this is the entire object so we just
10:42
need to return this object we will say response.render and we will
10:48
render this template once again and we here we will pass the profile object
10:54
so when you pass it for the very first time this object will be empty
11:01
so right here inside this template after this form here
11:09
we will have a div and inside this we will just check here
11:14
for the very first time if profile exists
11:28
surround this with these brackets and now basically we can use the table
11:36
table striped tag
11:42
so inside this we can have table head
11:48
inside this we can have certain table headings here so here you can display any information
11:54
that you want here let's suppose you want to first of all have
12:02
the name of the person so name then we will have username
12:10
then we will have followers
12:17
then we will have image url so these four information first of all
12:23
let me print out then we will have table body tag
12:30
so one comment is there hello
12:36
so after this we need to print out
12:45
so inside this we need to print out the name here so for printing out the name you will simply say profile dot
12:52
so you can check this object which is returning here so if you just check here
12:58
this will have the property which is name here
13:11
and then we have the username which is there inside
13:17
profile dot company
13:26
then we have the number of followers so this can be done using
13:31
profile dot followers
13:36
so three people are watching the stream so first of all like the stream and also subscribe the channel
13:42
and for the image url you will see this is the image url which is there if i check
13:48
here let me see here image url you will see
13:54
that avatar url is there so what we can do is that inside this td
14:00
tag you can have a image tag so image source can be equal to
14:08
profile dot avatar url
14:16
so here we can give this image a class of
14:21
image thumbnail and image responsive
14:31
so that's it let me check if it is working or not
14:36
so if i reload the application and enter the email address
14:42
so now you can see all this information will be printed out this is the name here this is username this is followers and
14:48
this is the image url you can see here it is quite long so you can resize it
14:54
accordingly just provide a width and height property let me put 100 and high
15:00
to also 100
15:06
so if you are watching it for the very first time then please hit the like button and subscribe to channel as well
15:12
so now if i refresh it once again
15:19
so now you can see it is styling it properly here it is showing all this information
15:25
so we can also show the biography as well so here we can after the followers we can
15:32
say biography and right here after the followers we can
15:37
display the biography as well which will be profile dot
15:43
biography so if you refresh it
15:52
so it is saying it is missing the tag oh sorry we need to close this
16:02
so i think biography is yeah it is bio not biography so let me
16:09
replace it
16:18
so now you will see that it will also
16:28
let me see if any sort of error has taken place
16:50
so eight people are watching the stream guys so here we are building a github profile
16:55
display application so where we are fetching the github profile of the particular user
17:01
so if i show you this is the application let me refresh it one
17:06
more time so if i enter the email address so you will see it will fetch all this
17:12
information which is name of the github user profile which is username
17:18
this is the number of followers which is 104
17:24
so one question is there how to show daily trading respiratory using github api
17:31
i didn't understand your question which uh trading you are talking about
17:37
this is the actual profile details so if you want to display profile details this is a
17:43
biography that you see inside this you can see this is the biography that we are displaying here i am gautam sharma
17:49
you can see that it is displaying this this is the image url that you see here this is the image url so you can also
17:55
download this image simply save this image right here save this inside your computer so now you can save this here
18:05
and also what you can do is that you can also display the repositories which are
18:10
there on the right hand side you can see 113 repositories so all such information is there
18:17
so nine people are watching the stream so first of all hit the like button subscribe the channel as well and if you have any sort of question you
18:24
can ask in the comment section so you can see it also has this location tab as well so here you can put the
18:30
location so let me put the location as well so this will be th
18:36
so we will say th location and location will be simply
18:44
after this i think let me put it right here after the biography
18:50
so so biography will be after that we will say location
18:58
so location is kind of a country where you are living in so after this we will display it td
19:06
and here we will say profile dot location
19:14
so if you see here now if i refresh it
19:26
let me refresh it so i think yeah
19:33
location needs to be india so i think we location
19:40
is coming here oh i think let me put this location here and
19:46
biography here
19:52
so now if you refresh it you will see in the correct order that all this information
20:00
you can see that location india so you can take any email for example i can rename this to
20:09
let me take this email i'm just taking the random email address
20:16
i think this email address doesn't exist so you just need to enter the email address for which you want to
20:29
so again execute this application so you just need to know the
20:34
email address for which you are searching so
20:40
what we can do is start let me just say
20:46
node we can start the application as nodemon index.js
20:52
so for this you need to be knowing the email address so for this let me pass
20:58
rahul kumar gmail.com just to show you
21:09
get github email from
21:15
username let me write this so
21:35
so basically if you want to go to any profile here let's suppose you want to go to any profile
21:43
if you search for any repository in the github let's suppose i search for
21:48
age calculator
21:55
and various creators come here you can see that this is one creator so if i go to its profile here you will
22:02
see that so it has its own information here you will see that this is
22:10
the uh email address here so i need to simply copy this email address
22:19
so if i paste it here let me refresh it
22:32
so if i paste that email so you will see all this information will be fetched for this particular
22:39
username which is this image url number of followers the name of the person
22:47
so i let me have get
22:52
github email let me search for it package which allows you to get
22:59
the github email let i think we have found this email you can see this is the one
23:07
so here you just need to
23:15
npm user this is only valid for npm so github email this is the actual package
23:21
which which i need to find out the email address or if person
23:29
so let me install it globally to check if
23:35
it is working or not
23:41
trending see what the github community is most excited about today like this
23:48
if you are seeing the trending section i will make another video on that how to scrape the trending section of to
23:54
display all the repositories which are there inside trending section
23:59
so in this video we are only concentrating on the profile of the user so let me install this
24:06
globally which is github dash email so after that you can just find out the
24:11
email address for a particular username so we can simply say github email
24:20
i've got t123456
24:30
so it is saying bash is not
24:55
so let me see guys if i search for another package which comes
25:01
here
25:12
i think this is the package which is there so definitely we can install this package and try it
25:28
okay
25:44
you can get this github email like this so we need to require this
25:52
so now like this we can do this github email
26:07
github email we have got this so now we can use this information right here so
26:19
so if i open this
26:44
so if you print out this information you will see let me try out
26:49
how to create instagram viewer too using instagram api please make video on it
26:54
definitely i will try to make video in the last video i have shown you how to scrape information through instagram in
27:01
python so definitely check out that video and now if i reload the application here
27:28
oh sorry we don't need to write this github let me use it github mail
27:35
sorry github mail and also make this as a weight keyword
27:42
sorry async function
27:49
so now let me go to the home page
28:00
it is saying github mail is not sorry this needs to be github email
28:09
so again refresh it so now you can see that guys it ha it is
28:15
returning the email address which you definitely want here so here you can provide the username
28:24
so you can see it is providing a set of email addresses which are there so we only need the first email address
28:31
so we will store it like this
28:41
so i think we only need the first part here so
28:48
recent activity so if i now
28:53
refresh it
29:06
so you can see we only need the first email address so we can store it inside
29:16
zeroth index v you can see that we are storing it right now so if i reload the application you will see
29:22
that the email address is returned to us
29:29
so now we simply need to use this module
29:35
so right here we will provide the username as the
29:41
argument and then after this
29:47
we will put the email address so right here
29:55
instead of passing static username we will pass it dynamically request.body.username
30:01
so i will make it input type text here so i will put the name attribute as
30:09
username after that we can get the email address
30:16
so email address
30:22
uh after this we need to delete this right here
30:30
so after getting this recent activity this is our email address so now we can call
30:38
github and here we can pass this recent activity
30:43
0 which is the email address so this will return the profile to us
30:51
so here we can just console log just put this two lines inside this
31:00
so just i will format the document so now let me see if it is working right
31:06
now if i refresh this application
31:14
so it is saying await is only valid and so let me just make it as async function
31:20
let me remove this async from here so let me now refresh this application
31:27
so if i provide a username which is
31:32
this username click get information
31:38
so now you can see it is displaying the information here by the username so we
31:44
can just rename this to the username so we don't need the email address we
31:50
want only the username of the person and then just here in the placeholder we can
31:56
change enter github username
32:08
so we can username is interesting so you can just just write a random username and this
32:14
username will exist
32:22
so it is saying undefined username doesn't exist so make sure that whatever username that
32:28
you are writing does exist i think one such username i know is
32:33
traversing media it does exist
32:58
so let me just go to github.com and search for a username so four people are
33:03
watching the stream if you are watching it for the very first time then please hit the like button subscribe the
33:09
channel as well so you can just take any profile of the github and simply copy this username
33:22
and paste it inside this tool here which is
33:40
so you can see that all this information is returned here
33:49
so you can see that
33:59
so some users will have their information hidden as well so in that scenario you cannot print out the whole
34:05
information you can see that just copy its username
34:10
and paste it inside this
34:28
so also we can display the email address as well so we are getting this email address right here if you see this from
34:34
this module which we have installed so right here we can in the second parameter we can also
34:43
just send the email address as well so
34:50
so email is there inside this which is called as recent activity
34:55
zero so we can also display email address here a field for email address right here
35:01
after the username which will be called as email
35:08
address so in the third parameter we can print out the email address of the user
35:17
so all this source code will be there inside video description so make sure that you go to the video
35:24
description link to download all the source code
35:30
so if i refresh the application
35:45
so this is the email address you can see that followers location image url all this information is
35:52
returned to us in a nicely table like structure and you can also display the
35:58
repositories number of repositories which you have so there is a git section here which is
36:04
this subscription all this information at repos url you can also display it
36:15
so this is the all information that you can display guys so if you have any sort of doubt you can
36:20
ask in the comment section
36:27
so if you want so just please hit the like button subscribe the channel for more streams
36:33
like this and i will be seeing you in the next
#Programming
#Scripting Languages