Discover San Francisco
Discover San Francisco is a full stack web application that allows users to learn more about the city. Users can learn about the various neighborhoods and discover “things to do.” The Yelp API is used to display the top 5 most popular restaurants in each neighborhood and the Google Maps API is used to mark the location of each tourist attraction. Users can even contribute their thoughts by creating an account to comment and rate.
Table of Contents
Overview
Once a user lands on the homepage, he or she can click the "Let's Explore" button to view the list of neighborhoods in San Francisco. The neighborhoods and their data is stored in a PostgreSQL database. A map image marking the specific location of a popular tourist attraction is shown when the user lands on the "specific place" page. The map with the marker is populated using the Google Maps API. This API is called with an AJAX request inserting the location's latitude and longitude. Users can also view the top 5 most popular restaurants for each neighborhood. This list is populated when a request is made to the Yelp API to get a JSON response with the specific parameters. Logged in users can contribute their thoughts by leaving a comment. Their comments are stored in a PostgreSQL database and displayed on the webpage when the user clicks "submit." The submit button has an event listener so that an AJAX request can be made to get the JSONIFY-ed data.
Tech Stack
Frontend: Javascript, AJAX, JSON, jQuery, Jinja, HTML, CSS, Bootstrap
Backend: Python, Flask, SQLAlchemy, PostgreSQL
APIs: Google, Yelp
Setup/Installation
Get Client ID and Key from Yelp and save them to a file secrets.sh:
export yelp_client_id="YOUR_CLIENT_ID"
export yelp_api_key="YOUR_KEY"
Get Key from Google Maps and save them to the same file secrets.sh:
export google_api_key="YOUR_KEY"
On local machine, go to directory where you want to work and clone Discover San Francisco repository:
$ git clone https://github.com/jessicahojh/San_Francisco_Webpage_Project.git
Create a virtual environment in the directory:
$ virtualenv env
Activate virtual environment:
$ source env/bin/activate
Install dependencies:
$ pip install -r requirements.txt
Create database:
$ createdb sanfrancisco
Seed data into the database tables:
$ python3 seed.py
Activate secrets.sh:
$ source secrets.sh
Run the app:
$ python3 server.py
Open localhost:5000 on browser.
Demo
Homepage:
List of Neighborhoods:
View a specific neighborhood:
View a specific neighborhood's list of "things-to-do/see":
Specific place ("things-to-see") in a specific neighborhood:
Top 5 Most Popular Restaurants for a specific neighborhood:
Future Features
- Using various APIs such as Zillow, weather, and Eventbright to provide housing, weather, and event info
- Marketplace for users to buy/sell or exchange services
- Page for residents of specific neighborhoods to communicate with each other