Node.js Express Instagram User Profile Information Finder App in Javascript Full Project For Beginners

Node.js Express Instagram User Profile Information Finder App in Javascript Full Project For Beginners

 

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

READ  How to Change Form Input Field Placeholder Color in Browser Using HTML5 & CSS3 Full Tutorial For Beginners

 

 

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

 

 

READ  Generate Custom Social Share Buttons With jQuery C Share Plugin

When you launch the node.js app by executing the command node index.js you will see the following result which is shown below

 

 

 

 

 

Leave a Reply