https://github.com/alexbelloni/feedr
Feedr is a JavaScript feed reader
https://github.com/alexbelloni/feedr
css3 generalassembly html5 javascript jquery
Last synced: about 2 months ago
JSON representation
Feedr is a JavaScript feed reader
- Host: GitHub
- URL: https://github.com/alexbelloni/feedr
- Owner: alexbelloni
- Created: 2020-03-13T20:38:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-25T20:37:41.000Z (about 6 years ago)
- Last Synced: 2025-02-23T19:45:49.297Z (over 1 year ago)
- Topics: css3, generalassembly, html5, javascript, jquery
- Language: JavaScript
- Homepage:
- Size: 51.8 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Feedr, a feed reader
[](https://app.netlify.com/sites/feedreader/deploys)
Feedr is a feed reader, which shows headlines of articles from news sources on a ordered list.
JavaScript and JQuery
[Site](https://feedreader.netlify.com)
Project description: build a simple, single-page application that consumes data from an open, third-party API
-> SPA consuming feeds and a news API
## Project's Technical Requirements
### Feed requirements
✔ Each article must provide an image source for the circular thumbnail at the
left of the article.
✔ Must provide either a category, tag, or custom taxonomy to display below the
title (of course title of article is also required).
✔ Must provide a point, ranking, or some type of total impressions for the
respective article.
✔ Must provide either a full version or a summary of the article for the pop up
screen.
### Feed rules
✔ When the application first loads display the loading container (see below on
instructions to toggle this). When you successfully retrieve information from
the default API hide the loader and replace the content of the `#main`
container with that of the API. The DOM structure of each article must adhere
to the `.article` structure.
✔ When the user selects an article's title show the `#popUp` overlay. The
content of the article must be inserted in the `.container` class inside
`#popUp`. Make sure you remove the `.loader` class when toggling the article
information in the pop-up.
✔ Change the link of the "Read more from source" button to that of the
respective article.
✔ When the user selects a source from the dropdown menu on the header, replace
the content of the page with articles from the newly selected source. Display
the loading pop up when the user first selects the new source, and hide it on
success.
✔ Add an error message (either alert or a notification on the page) if the app
cannot load from the selected feed.
### Additional UI interaction rules
✔ When the app is first loading and when the user selects to load a new feed
from the dropdown, display the `#popUp` container with the `.loader` class.
You can toggle the `.hidden` class from the container to display/hide the
overlay container.
✔ Add functionality to hide the pop-up when user selects the "X" button on the
pop-up.
✔ Clicking/tapping the "Feedr" logo will display the main/default feed.
✔ Merge all feeds into one main feed in chronological order for the initial
view. When the user clicks/taps the "Feedr" logo at the top, they should be
return to this feed. This will be the new "home view."
## Technical hurdles and new knowledge
### Hurdles
It's hard finding news feeds in Json format
Some news sources blocked me because of CORS issue
### New things
Review how to use JavaScript modules and promises
Because of the hurdles above, added rss-to-json online converter and heroku CORS service to receive some feeds
## References
NewsAPI: http://newsapi.org
Feeds: nasa.gov laravel-news.com reddit.com
Netlify: https://netlify.com
MDN web docs: https://developer.mozilla.org/
Alex's website: https://alexandrebelloni.com