Skip to content
MEAN Stack Guide to 2015-2016 Season of Washington DC-Area Theaters and Shows
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Playbill DC - MEAN Stack Guide to Washington DC-Area Theaters and Shows

Overview and Purpose of Application

Playbill DC is a two-model MEAN Stack web application comprised of a hand-rolled API in which I scraped HTML data from this 2015-2016 DC Season at Glance Page using and then converted the data into JSON. I also added theaters based on my knowledge of the local theater scene.

There are many theaters in this area, but as a theater-goer, it is hard to keep track of all the shows that are going on. Playbill DC acts as a central repository for almost 60 theaters and their upcoming shows. Users can filter this index of theaters and shows based on custom search parameters, and users can also add quick tags such as "kids" or "contemporary" so users can also search for theaters by those terms. Furthermore, there is an Up Next feature that only displays the theaters with shows happening in the current month.

Playbill DC is not only a quick way for users to check out their favorite theater, but is also a resource for discovering new theaters and their producitions.

Technologies Used

This web application was built using the following technologies:

  • Data/Database
    • Screen Scraper to Parse HTML into JSON data
    • RESTful API, renders data as JSON
    • MongoDB (NoSQL Database)
    • Mongoose Object Data Modeling (ODM)
  • Back End Development
    • ExpressJS
    • Node.js
  • Front End Development
    • AngularJS
    • HTML
    • SASS Pre-Compiler, CSS, Bootstrap
    • ArcGIS Web Map
  • Deployment
    • Heroku
    • MongoLab (now MLab)

Installation Instructions

For Users

For Developers

  • Make sure you have NPM and Node.js installed. If you don't, follow these instructions.
  • After forking and cloning this repo, be sure to run the following commands in your terminal:
    • npm install
    • mongod, nodemon
    • sass --watch /public/css/styles.scss:/public/css/styles.css for SASS aut-compiling.

Unsolved Problems

  • The UX for adding a new show is a little wonky: users create an empty object and then add in the data. I'd like to streamline this process.
  • I added a nice white border around my show information, which still displays when the information is "hidden". Would like to still have the border when the information is displayed.
  • I added a data attribute for months to filter for the "Up Next." I'd like to know if there is a better way to do this.

Future Plans

  • Playbill Boston!
  • Connect this with audition information for performers and application information for designers.
You can’t perform that action at this time.