Public | Automated Build

Last pushed: 5 months ago
Short Description
Automated build for Udacity - Project 3 - Item Catalog
Full Description

Project 3 - Item Catalog

Udacity - Full Stack - Project 3 - Item Catalog

By Jerry Wardlow for the Udacity Full Stack Web Developer Nanodegree


This project is a RESTful web application using the Python Flask framework which
accesses a PostgreSQL database to present a catalog which can store information
about items and the categories they belong to. OAuth2 authentication and
authorization is used to allow users access to CRUD (create, read, update and
delete) operations. Users who are logged in to a Google Account can view item
and category information, add new items and categories, and edit and delete
only those items and categories which they have created.

In This Repository

The project consists of a core Python module ( which runs the
Flask web application. A PostgreSQL database is created and populated with the
necessary tables during Vagrant provisioning using The
Flask web app uses the stored HTML templates in the templates folder to
generate the final web pages seen by the user. CSS files and static images are
stored in the static folder.

Using This Project


  • The latest version of Vagrant for
    your preferred platform.
  • The files contained in this repository

A detailed list of the Python modules installed during provisioning of our
Vagrant virtual machine can be found in the included requirements.txt.

Running and Testing This Project

From a command line, change into the p3catalog directory of this project. (For
this example, we will assume it is in /home/user/p3catalog)

cd /home/user/p3catalog

From this directory we will execute our Vagrantfile which will create and
provision the virtual machines required to run this project.

vagrant up

Now that the Vagrantfile and corresponding configuration file (
have finished provisioning our virtual machine, we have an Ubuntu 14.04
environment configured to run the Item Catalog project. All necessary packages
have been installed, and port 5000 (the port used by this project) has been
forwarded correctly. Gunicorn is installed as well to handle our Flask

An Upstart configuration file (app/itemcatalog.conf) is copied to our virtual
machine's /etc/init/ directory allowing Gunicorn to automatically start the
Flask Item Catalog on port 5000. Feel free to run vagrant ssh app to poke around
in our new server.

The second virtual machine is a fully operational PostgreSQL server with an SQL
backup loaded. This backup is ripped from the db_populator script which loads
the database with sample data to be used by the application.

Turning our attention to a web browser, we can navigate to
http://localhost:5000/ and see the web application running correctly. We can
view categories and their associated items and access JSON formatted information
as well. Each requested page is generated dynamically using the Flask
application's Werkzeug WSGI library and Jinja2 templates.

At this point, however, we do not have access to one of the core components of
this project, OAuth.

Setting Up Google OAuth 2.0 Access

Though a detailed tutorial for setting up OAuth credentials is outside the scope
of this project, in depth information can be found through Google Identity
After creating a new project through the Google Developers Console, we can
add new 'OAuth 2.0 client ID' credentials. Our application type is a 'Web
application'. 'Authorized JavaScript origins' are http://localhost:5000 and
'Authorized redirect URIs' are http://localhost:5000/oauth2callback. Now we
can download a JSON file of this information, rename it to client_secrets.json
and move this file to the root of our project (/p3catalog/).

Now that we have updated the Item Catalog project with OAuth 2.0 credentials
from Google, the full functionality of adding, editing, and deleting items and
categories can be used. Items and categories can be created by any logged in
user, and users may edit and delete any objects that they have created.

Setting Up Imgur API Access

Image hosting is handled through Imgur using their API. Requests are handled
using the PyImgur library. To use this API, we must register the application
with Imgur's API Application Registration Page.
Setting the Authorization callback URL to localhost:5000 will let us properly
use Imgur's uploads and hosting. Upon successful registration of an application,
we can add the client_id key to under IMGUR_CLIENT_ID.

Cleaning Up

If we decided to get messy and poke around in the running VM, we can now exit
our virtual machine and run vagrant destroy to remove all traces of the
Vagrant environment.


Ansible can also be used to configure the application and database servers. A
series of playbooks and a Vagrantfile can be found in provision/ansible. By
running vagrant up in this directory, two bare Ubuntu 14.04 VM's will be spun
up ready to be worked on. Running ansible-playbook deploy.yml will configure
our application and database servers. The Vagrantfile will scrape your SSH key
from ~/.ssh/ and add it to the authorized_keys of each VM. Please
note that since we are pulling application code from GitHub we don't have a
chance to setup Imgur and OAuth keys and as such application will be limited as
noted before.


A Docker Compose file is included that will spin up two linked containers, one
running the web application and one PostgreSQL container loaded with a database
backup of sample data.

Even Less Docker?

Need something
with less PostgreSQL and more SQLite? Hate Gunicorn? Looking for
an 81% reduction in image size and an 81% reduction in stability?

docker run -d -p 5000:5000 jerrywardlow/alpine-catalog

Docker Pull Command
Source Repository