Programming

Where Should I Go Eat – My Other Python Web App

where should i go eat

Today I want to discuss my other Python web app: Where Should I Go Eat?.

Where Did The Idea For “Where Should I Go Eat?” Come From?

When I was working at Twitter we would get a catered lunch every day except Friday. Since I worked in a remote office that didn’t have an onsite kitchen or cooking staff we got a catered lunch. However, Fridays was left open for us to go out to eat as a team or order in food. While this was awesome, we as the team couldn’t decide where to eat.

Some members always wanted to go to a specific Thai restaurant while others wanted fast food because chicken tendies and fries are tasty (and they are). And there was me who was happy to eat from Chipotle because Chipotle is awesome! Usually what happened is that some coworkers went out to eat while others ordered in food.

When this was going on I was learning Python. One Friday, as I listened to my coworkers fight about where to eat lunch, I got the idea to create a program that would randomly tell us where to order food from. I went home and started on creating that program.

How Does “Where Should I Go Eat?” Work?

The web app works by randomly choosing from a file of restaurants separated by a newline. It uses Flask as its backend framework. Here’s the code:

"""
Title: Where Should I Go Eat?
Creator: Brittany Gates (https://github.com/bcgates82/ | https://brittanygates.me | https://brittbot.com)
About: If you're hungry and unsure of where to go, this app randomly tells you where to go eat with a click of a button.
"""

from flask import Flask, render_template
import random

app = Flask(__name__)


@app.route('/')
def home():
    """
    :return: The function returns the default home.html website, without any restaurants chosen. It is also used to
    clear the website of any choices if the title or the Start Over button is clicked.
    """
    return render_template('index.html')

@app.route('/', methods=['GET', 'POST'])
def random_restaurant():
    """
    This function opens and read the restaurant.txt file which is located in the Static (/static/) directory.
    Then a loop runs over the entire file, reading each line. The loop collects all the lines as a list, and then pulls
    out a restaurant randomly using the random.choice function.
    :return: The function returns a random restaurant to the index.html template, which displays it
    on the website.
    """
    with open('static/files/restaurant.txt', 'r') as restaurant:
        restaurant_list = restaurant.readlines()
    return render_template('index.html', restaurant=random.choice(restaurant_list))

I built the website myself using Bootstrap as the frontend framework:

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Where Should I Go Eat?</title>
  <meta name="description" content="A website randomly choosing where you should go eat if you're undecided.">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="180x180" href="https://www.whereshouldigoeat.com/static/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://www.whereshouldigoeat.com/static/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://www.whereshouldigoeat.com/static/favicon/favicon-16x16.png">
  <link rel="manifest" href="https://www.whereshouldigoeat.com/static/favicon/site.webmanifest">
  <link rel="mask-icon" href="https://www.whereshouldigoeat.com/static/favicon/safari-pinned-tab.svg" color="#000000">
  <link rel="shortcut icon" href="https://www.whereshouldigoeat.com/static/favicon/favicon.ico">
  <meta name="msapplication-TileColor" content="#603cba">
  <meta name="msapplication-config" content="https://www.whereshouldigoeat.com/static/favicon/browserconfig.xml">
  <meta name="theme-color" content="#000000">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="../static/css/normalize.css">
  <link rel="stylesheet" href="../static/css/index.css">
  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/7cebd9718b.js" crossorigin="anonymous"></script>
</head>

