[Feedful] heroku
Feedful is a full-stack web application inspired be [Feedly] feedlysite. Feedful is designed to give user interesting feeds articles both for fun and work. It uses Ruby on Rails for backend, and React-Redux for front-end.
Feeds urls are store in database. Feedful uses Feedjira gem to fetch feeds. And new feeds is fetched and rendered dynamic. User will have the newest content all the time.
- Everytime users enter the home page, a ajax request is sent to fetch all feeds' data.
export const fetchAllFeeds = (success) => {
$.ajax({
method: "GET",
url: "/api/feeds",
success
});
};- At backend, Feedjira::Feed.fetch_and_parse function is called on feed-urls.
feed_detail = Feedjira::Feed.fetch_and_parse(feed.url)- In order to get image sources for each articles of feeds, Feedful uses regex to get the image tag's src of original article.
/<img.+src="([^"]+)"/.match(string)[1]- Feeds belong to different categories. Users can navigate through categories by clicking categories names
tags
With React-Modal, articles are rendered in a very clean way. Each time users click on a article block, a article detail will pop up from right.
- This is accomplished through React-Modal's customStyles.
const customStyles = {
content: {
right : '-100%',
transition : '.5s',
}
};
onModalOpen() {
customStyles.content.left = 'auto';
customStyles.content.right = '0';
}- Since the content of fetched articles are strings, Feedful uses dangerouslySetInnerHTML to insert articles. In this way, articles have cleaner structure.
<div dangerouslySetInnerHTML={this.dangerHtml(this.props.article)}/>User can create and manage their collection.
- Each time users click on add collection button
![add-collection] add_collection_button
a edit collection sidebar will appear. User can either create a new collection or add to an existed collection.
![collection-sidebar] new_collection
Users can also edit their collections by clicking edit button.
![edit] edit_button
Then users can delete a collection or a feed in a collection.
- User can like and unlike articles so that they can come back easily.
User can like and unlike articles while they read articles.
Then users can go to their favorite articles page to manage and read those articles
![like_page] favorites
User can mark one or all articles as read.
Count the number of read. Based on this, recommend popular articles to users.
Users can add their their feeds urls and customize the website style.