Search⌘ K
Home
Courses
Building Scalable Apps: Redis Implementation with Node.js

Build the Web Layout to Finish the App

Explore how to build a minimalistic web layout for a GitHub search app using Node.js, Express.js, and Redis. Learn to integrate multiple GitHub APIs and design a responsive UI with HTML, CSS, and JavaScript that handles user input and displays dynamic results on a single page.

We'll cover the following...

This is the last step in finishing our GitHub search project. We’ll implement a minimalistic UI where the user can provide the search term and click on different buttons to search for GitHub repositories, GitHub issues, and GitHub users. We’ll briefly discuss the HTML and CSS code as well.

Merge all the three APIs

Let’s first create an Express.js app by combining all three APIs, i.e., to fetch the number of GitHub repositories, GitHub issues, and GitHub users based on the search term provided. We’ll make the following changes:

  • Add all three URLs in the Constants.js file.

  • Keep the SearchRepos.js, SearchIssues.js, and SearchUsers.js files under the controller folder.

Let’s move to the code.

// Import the required modules
const axios = require('axios')
const Constants = require("../common/Constants");
const { processHrTimeToSeconds } = require("../common/Utils");
const RedisHandler = require('../common/RedisHandler');

// Function to search GitHub issues based on the search term
const SearchIssues = async (searchQuery) => {

    // Get the Redis client instance
    const redisClient = RedisHandler.getRedisClient()

    // Fetch the time in high-resolution
    const startTime = process.hrtime();

    // Fetch the key from Redis and check if the required data is already present
    const data = await redisClient.get(searchQuery + "_issues");
    if (data)
        return {
            total_count: data,
            seconds: processHrTimeToSeconds(process.hrtime(startTime)),
            source: "Redis"
        }

    // The required data is not present in Redis and hence need to make the API call
    else {
        // Call the GitHub search API
        const response = await axios.get(Constants.GITHUB_SEARCH_ISSUES_URL + searchQuery);

        // Set the total number of repositories in Redis
        await redisClient.set(searchQuery + "_issues", response.data.total_count, {'EX': 30})

        // Return the response
        return {
            total_count: response.data.total_count,
            seconds: processHrTimeToSeconds(process.hrtime(startTime)),
            source: "GitHub API"
        }
    }
}

// Export the function to be used by external files or modules
module.exports = {
    SearchIssues
}
Final app to search GitHub repositories

Code explanation:

Note: When we click the “Run” button, we can observe an HTML page consisting of three links to hit the GitHub search, GitHub issues, and GitHub users APIs, respectively. We can play around with the APIs by changing the search query in the URL.

As discussed, we’ve added all the URLs in a single Constants.js file and kept our business logic under the controller folder. Let’s discuss the index.js file, our server code:

  • Lines 2–6: We import all the required modules and functions.

  • Lines 12–24: We handle the default / route where we return an HTML response. The response contains a list of links that ...