Rishi-Rai.com Blogs Home News Login Contact About


Get all your News Headlines in one place, for free!

Date: Feb 3, 2019
Last Updated: Feb 9, 2019
Tags: News, RSS, News Aggregator, Free
 

This blog explains the high level architecture and design of my News Web App.

Key Features

  • 100% free to use.
  • No Ads.
  • Users can add, delete, sequence and update their own RSS feeds.
  • Data is fetched instantly / on-demand.
  • Compact layout. Expand and Collapse RSS feeds as needed.
  • RSS feeds are fetched Asynchronous. User does not need to wait for one RSS feed to fetch before launching another fetch.
  • Responsive design. Adapts to Desktop, Tablet and Phone.

Operating System

Webserver

Database

Programming Language

User Interface and Miscellaneous

Program/Code Logic

  • UI Layout

    • Create a template using EJS to get a uniform look.
    • Get the list of all RSS Feeds from MongoDB as JSON and pass this data to the ejs page that is rendered for /news url.
    • Display each RSS feeds title in its own (parent) div tag.
    • When the user clicks on the title, execute an ajax call (using Jquery) to an API on the server which can fetch the RSS line items from the RSS feed asynchronously.
    • Display the data from ajax response in a child div tag. (The parent div tag contains the title of RSS feed).
    • Expand the child div tag and display data as links.
    • When the user clicks on up (collapse) arrow, simply hide the child div tag.
    • Since the data has already been fetched and populated in the child div, there is no need to regenerate the data when the user tries to expand the child div tag by pressing the down (expand) arrow.
    • Due to the floating divs, overall UI design is responsive and adjusts according to the display size of the device.
  • Backend Code

    • Enter the seeded RSS Feeds in a MongoDB collection.
    • Create API's that UI can call via ajax.
    • The primary use of API's in the news app is to fetch data from RSS feed's url, asynchronously.