tednaphil / news-reader

🗞️News Reader📰

Browse today's top articles! Users can search for articles by headline or description content and view an articles details with a click.

Preview:

Technologies Used

Installation Instructions:

• Run the following on command line to clone the repo and run the app locally:

  git clone [email protected]:tednaphil/news-reader.git
  cd news-reader
  npm install
  npm start
  

• The app will run at localhost:3000

Context:

• Take-home challenge timeboxed to 8 hours
• Mock dataset used during development
• Goals

  - demonstrate understanding of React.js and Front-End best practices
  - prioritization of MVP
  - logical information heirarchy
  

• Wins

  - succesful MVP development using small set of mock data
  - Lighthouse accessibility audits passing at 100%
  

Wireframe:

news-reader's Issues

Clean Code & Submit Repo

• Remove comments and console.logs
• Submit repo link with Prework Deliverables

Article View

As a user, I should:

• See detailed view for one article when clicked(headline, image, date, content and source
• Be directed to a new URL after clicking on an article
• Be taken back to homepage by clicking the Home button

Typecheck Props

Swap Mock Data with API Data

Refactor to ensure data in use by the app is from the News API

Create Wireframe

Create Mock Data File

Add README and PR templates

Update README

Deploy

• Add deployed link to repo page and README

Homepage

As a user, I should:

• See page heading
• See a list of articles on page load (headline, image, date, & description if available)

Sort, search, or filter

As a user, I should:

• Be able to sort articles by date (latest to oldest) OR
• Be able to search for articles by title or keywords OR
• Be able to filter articles by source

Add Data Cleaning Function

• Add placeholder image for missing article images
• Add readable published date to article object

Ensure Design Responsiveness

Tablet view

1023 - 768 px

• I should be able to see a list of articles to scroll up/down through
• I should see the search bar under the title if it comes to touch the text

Phone view

767px ->

As a user:

• I should be able to see a list of vertically stacked article cards to scroll up/down through
• I should see the search bar under the heading
• I should see one article's details in a column