How often have you found yourself in a new city, hoping to take that beautiful shot for Instagram or LinkedIn? Wouldn't it be awesome if there was an app that could tell you the best photography spots without the hassle of searching for individual locations yourself? That's what inspired us to create ShotSpot — an easy to use web application that displays the locations of top Instagram posts for any city in the world on a user-friendly map navigation system.
What it does
ShotSpot is the first Instagram-based app that allows you to search for photography hotspots.
You can either begin by entering your desired location using our autocomplete search or by detecting your current location through our pinpoint feature. The app will then display markers that lead you to all of the best photography spots in the area. If you find a great spot and want to share it with the photography community, the app also allows you to add your own spot to the map.
How we built it
For the back-end, we created a Python script that routinely scrapes Instagram locations for top photos. To get the latitude/longitude, thumbnail image, and post ID, we used BeautifulSoup for scraping and outputted the results to .json files, which were uploaded to AWS S3 via boto3.
The front-end is configured using Node.js / Express to serve the web app to the user. When a request is made to a location, Express reads the corresponding .json files from AWS S3 and sends the information using socket.io to the front-end, which is then displayed using the Google Maps API.
Challenges we ran into
First of all, gathering data from Instagram turned out to be a significant challenge, especially since it was our first time web scraping. At first, we had to tediously hard-code the latitude, longitude, and urls for the top posts of every location. That proved to be an unfeasible challenge — and so we modified our Python script to automate this process.
We also didn't have much experience working with the Google Maps API, so the process of learning how to display the markers and trying to make the location search autocomplete took a while. It was also our first time using socket.io, and we learned a lot regarding client/server communication. Deploying the app was also a big pain because of Heroku's ephemeral file system - you can't write to files locally so we had to set up a pipeline to upload the .json files to an AWS S3 bucket.
Accomplishments that we're proud of
Firstly, we are extremely proud of our final product! It is especially fulfilling to have created a functioning application that is not reliant on hard-coded data. We are also proud of how we picked up on many new skills over the course of this project, from web scraping libraries to node.js. Most importantly, we are proud of how well we worked together as a team. It's a weekend we'll remember! <3
What we learned
- How to use Google Maps and Places API
- How to use node.js for back-end development
- How to scrape websites like Instagram for hidden data (and how frustrating it can be to scrap websites like Instagram for hidden data)
- Learning about how to read and write to .json files
- How to use AWS S3 and read/write to it programatically
- Deploying a web app to a domain for users around the world to access
What's next for ShotSpot
WORLDWIDE ROLLOUT! We want the app to work worldwide as it currently only works in a few select locations. Furthermore, we want to incorporate a tool that allows nearby photographers to connect with local content creators. This will further encourage the inclusivity that we highly value.