jasmyn2244 / ny-times-top-stories

An app where users can filter New York Times articles by news sections of interest

NY Times Top Stories

Table of Contents

• Abstract
• Project Goals
• Project Specs
• Challenges
• Future Iterations
• Install and Setup
• api
• Tech Stack
• Contributors

Abstract

NY Times Top Stories allows users to view top news stories based on thier news section of interest.

Project Goals

• Practice builidng an entire app quickly to simulate a take home challenge
• Solidify all skills and processes learned at bootcamp including:
  • React
  • React Hooks
  • React Router
  • Gobal State Management, or context API
  • Rest API, fetch calls
  • Data cleaning
  • Error Handling
  • Considering Edge Cases
  • Accessiblilty
  • Responsive Design
  • Data manipulation (iterators)
  • SCSS (flexbox, grid, animations)
  • Cypress Testing
  • Git and Github (pull request templates)
  • Project Planning (with Figma and Github project boards)
  • User Experience

Project Specs

View wire frame here View project requirements here

Homepage:

The user can select a news category to begin viewing news articles

Brows Articles By Catergory

Once a category is selected, users can scroll through the cards to find an articles of interest

Article Details Page:

When users click a card, they are taken to an articles details pages where they can view more information about the article including an abstract. They can click a button to be linked to the full NYT article, or go back to brows more of the articles

Error Handling:

If a user types in an incorrect url, they will be directed to this error page. There is a similar error page for any error that may arise with errors in the fetch call.

Challenges

• Had problems switching versions of React from 19 back to 17. In the end I chose to use version 18 and it worked out ok.
• When trying to apply a context api, I learned that you can only pass one variable as a value to the children of the context provider.
• Ran into problems with git and learned how to undo commits and stay more organized
• Learned that a question mark in the url is a reserved keyword and it was effecting how I passed down the aricle title with useParams
• The initial installatino of cypress didn't generate a cypress folder so I found solutions for that
• I also spent many hours learning the quirts of SCSS and which units work best for an display that is responsive to screen size.

Future Iterations

• Add feature so users can search articles by keyword
• Add a 'save for later' feature so users can collect stories they want to read later
• Add media queries for a more exact responsive design
• I'd like to add new CSS features (an indicator for which section button a user has clicked, a carousel for the images that go with an artice, conditionally rendered borders that match the color of the article's section, add variable and mix-ins to clean up the CSS
• I'm interested in making the app the PWA
• I'd like to set up continous integretion and deploy the app

Install and Setup

To run this app locally:

1. fork this repository
2. run git clone [e-mail]:jasmyn2244/ny-times-top-stories.git in your command line
3. Run cd ny-times-top-stories to navigate into the repository
4. Run npm install
5. Run npm start
6. Visit http://localhost:3000/ in your browser to view NY Times Top Stories app!

api

For this project, I access data from the NYT Top Stories API.

NTY API

Tech Stack

Contributors

Jasmyn Hicks (she/her) GitHub
LinkedIn