Find The "Nearest Restaurant"

shivam07das
Feb 9, 2024
3 min read

As part of the requirements for successfully completing my CS50: Introduction to Computer Science course from Harvard Online, I had to work on a final project. As I stay close to public subway transport and I also love eating out in restaurants, I decided to build a web-based search application that would allow me or anyone to search for restaurants that is accessible by the subway train stations and not depend on a car to get there.

Description

In this application, the user will search for restaurants that are near the provided train station, and the application will output the closest restaurants in order from nearest to farthest. In order to create this program, I used the same techniques we learnt and applied when working on the homework problem set 9 “Finance”.

Using SQL, I created two tables, one for restaurants, and the other for storing train stations information. Each table not only contained the name and address but also included the Longitude and Latitude of each restaurant and train stations. Using the Haversine formula (that I looked up on Wikipedia) which can be used to calculate distance between a pair of latitude / longitude coordinates, I created a function that calculates the distance between the chosen train station’ latitude and longitude to each of the matching restaurant's coordinates. Then using the built in sort function, I was able to sort the list of computed distances from nearest to farthest.

Finally, to create the html pages of the application website, I utilized Bootstrap and CSS and used Flask and Python code to process the submitted data, query the SQL database, compute the sorted distance and return the response to be viewed on the results page.

Design Details

In the subsequent sections we will go over the various aspects of the application's design.

Data Curation

Searched Google to get list of restaurants including their name and address that are in and around my home. Then used Google Map to lookup the address and capture the latitude and longitudes. Similarly, to get the information on train stations used www.mbta.com and used Google Map to capture the coordinates.

Backend

The backend comprised of the Python Flask application using the SQLite database to store the curated data and process the search queries against the database to get the results.

Flask Routes

Python program "app.py" has the various HTTP routes

@app.route("/", methods=["GET", "POST"])
def hello():
  if request.method == "GET":
    # Renders the index.html file with the search box and drop downlist of station names
  if request.method == "POST":
    # Gets the user input, queries the database, computes the distance and returns the sorted

Haversine Formula

I looked up Google to see how to compute distance between two geographical coordinates (latitude and longitude) and then referenced the following two links to write up the required function in Python

And then implemented the following "distance" function.

def distance(lat1, lon1, lat2, lon2):
    R = 6373.0
    lat1 = radians(lat1)
    lon1 = radians(lon1)
    lat2 = radians(lat2)
    lon2 = radians(lon2)
    dlon = lon2 - lon1
    dlat = lat2 - lat1
    a = sin(dlat / 2)**2 + cos(lat1) * cos(lat2) * sin(dlon / 2)**2
    c = 2 * atan2(sqrt(a), sqrt(1 - a))
    dist = R * c
    return dist

SQL Database

The SQLite database consisted of the following tables that will store the necessary data.

Tables

Following tables were

CREATE TABLE restaurant (
   Id INTEGER,
   Name TEXT,
   Type TEXT,
   Adress TEXT,
   Lat INTEGER,
   Long INTEGER,
   PRIMARY KEY(Id)
);
CREATE TABLE mbta (
   Id INTEGER,
   Name TEXT,
   Station TEXT,
   Adress TEXT,
   Lat INTEGER,
   Long INTEGER,
   PRIMARY KEY(Id)
);

```

Data Creation

Using INSERT statements created the data to populate the two tables. Examples as shown below:


INSERT INTO restaurant (Name, Type, Adress, Lat, Long)
VALUES('Bamboo Thai Restaurant','Thai restaurant','1616 Commonwealth Ave, Brighton, MA 02135','42.343605455967264', '-71.14242257724624');

INSERT INTO mbta (Name, Station, Adress, Lat, Long)
VALUES('brookline hills','brookline hills','115 Tappan St Brookline, MA 02445','42.333050','-71.130880');

Front-End HTML/CSS

I used Bootstrap library and standard CSS to setup the two files - `index.html` and `results.html` under the `/templates` folder. In each of the files, I added the following snippet in the `<head>` section to import the required libraries. I also created a custom `style.css` and placed it under the `/static`

 <link href="/static/style.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>