/ny-times-news-reader

Primary LanguageJavaScript

NY Times News Reader

Visit the deployed site here.

Table of Contents

Summary

The NY Times News Reader application was built for a take-home challenge where articles were fetched from the New York Times Top Stories API. The application was built in about 8 hours and achieves 100% accessibility.

Desktop View
visual-gif

Mobile View
mobile-gif

Setup

  1. Fork this Repo
  2. Clone it down to your machine
  3. cd into the root of the project directory
  4. Run npm install
  5. Run npm start
  6. Open http://localhost:3000/ in your browser to view
  7. Run ctrl + c to stop at any time.

Planning

A Notion document was used to keep component architecture, wireframes, and inspirations all in one place.

Wireframes

articles-wireframe



article-detail-wireframe

User Stories & Acceptance Criteria

  1. As a user, when I visit the app I should see a list of Top news titles.
  2. As a user, I should be able to click on a news title and get the details of that article.
  3. As a user, from the detailed page, I should be redirected to the NYT website when the article url is clicked.
  4. As a user, I should be able to choose a news section from the dropdown menu and see all the articles pertaining to that section.

Accessibility

Accessibility was audited using Lighthouse.
accessibility

Technologies and Tools

  • JavaScript
  • React
  • React Router
  • HTML
  • CSS
  • Postman
  • Figma
  • Notion
  • Agile Workflow
  • GitHub Issues
  • GitHub Projects

Roadmap

Future features could include:

  • Update styling on the Article Details page to be responsive on all screen sizes.
  • Add a back button from the Article Details page so user can navigate from the app and not just through the browser.
  • Test user stories using Cypress

Contributors

Amber Bodnar

The Turing School of Software and Design provided a spec sheet, which can be found here.