Feature: Add MyPodcast Library app specification

Add MyPodcast Library app specification

Resolves: N/a
See also: N/a

Projects/MyPodcast-Library-app.md

@@ -0,0 +1,92 @@
+# My Podcast Library
+
+**Tier:** 3-Advanced
+
+In the [GitHub Status](./GitHub-Status-App.md) and [Podcast Directory](./Podcast-Directory-App.md) you learned what web scraping is and how you can
+use it as an alternative data source when API's and backend databases aren't
+available. The _My Podcast Library_ app merges your newfound knowledge of 
+web scraping with your frontend skills to extend the simple Podcast Directory
+app into something more complex and useful.
+
+The goal of _My Podcast Library_ is to build a more personalized library of
+your favorite podcasts and episodes. In this app you'll use
+[Puppeteer](https://github.com/GoogleChrome/puppeteer) and
+[Podbean](https://www.podbean.com) to create and app the maintain your
+personal library of podcasts.
+
+This project is described in detail by the following user stories, but feel
+free to use your imagination.
+
+## User Stories
+
+### Favorite Podcast Display
+
+-   [ ] User can see a the favorite podcasts in a tabular display area
+-   [ ] User can see the message 'No podcasts added yet' in watermark format
+in this area if no podcasts have been added.
+-   [ ] User can see an overview of each favorite podcast that has been added
+in this area. This includes the podcast icon, it's name, and the number of 
+most recent episodes.
+-   [ ] User can click on the podcast icon to display a page containing a list
+of the most recent episodes.
+
+### Favorite Podcast Entry
+-   [ ] User can see a '+' button at the top of the favorite podcast area with
+the hover text 'Add a new podcast'
+-   [ ] User can click the '+' button to display a popup panel to allow a new
+favorite podcast added. This panel contains an input area containing a text
+input box for the podcasts page on Podbean (e.g. 
+[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
+-   [ ] User can click the 'Save' button to validate the URL and add the 
+podcast to the favorite podcast area.
+-   [ ] User can see a warning message if the url doesn't start with 
+```https://www.podbean.com/podcast-detail/``` or if navigating to the page
+results in a 404 error.
+-   [ ] User see valid URLs for favorite podcasts retained across sessions.
+-   [ ] User can click the 'Cancel' button to discard any data and dismiss the
+popup.
+
+### Most Recent Episodes for a Podcast Page
+-   [ ] User can see a table of podcast episodes
+-   [ ] User can see rows in this table showing a clickable episode icon, the
+title of the episode, the date it was originally broadcast, and a heart icon
+button to mark it as a favorite.
+-   [ ] User can scroll through the list
+-   [ ] User can click on the episode icon to display that episodes page on
+the Podbean web site.
+-   [ ] User can click on an episodes heart icon to mark it as a favorite.
+-   [ ] User can click on an episodes heart icon to remove it as a favorite.
+-   [ ] User can see the table sorted with most recent episodes at the top, 
+followed by those previously marked as favorites.
+-   [ ] User can see favorite episodes persist across sessions.
+
+## Bonus features
+
+### Episode Ratings
+-   [ ] User can see 5 star icons with each episode that denotes how the user
+rates it. 
+-   [ ] User may click stars from left-to-right to rate an episode. Stars are
+filled or changed to a new color when clicked.
+-   [ ] User may change a rating by clicking on the stars from right-to-left
+to deselect them.
+-   [ ] User can see the list of favorite episodes on the page sorted in
+descending rating sequence.
+
+### Searching & Hashtags
+-   [ ] User can enter a freeform hashtag with an episode on the most recent
+episodes page. This hashtag does not need to be predefined.
+-   [ ] User can see a search box on the main page and a 'Search' button
+-   [ ] User can enter hashtags in the search box to display a page of episodes
+from any podcast with the same format as the most recent episodes page.
+-   [ ] User can click on a cancel button on the search results page to return
+to the main page.
+ 
+## Useful links and resources
+
+- [Puppeteer](https://github.com/GoogleChrome/puppeteer)
+- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)
+- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
+
+## Example projects
+
+N/a

Projects/Podcast-Directory-App.md

@@ -80,6 +80,8 @@ run()
 .then(console.log)
 .catch(console.error);
 ```
+- When you have completed this project check out the advanced project
+[MyPodcast Library](./Projects/MyPodcast-Library-app.md)
 
 ## Example projects
 

README.md

@@ -100,6 +100,7 @@ required to complete them.
 | [🌟Instagram Clone](./Projects/Instagram-Clone-App.md)         | A clone of Facebook's Instagram app                  | 3-Advanced |
 | [GitHub Timeline](./Projects/GitHub-Timeline-App.md)           | Generate a timeline of a users GitHub Repos          | 3-Advanced |
 | [Kudos Slackbot](./Projects/Kudos-Slackbot.md)                 | Give recognition to a deserving peer                 | 3-Advanced |
+| [🌟MyPodcast Library](./Projects/MyPodcast-Library-app.md)       | Create a library of favorite podcasts                     | 3-Advanced |
 | [🌟Shell Game](./Projects/Shell-Game.md)                       | Animated shell game                                  | 3-Advanced |
 | [Slack Archiver](./Projects/Slack-Archiver.md)                 | Archive Slack Messages                               | 3-Advanced |
 | [Spell-It App](./Projects/SpellIt-App.md)                      | A twist on the classic Speak N Spell game            | 3-Advanced |