News API Client

A simple client PWA for the News API, based on react (Next.js) and the context API, and easily deployable to ZEIT Now.

You can take a look at the project running here: https://newsapiclient.paulmdorr.now.sh/

Features

• Show a list of the last 20 news from the News API
• Filter news by category
• Toggle page theme between light and dark
• Images are lazily loaded using react-lazy-load
• Code is typed using TypeScript
• Easily deployable to ZEIT Now as lambdas
• Client cache with service worker and localstorage
• E2E tests with Cypress

Future improvements

• Local cache invalidation
• Pagination in order to load more than 20 articles
• Better UI (dropdown improvements)
• Better Unit testing coverage
• Better E2E testing

Installation

After cloning the project, simply run this in its root folder:

yarn install

Running

I'm using ZEIT Now as a deployment server, so in order to have a matching development server, I use now dev to run it locally.

Before running the project, you should add a .env file to set your News API key:

NEWS_API_KEY=<your API key>

Where you should replace <your API key> with they key from the News API site.

Once you've created your .env file, you should be able to run the server like this:

yarn start

Go to localhost:3000 and you should see something like this:

Building for production use

This could be useful if you want to deploy the project anywhere other than ZEIT Now.

yarn build

Deploying to ZEIT now

In order to deploy the project to your own ZEIT Now account, you must first login to now from the terminal, and then probably change the alias in the now.json file, since right now is related to my account: "alias": ["newsapiclient.paulmdorr.now.sh"].

After that, simply running the following commands to execute the deploy process.

now secret add newsapikey <your API key>
yarn deploy

Running Unit tests

Unit tests are written with Jest and Enzyme, and you could run them with this command:

yarn test

This should be the last part of the result:

Running e2e tests with Cypress

In order to run the e2e tests you need to install Cypress globally, since having it as a dev dependency caused the deploy to ZEIT Now to fail.

yarn global add cypress

Once you have Cypress installed, you should first have the server running:

yarn start

With the server up, you can run:

yarn e2e

And it should show something like this: