amcquade / quick-feed

A simple ReactJS app for rendering RSS feeds

quick-feed

This project is a simple ReactJS app for rendering RSS feeds for podcasts. You can try out the app here.

This project was bootstrapped with Create React App. You can read more about it here.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

quick-feed's Issues

animation bumps episode list

the episode list is bumped down by the fetch animation if you search for additional feeds

add images/gif to readme

readme is a little bland..i think there is some package you can show gif-like usage. that or just some images would be nice.

Add Docker feature

Hello i'm Sodiki, me and my friend @[email protected] we want to add a Docker feature that will make it easier to contribute to the project.
With this feature, you no longer need to have React or Node installed locally. With this feature no more version problem.
You just need to have docker locally on the developer's workstation and that's it.
Anyone who wants to work without docker can also do so without any problem.

Features :

A Dockerfile at the root of the project
A docker-compose file also in the root of the project
Orders :
go to the root of the project and just run: docker-compose up --build

Create modal/ pop up to display favorite feeds

Suggestion :

Creating a pop up / modal that shows the user's favorite feeds. In order to do that, we'll need :

• a toggle button to select and unselect a favorite feed
• a modal / pop up to show the favorite feeds
• a button to open the modal located on the menu, next to the 'Previous Feeds' button
• to save the favorite feeds. As the current app doesn't have an authentication service, we could just save the feeds reference in the browser (LocalStorage) so when users comes back to the website, they still have their favorites listed.
• call the method getFeed when users select one of their favorite feeds from the modal/ pop up to display their favorite feeds data.
• a method to format URLs saved in the LocalStorage to normalize users input as they could enter a link prefixed with "http://", "https://", "www.", ...etc. This way, we would avoid duplicate saved feeds.

We can save the favorite feeds reference in the LocalStorage in this format :

Key

Value

favorite-https://feeds.megaphone.fm/replyall

{ "program_description" : "A podcast about the internet' that is actually an unfailingly original exploration of modern life and how to survive it." - The Guardian. Hosted by Alex Goldman and Emmanuel Dzotsi from Gimlet.", "program_image" : "https://megaphone.imgix.net/podcasts/05f71746-a825-11e5-aeb5-a7a572df575e/image/uploads_2F1610700524297-f3e2p6fbm79-8b4536488226b56e93a99ce9f7b555b5_2FReplyAll_ShowArt.png?ixlib=rails-2.1.2&max-w=3000&max-h=3000&fit=crop&auto=format,compress", "program_link" : "https://feeds.megaphone.fm/replyall", "program_title" : "Reply All" }

We use the URL of the feed to identify each feed. We prefix the key with "favorite-" so we can iterate through the favorite feeds only and differenciate the favorites from other items, in case we would need to save other items in the LocalStorage.
We don't need to save the episodes in LocalStorage as we will make a RSS request call to get the feed when users select one of their favorite feeds.

Here are some images of how it is supposed to look like :

rss url is not working

I've tried with podcast url

Create context for global app state

Suggestion :

As the app is starting to grow and we are welcoming new features, I suggest to add React's Context to handle global data to avoid using props on multiple hierarchy levels. We could also by the same occasion export the getFeed method to another file so all component have access to it. This way, we would avoid passing getFeed as props to every component.

In order to achieve this, we need to :

• Create the context
• Use an initial state with these data : the user's currently displayed feed , the user's previous feeds, the user's favorite feeds, the fetching state of the feed, and the error indicator. We suggest this format for the initial state :

const initialState = {
  currentFeed: {
    episodes: [],
    program_title: '',
    program_image: '',
    program_description: '',
    program_link: ''
  },
  onFetching: false,
  previousFeeds: [],
  error: false,
  favoriteFeeds: [],
};

• Create the corresponding reducers to update the state (add, remove)
• Export the getFeed method to another file to avoid sharing the method via props on too many hierarchy levels

Validate search input

Prevents a request if the input is blank

Create 'feed not found' UI

user should see something if there is an error in the feed parsing, invalid url, could not be found, not an rss feed, etc

Research audio players

User should be able to play episodes from the feed listed on the feed. Suggestions can go below

Create a better loading animation

Find something more interesting than the react logo

deployed app having issues

The deployed app seems to be not able to parse rss feeds. Tested with two rss feeds so far.

[SETUP] THROWING ERROR

App is throwing error when I try to run it locally using "npm start"
Node.js version : 20.5.0

Suggestions Page

Leave a comment if you would like to add a feature or something like that

Add 'search by' field to input

search for an RSS feed by name, a list of possible feeds should be returned for the user to select and render, unless an exact match is found. eventually it would be cool to have auto complete, unsure if thats feasible