A simple website to display a list news getting from free NYTimes API

Live Demo

Table of Contents

• User Stories
• Check list
• Development
  • Using Docker
  • Using local Node.js
• Production
  • Docker image build
  • NPM build script
• Deployment

User Stories

• As a user, I want to see a list of news which support pagination and each news item contains: snippet, multimedia, pub_date, source fields.
• As a user, I want to see a specific news item as modal view by clicking on it.

Check list

• Home Page, Detail Page
• Redux
• Docker
• Styled Components
• Unit & UI Tests
• Call NYTimes API to get list of news
• Beautiful design, responsive & well displayed on mobile screen

Development

Using Docker

Get Docker

Get Docker Community Edition for your platform (Linux, Mac, Windows).

Spin up the app

$ docker-compose up -d

Stop the server

$ docker-compose down

Rebuild image

$ docker-compose up -d --build

Visit localhost:9000 on your browser.

View logs

$ docker-compose logs -f web

Using local Node.js

Install Node.js dependencies

$ npm install

Start dev server

$ npm run dev

Production

Docker image build

Build the image

$ docker image build -f Dockerfile.prod -t news-demo:v1 .

Run the app

$ docker container run -d -p 8080:8080 -e PORT=8080 news-demo:v1

Visit localhost:8080 on your browser.

NPM build script

Install Node.js dependencies

$ npm install

Build the app

$ npm run build

Run the app

$ npx http-server -p 8080 dist

Deployment

$ docker image build -f Dockerfile.prod -t news-demo:v1 .
$ docker image tag news-demo:v1 registry.heroku.com/nha-news-demo/web
$ docker image push registry.heroku.com/nha-news-demo/web
$ heroku container:release web