MyPodcast-Library-app.md 4.3 KB
Newer Older
1 2 3 4
# My Podcast Library

**Tier:** 3-Advanced

S
Sanjeev Yadav 已提交
5
In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can
6 7 8 9 10 11 12 13
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
L
lpmi-13 已提交
14
[Podbean](https://www.podbean.com) to create an app to maintain your
15 16 17 18 19 20 21 22 23
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

L
lpmi-13 已提交
24
-   [ ] User can see their favorite podcasts in a tabular display area
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
-   [ ] 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.
L
lpmi-13 已提交
45
-   [ ] User can see valid URLs for favorite podcasts retained across sessions.
46 47 48 49 50 51 52 53 54 55 56
-   [ ] 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.
L
lpmi-13 已提交
57 58
-   [ ] 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.
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
-   [ ] 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