<body>
  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <div class="title">
    <h1>Where Should I Go Eat?</h1>
    <h2>Undecided where you should go eat? With a press of a button this website will tell you!</h2>
  </div>

  <div class="container">
    <div class="row">
      <div class="col left">
        <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="../static/img/potstickers.jpg" class="d-block w-100" alt="Potstickers">
            </div>
            <div class="carousel-item">
              <img src="../static/img/pasta3.jpg" class="d-block w-100" alt="Pasta">
            </div>
            <div class="carousel-item">
              <img src="../static/img/doughnuts1.jpg" class="d-block w-100" alt="Doughnuts">
            </div>
            <div class="carousel-item">
              <img src="../static/img/pizza2.jpg" class="d-block w-100" alt="Pizza">
            </div>
            <div class="carousel-item">
              <img src="../static/img/fried_chicken.jpg" class="d-block w-100" alt="Fried Chicken">
            </div>
            <div class="carousel-item">
              <img src="../static/img/avocado_toast.jpg" class="d-block w-100" alt="Avocado Toast">
            </div>
            <div class="carousel-item">
              <img src="../static/img/pasta2.jpg" class="d-block w-100" alt="Pasta">
            </div>
            <div class="carousel-item">
              <img src="../static/img/burger1.jpg" class="d-block w-100" alt="Burger">
            </div>
            <div class="carousel-item">
              <img src="../static/img/doughnuts2.jpg" class="d-block w-100" alt="Doughnuts">
            </div>
            <div class="carousel-item">
              <img src="../static/img/pizza1.jpg" class="d-block w-100" alt="Pizza">
            </div>
            <div class="carousel-item">
              <img src="../static/img/burger_and_fries1.jpg" class="d-block w-100" alt="Burger and Fries">
            </div>
            <div class="carousel-item">
              <img src="../static/img/fish_and_chips.jpg" class="d-block w-100" alt="Fish and Chips">
            </div>
            <div class="carousel-item">
              <img src="../static/img/burger_and_fries2.jpg" class="d-block w-100" alt="Burger and Fries">
            </div>
            <div class="carousel-item">
              <img src="../static/img/tacos1.jpg" class="d-block w-100" alt="Tacos">
            </div>
            <div class="carousel-item">
              <img src="../static/img/pasta1.jpg" class="d-block w-100" alt="Pasta">
            </div>
            <div class="carousel-item">
              <img src="../static/img/ramen1.jpg" class="d-block w-100" alt="Ramen">
            </div>
            <div class="carousel-item">
              <img src="../static/img/sandwich_and_fries.jpg" class="d-block w-100" alt="Sandwich and Fries">
            </div>
            <div class="carousel-item">
              <img src="../static/img/ramen2.jpg" class="d-block w-100" alt="Ramen">
            </div>
            <div class="carousel-item">
              <img src="../static/img/tacos2.jpg" class="d-block w-100" alt="Tacos">
            </div>
          </div>
        </div>
      </div>
      <div class="col right">
        <form action="/" method="POST">
          <button class="button" name="restaurant" type="submit" onclick="random_restaurant">Tell Me Where To Eat!</button>
        </form>
        <button class="button" name="google maps" type="submit" onclick=window.open("https://www.google.com/maps/search/?api=1&query=restaurants");>I Want A Non-Chain Restaurant<br /><span style="font-size: 0.5em">Search Via Google Maps</span></button>
        <button class="button" name="start-over" type="submit" onclick="location.href=location.href">Reset</button>
        <h4>You Should Go Eat At {{ restaurant }}</h4>
      </div>
    </div>
  </div>

  <div class="col social-media">
    <p>Created by Brittany Gates</p>
    <a href="https://www.brittanygates.me" title="My Blog" target="_blank">My Blog</a> -
    <a href="https://brittbot.com/" title="All About Website Creation" target="_blank">Brittbot</a> -
    <a href="https://www.linkedin.com/in/brittanygates/" title="My LinkedIn Profile" target="_blank"><i class="fab fa-linkedin-in"></i></a> -
    <a href="https://twitter.com/bgates_writer" title="My Personal Twitter Profile" target="_blank"><i class="fab fa-twitter"></i></a> -
    <a href="https://twitter.com/brittbot_bgates" title="Brittbot Twitter Profile" target="_blank"><i class="fab fa-twitter"></i></a>
  </div>

  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

I even provide the option for the person to get a non-chain restaurant by searching Google Maps for a local eatery / mom & pop place using a simple query.

What’s In Store For The Future Of This Web App?

Per Google Analytics the site get a bunch of traffic per day so I want to upgrade it so a person can click on their random choice and go to a food delivery app like DoorDash or UberEats. That is a feature some people asked for but I haven’t implemented yet. I need to see if it is possible through an API.


Thanks for reading this post and visiting Brittbot. Keep coming back to read my thoughts about WordPress, building your brand, website services, and programming topics.

0 0 votes
Article Rating
Share My Post!
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments