News Feed App

Turbo 360

In this tutorial, we create a React-Redux application which aggregates news feeds via RSS. The idea is to show the most recent posts from your favorite websites in a consolidated UI. Throughout, we use React, Redux and Turbo for data persistence. We also deploy on the Turbo staging environment for live testing. This is not a complete beginner tutorial and is best suited for those who have a basic understanding of React and Redux concepts. A demo of the tutorial project can be seen here:

Setting Up the Project (27:26)

In this video, we set up the project as a React/Redux application then install a basis theme for quick UI integration. We then import a few theme components into our own source code in order to make changes to the UI while maintaining the theme's original presentation.

Adding Feeds (20:57)

In this video, deploy the project to the Turbo staging server to confirm that everything works in a live environment. We then use component state to add new feeds to the side menu and render them in a list. We add text input handlers to update the feed name and url and well as a click handler to send the data to the backend.

Connecting to Redux (26:31)

We connect the app to the Redux store in this video and configure a series of actions, constants, and reducers to update & maintain state. We add new feeds and fetch current ones via Redux and remove that functionality from the component.

Container Components (31:58)

In this video, we separate our components into containers. Containers are components which are connected to the Redux store and should be organized into their own groups with specific sets of functionality. Often called "smart" components, containers primarily handle the key data of the application as well as business logic such as creating and updating data.

Fetching RSS Feeds (26:17)

In this video, we finally fetch actual RSS feeds and store them in the application state. To do so, we import the Superagent NPM module then set up a HTTP request utility function to make requests through a Promise sequence. Then we add an RSS reducer to store the data in order to make it available to other components as well as prevent unnecessary requests.

Rendering RSS Feeds (19:35)

In this video, we render the actual RSS feeds in the main content area of the application by connecting the Feed container component to the RSS reducer. We then connect the links to their original sources so that the user can read the content.

Join Free

Join for free today and deploy your site in seconds

Already have an account? Sign in HERE