Welcome folks today in this blog post we will be building a instagram user profile information finder web application in node.js and express using javascript. All the source code of the application will be shown below.
Get Started
In order to get started you need to install this you need to initialize the node.js project by invoking this command
npm init -y
then install these dependencies
npm i express
npm i ejs
npm i nodemon
npm i user-instagram
After installing all these dependencies now create a index.js file inside the root directory of the application and initialize a express application which listens on port 5000
index.js
const express = require('express')
const bodyparser = require('body-parser')
const userinstagram = require('user-instagram')
const app = express()
app.use(bodyparser.json())
app.use(bodyparser.urlencoded({extended:false}))
app.set('view engine','ejs')
const PORT = 5000
app.get('/',(req,res) => {
res.render('index',{title:'Youtube Channel Info App'})
})
app.post('/getinstagraminfo',(req,res) => {
var link = "https://www.instagram.com/" + req.body.username
console.log(link)
userinstagram(link)
.then(data => {
console.log(`Full name is: ${data.fullName}`)
res.json({
stats:data
})
})
.catch(e => {
res.json({
stats:"error"
})
})
})
app.listen(PORT,() => {
console.log(`App is listening on ${PORT}`)
})
Now we want to make the views folder inside the root directory of the project and make a index.ejs file and copy paste the following code
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container">
<h1 class="text-center">Instagram User Information App</h1>
<br><br>
<form id="form">
<div class="form-group">
<label for="instagramusername">Instagram Username:</label>
<input type="text" name="" class="form-control" id="username" required placeholder="Enter Instagram Username">
</div>
<div class="form-group">
<button id="button" class="btn btn-danger btn-block">
Get User Instagram Data
</button>
</div>
</form>
<div id="result"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var result
$("#form").submit(function(e){
e.preventDefault()
var name = $("#username").val()
$("#button").text("Please wait fetching channel info")
$("#button").prop("disabled","true")
$("#result").empty()
name = name.trim()
console.log(name)
$.ajax({
method:"POST",
url:"/getinstagraminfo",
data:{username:name},
success:function(data){
console.log(data.stats)
$("#button").text("Get Channel Info")
$("#button").removeAttr("disabled")
$("#username").val("")
result = `
<table class="table table-striped">
<thead>
<tr>
<th>Full Name</th>
<th>User Profile Picture</th>
<th>Profile Link</th>
<th>No of Followers</th>
<th>Following Users</th>
<th>Private Account Status</th>
<th>Verified Account Status</th>
<th>Username</th>
<th>No of Posts</th>
</tr>
</thead>
<tbody>
<tr>
<td>${data.stats.fullName}</td>
<td><img class="img-rounded" src="${data.stats.profilePicHD}"/></td>
<td><a target="_blank" class="btn btn-danger" href="${data.stats.link}">Go to Channel</a></td>
<td>${data.stats.subscribersCount}</td>
<td>${data.stats.subscribtions}</td>
<td>${data.stats.isPrivate}</td>
<td>${data.stats.isVerified}</td>
<td>${data.stats.username}</td>
<td>${data.stats.postsCount}</td>
</tr>
</tbody>
</table>
`
$("#result").append(result)
}
})
})
</script>
</html>
Screenshot
When you launch the node.js app by executing the command node index.js you will see the following result which is shown below
