|
|
|
|
# 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 an app to 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 their 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 can 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 episode's heart icon to mark it as a favorite.
|
|
|
|
|
- [ ] User can click on an episode's 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
|
