Building a Node.js Application to Search and Display GitHub Profiles Using GitHub API

#node #javascript #beginners #programming

Are you looking to build your first Node.js application with GitHub API? In this tutorial, I will show you how to build a very simple application that allows you to search for GitHub users and display their profile information using the GitHub API.

To get started, you will need to have Node.js installed on your computer or laptop. If you don't have them installed, you can download them from the Node.js website or following the installation step on Digital Ocean.

First, let's create a new Node.js project by running the following commands in your terminal or git bash CLI:

>> mkdir node-github-search
>> cd node-github-search
>> npm init

Next, let's install the required packages:

npm install express ejs axios

Don't get frightned, this is what each packages is resposible for

express is a Node.js web application framework that allows you to create web applications easily.
ejs is a templating engine that allows you to generate HTML dynamically based on data.
axios is a library that allows you to make HTTP requests to APIs.

Now that we have our project set up and the necessary packages installed, let's create our app.js file:

const express = require('express')
const axios = require('axios')
const app = express()

app.set('view engine', 'ejs')
app.use(express.urlencoded({ extended: false }))
app.use(express.static('public'))

app.get('/', (req, res) => {
  res.render('index')
});

app.post('/users', (req, res) => {
  const username = req.body.username
  axios.get(`https://api.github.com/users/${username}`)
    .then(response => {
      const user = response.data
      res.render('users', { user })
    })
    .catch(error => {
      console.log(error)
      res.render('error')
    })
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

In this code, we first import the required packages and create an instance of our express application. We then set the view engine to ejs, which allows us to use ejs to render our HTML.

Next, we set up two routes: one for the homepage (/) and one for the user search (/users). In the homepage route, we simply render an index.ejs file that contains a form for searching for users. In the user search route, we get the username from the form data, use the axios library to make a GET request to the GitHub API, and then render a users.ejs file that displays the user's profile information.

Now let's create our views folder and create an index.ejs file inside of the views:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Github User Search</title>
  </head>
  <body>
    <h1>Github User Search</h1>
    <form action="/users" method="POST">
      <label for="username">Enter a Github username:</label>
      <input type="text" id="username" name="username">
      <button type="submit">Search</button>
    </form>
  </body>
</html>

In this code, we simply create a form that allows users to enter a GitHub username and search for it.

Finally, let's create our users.ejs file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= user.name %> - Github User Profile</title>
 </head>
  <body>
    <h1><%= user.name %></h1>
    <img src="<%= user.avatar_url %>" alt="Profile Picture">
    <ul>
      <li><strong>Username:</strong> <%= user.login %></li>
      <li><strong>Bio:</strong> <%= user.bio %></li>
      <li><strong>Followers:</strong> <%= user.followers %></li>
      <li><strong>Following:</strong> <%= user.following %></li>
    </ul>
  </body>
</html>

In this code, we use ejs templating to dynamically generate HTML based on the user object we passed in. We display the user's name, profile picture, username, bio, followers, and following count.

Now that we have all of our files set up, we can start our server by running node app.js in the terminal. Then, open your web browser and navigate to http://localhost:3000. You should see the homepage with a search form. Try entering a GitHub username and clicking the search button. You will be taken to a page that displays the user's profile information.

Congratulations! You've just built your first Node.js application that uses the GitHub API to search for users and display their profile information. With the knowledge you've gained from this tutorial, you can now start exploring and building more complex Node.js applications.

Keep grinding, connect with me on Twitter.