NewsCrunch - a news aggregator app developed over News API

AttainU
AttainU

Project by AttainU Flamingo Group-04. 

NewsCrunch is a news aggregator app developed over News API. News API monitor thousands of news outlets in real-time to give you an enriched and flexible news data feed. It presents a continuous flow of articles organized from thousands of publishers and magazines. This is an open source API and is free for developers. And also can be easily integrated in our code. One can fetch JSON results which simple get http request. This API provides articles from huge range of publishers across the world, mainly the big ones like bbc, aljazeera, cnn, bloomberg and so on. 

The technologies used for the project are as follows: 

  1. Bootstrap 2. jQuery 3. Font Awesome 4. CSS3 5. NewsApi 6. Node.js 7. Express 8. Mongoose 9. Cloudinary 10. Mongo Atlas 11.Heroku

Main Features. 

  1. News Categories 
  • News are categorized according to their type. 
  • Every news article is displayed on a card. 
  • Popup modal on-click of card giving you a brief about the news. 
  • Redirects user, on new tab, to source article on click of ‘Read More’. 
  • Pagination at the end of every page for every category. 
  • User Login is not mandatory. 

  1. Search 
  • Search bar implemented on navbar which is stuck to the top of the page 
  • User can search anything which contains alphabetic and numerical characters. 
  • News is filtered searching the query in title and displayed on the homepage. 
  • Same layout as of the homepage. 
  • Pagination for every search page. 
  • User Login is not mandatory. 
  1. Bookmarks 
  • Bookmark button on every news article card. 
  • This is a user exclusive feature. Requires logging in. 
  • If user is logged in, clicking on the bookmark button on a news card will add that particular news to Bookmarks. 
  • If user is not logged in, clicking on bookmark button will redirect the user to the login page. 
  • On click of every bookmark button, the button turns green, notifying the user that the particular news is bookmarked. 
  • User bookmarks are stored in bookmarks page, which can be accessed from the top-right corner dropdown. 
  • On bookmarks page, user can click on the article which he has bookmarked, which will open up a modal giving brief content about that particular article. User can read the whole article by clicking on ‘Read more’ which will redirect the user, on new tab, to the source article. 
  • Delete button on every news card to delete the bookmark. On clicking delete, user will be asked for confirmation of the deletion. After confirming, that particular news article will be deleted. 
  • Same layout as of the homepage except there’s no search bar on the navbar. 
  • Accessing bookmarks route without logging in will redirect the user to the homepage. 
  1. Interests 
  • User can add interest to follow a particular topic. 
  • This is a user exclusive feature. Requires logging in. 
  • User can add as many as interests he wants. 
  • Add interest box is constant on homepage and the bookmark page. 
  • Upon adding an interest, a button will that topic will be added in the interest box. 
  • On click of interest button, it’ll filter out and display the articles related to the interest topic. 
  • Delete user interests option. 
  1. Personalized Weather 
  • Weather is displayed on every page of the website. 
  • Weather implement with help of OpenWeather API. 
  • OpenWeather Weather widget implemented in the right of every page. 
  • If the user is logged in, weather displayed is for the user city. 
  • If the user is not logged in, weather for Delhi NCR is displayed. 
  1. Login/Signup 
  • Validation for input fields. 
  • Requires unique email for every registration. 
  • Alerts. 
  • Implemented countrystatecity.js from Geodata.solutions. 
  • Passwords with special characters, uppercase and numerical characters for security purposes. 
  1. Profile 
  • User login required to access profile of that particular user. 
  • Profile page can be accessed to the dropdown menu on the top-right corner of the navbar on every page. 
  • On click of ‘Edit Profile’ on the profile page, user can edit his/her details in the modal. 
  • User can add/change a profile picture, which will be stored in cloudinary. 
  • User can also add/change his details and password. 
  • Changing user location will change the weather to that location, throughout the website.

 

DEMO: