Financial Times News Watch

A web application that queries the Financial Times Headline API for articles. By default, it displays the 100 most recent articles from the FT. Alternatively, the user can search to return articles relating to a given topic.

Click here to see the demo on Heroku :)

Installation

• Register for a FT API Key
• Clone this repo
• In project root directory, run npm install
• In the project root, create a .env file with the following content:

FT_API_KEY=[Your FT API Key]
DOMAIN=localhost:3000

• To run the local server, run npm start
• Navigate to http://localhost:3000/ to use the app

To Run the Tests

• Ensure Java Runtime Environment is installed to allow Selenium server to operate
• Ensure the local server is running (npm start)
• Run npm test on a separate terminal window

Development

To build the bundle.js and bundle.css, run gulp.

To build dist files run gulp create:dist. This is run automatically when the app is deployed to Heroku.

Specification

The app is built to the following specification:

User Stories

As a user,
I want to be able to see a list of the latest news headlines from the FT,
So that I can keep up to date with the current news

Acceptance Criteria:
- Display via pagination with 20 results per page
- Mirror look and feel of FT.com

As a user,
I want to be able to search for headlines containing specific words,
So that I can find related news articles

Technical Requirements

The app must be:

• Server rendered
• Progressively enhanced
• Responsive
• Accessible

Technologies and Approach

The app is built with:

• Node
• Express
• The FT's Origami framework and build tools
• Handlebars
• Gulp
• Sass

And tested with:

• Mocha
• Chai
• Sinon
• WebdriverIO

Server side code is written in Javascript ES6 and transpiled using Babel.

Performance and Accessbility

To maximise the site's performance and accessibility the following steps have been taken:

• All content is server rendered.
• The client is capable of running with Javascript disabled.
• Browsers not meeting the FT's 'Cuts the Mustard' standard are served a core version of the Origami components. Modern browsers receive the full enhanced experience.
• Bundled Javascript and CSS files are minified.
• Static files are subject to browser caching (for 8 days).
• API responses from the FT Headline API are cached on the News Watch server for 5 minutes.

As a result, the site receives the following scores from Google PageSpeed Insights:

Mobile 91/100

Desktop 97/100

Screenshots

Homepage - Mobile

Pagination - Mobile

User Search - Mobile

Medium Screen Layout

Large Screen Layout