Mapping Brewpubs From Multiple Sources
App Project -Udacity FEND Nanodegree
Brief
Create a single page app using the Google Maps API and content from another API data source. The brewpub finder was my final project for Udacity's Front End Web Development Nanodegree Program. It mashes up data from Google and Yelp to pinpoint establishments that brew beer on the premises and serve food.
Tools
- JavaScript
- Knockout.js
- Pure.css
Role
FE Developer
Year
2014
Premise
In 2014 Google results for brewpubs needed human verification that the establishments did indeed brew beer on site and serve food. At that time it was rare and a good indicator of an interesting community within a short distance of said establishment.
The brewpub finder is my final project for Udacity's Front End Web Development Nanodegree Program. I had to create a single page app using a front end framework, Google maps API and content from another api data source.
I built a brewpub finder using KnockoutJS, PureCSS, data from Google Maps and Yelp. The Yelp API I used was deprecated in 2018 and the app is no longer functional.
Context
Udacity's Front End Web Development Nanodegree Program is online program and 6 months long.
The curriculum covered :
- Web Foundations: HTML, CSS and version control with Git
- JavaScript Foundations
- Intermediate JavaScript: JQuery DOM manipulation, Object Oriented techniques, closure, this
- Advance JavaScript: Using API's, front end frameworks
What made the course valuable were 5 projects that had to be done in a real command line environment after cloning a GitHub repository. They included:
- Converting a designers mockup of a blog article into a pixel-perfect web page.
- Building a portfolio site
- Refactoring code and improving performance on an existing website.
- Recreating a classic video game: Frogger.
- The final map project built on the previous work: a single page app using Google maps API and content from another api data source.
Implementation
We had the choice of front-end framework and Knockout.js was promoted as easy for beginners. I chose the PureCSS library for its very minimalist approach that was easy to cherry pick for features.
The app would present a sidebar of establishments that would were mashed together from Google and Yelp results for brewpubs. Selecting one in the sidebar or map would bring up details like address, opening hours, and reviews.
It was challenging. How the MVC paradigm is actually implemented in code and the resulting issues with getting it to work were time-consuming. Understanding the documentation if it exists and verifying its accuracy was tough. It's part of the beginner's learning curve in programming.
Lessons Learned
With more gastropubs and better distribution of craft beer the correlation of brewpubs with interesting neighborhoods is weaker now. I would rethink my premise for using it as a proxy for an interesting neighborhood.
The Yelp API I used was deprecated in 2018. It's replacement does not support queries from the browser only the server. The app is no longer functional. Such is progress.
Keeping up with all the developments in JavaScript, much less individual API's is incredibly time consuming. I found it outside my needs, the clients I target, and the type of websites I build. I'm glad to have been exposed to the work involved but its not a core skill of mine.