News Nuggies is a news search engine app that allows users to
search for any news and returns the relevant news results. It
utilizes the MediaStack API to retrieve the news pieces.
Upon pressing the Search button, news pieces are
returned in a compact list format within the results pane (left
side of screen). By clicking on a chosen news piece, users will
find an expanded news piece summary displaying in the news pane
(right side of screen). A link to the original news article URL is
also available in the news pane underneath the displayed news
piece.
News Nuggies has a simplistic layout and
intuitive user interface that is easy to use. Main features of
this web app include result sorting options, pagination, and
bookmarking.
This app is mobile friendly and employs responsive design.
Bootstrap and jQuery are utilized for formatting and event
listeners while Ajax is used for communication with the MediaStack
API. For the bookmarking feature, news data is stored in users'
browser local storage.
News Nuggies delivers news search results through connection
with the MediaStack API.
MediaStack API is a REST API
that delivers news data in lightweight and easy-to-use JSON
format. News Nuggies is currently on the free plan that allows
1000 free search queries per month.
Upon receiving
news data from the API, News Nuggies processes and displays the
relevant data in the results pane.
There are three options by which users can sort the search
results: Latest, Oldest, or Popularity. By default, results are
displayed by Latest, displaying the most recent result with its
published time.
When a sort option is clicked,
results will be rerendered and a fresh Page 1 based on the new
sort option will be displayed in the results pane.
Pagination feature is available in the form of previous and next
page buttons. On the first page of results, only a next page
button is available; On the last page, only a previous page
button is available; For all other pages, both previous page and
next page buttons are available.
When more than one
page of search results are available, users may click on the
pagination buttons to go to other pages for additional results.
Bookmarking is one of the most interesting features of this app.
By bookmarking a news piece, users are able to come back to the
app and retrieve the bookmarked news piece.
Browser local storage is utilized for this feature.
Upon clicking the bookmark button of a news piece, that piece
will be saved in the local storage. When page reloads, browser
will retrieve all bookmarked data from local storage. As users
hover over the bookmark icon in navigation, they will be able to
select and open the saved bookmarks in the news pane.
There is a 'See Full Article' hyperlink in every news piece opened in news pane. If a user wants to see the original news article, just click on the hyperlink and it will take the user to the URL of the original article in a new browser tab.
News pane will move from the right side of results pane to the
bottom of results pane when media query hits mobile navigation
width.
On mobile-sized screen, as a news result is
tapped, app will automatically smooth scroll down to the news
pane to show the displayed news piece.
As user
scrolls down the page, the circular "scroll to top" button will
appear at the bottom right corner of screen, taking user back to
the top of page if needed.
News Nuggies was designed and built from scratch. Libraries such as Bootstrap and jQuery were utilized to improve development effiency and enhance user experience. Of all the features, successfully developing algorithm to communicate with MediaStack API as well as developing the bookmarking feature were the most enjoyable experience. Below summaries the potential improvements to add to the web app in the future:
Consider developing the search engine into a multi-language app to reach a wider global audience.
Consider utilizing CMS to build individual search accounts & bookmark databases.
Consider opting for a paid subscription to MediaStack API in the future to enable SSL protocol.