News App with React and Nodejs

Project repository of News React App

Content

• AJAX and JSON technologies.
• Use a combination of HTML5, React-Bootstrap, and React.js on client side.
• JavaScript / Node.js on server side.
• React-Bootstrap to enhance the user experience using responsive design.
• Amazon Web Services/Google Cloud App Engine/Microsoft Azure.
• APIs (Guardian News API, New York Times API, Comment - boxAPI, Bing Autosuggest API)

[Demo] (Click Image for the demonstration)

High Level Description

Tabs

There are 6 different tabs/sections that your website needs to have namely – Home, World, Politics, Business, Technology, Sports. Each of these sections/tabs display the top articles from any domain (for the Home tab) or the top articles belonging to the selected section/tab. The articles from each domain change based on the tab selected.

Sharing Modal

The 3 share options for Facebook, Twitter and Email using react-share.

Detailed Article Page

All articles are clickable and open a detailed view of the article Each article has a bookmark button as shown in Figure 16 below to add/remove article from favorites.

Comment-Box:

Each article has a comment-box that is UNIQUE to that article.

AutoSuggest on Search

The user can search for any keyword to look up articles related to that keyword from either Guardian News or NY Times depending on his/her selection.

Displaying Search Results

After the user searches for a keyword, articles related to that keyword are to be displayed in the searchbar

Favorites/Bookmark Tab

From the homepage of the website, the detailed article page and the search result page, the user can navigate to the bookmarks tab.

NOTE: The selection of source should persist anytime a user closes and reopens the website. If he/she closed the website with Guardian selected, the next time he/she opens it,the switch should be on Guardian only.