Use Google Sheets as a database for a frontend widget

Here is an example, parts of this come from a Stackoverflow article, but I can’t find the link to it anymore. If you find the SO article, please kindly let me know so I can reference the original source here.

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />


</head>
<body>
<!--[if lt IE 8]>
You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
<![endif]-->

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<script>
    
function query_spreadsheet(query_string) {
    var api = {
        baseUrl: 'https://docs.google.com/spreadsheets/d/',
        sheet_key: "19YCYRQuuXWaQYVr-lMAeufIPFkp7lH24xwdL_Htbbu8",
        gid: '0',
        headers: '1'
    }
    
    var random_id = Math.random().toString(36).substring(2);
    window.last_search_call = random_id;
    var random_callback_handler = "callback_func_" + random_id;
    let sql_query = "select A,B,C,D,E,F where A matches '" + query_string + ".*' or LOWER(B) contains '" + query_string + "'";
    let request_url = api.baseUrl + api.sheet_key + "/gviz/tq";
    
    jQuery.ajax({
        url: request_url,
        // The name of the callback parameter, as specified by the YQL service
        jsonp: false,
        jsonpCallback: random_callback_handler,
        // Tell jQuery we're expecting JSONP
        dataType: "jsonp",
        data: {
            headers: api.headers,
            gid: api.gid,
            tqx: "responseHandler:" + random_callback_handler,
            tq: sql_query,
        },
        success: function( response ) {
            if (window.last_search_call === random_id) {
                var result = []
                if (response.table.rows.length) {
                    var first_row = response.table.rows[0]
                    result = [
                        {
                            'id': 0,
                            'zip': first_row.c[0].v,
                            'city': first_row.c[1].v,
                            'canton': first_row.c[2].v,
                            'name': first_row.c[3].v,
                            'phone': first_row.c[4].v,
                            'img_url': first_row.c[5].v
                        }
                    ]
                }
                console.log( result ); // server response 
            } else {
                console.log('call cancelled!')
            }
        },
        error: function(XHR, textStatus, errorThrown) {
            console.log("error: " + textStatus);
            console.log("error: " + errorThrown);
        }
    });
}
jQuery(document).ready(function() {
        
    jQuery('body').on('click', '#sales-reps-search-button', function(ev) {
        ev.preventDefault();
        // get query string form input field
        var searchString = jQuery('#sales-reps-search-field').val();
        var trimmedSearchString = searchString.trim();
        query_spreadsheet(trimmedSearchString);
    });
});
    
</script>
    
<form>
    <input type="text" value="8000" class="form-control" id="sales-reps-search-field" placeholder="Search ...">
    <button id="sales-reps-search-button">Search!</button>
</form>

<div class="result">
    
</div>
    
<div class="error">
    
</div>    

    
    
</body>
</html>