NYT Top Stories is the place to get your daily news.

View application here

This is a React application built using the New York Times Top Stories API. The Top Stories API returns an array of articles currently on the specified section.

Endpoints include these section values: arts, automobiles, books, business, fashion, food, health, home, insider, magazine, movies, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, t-magazine, travel, upshot, us, and world.

These are examples of the API's endpoints:

https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/science.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/us.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/world.json?api-key=yourkey

The /home.json endpoint gets the articles currently on the homepage for the New York Times website.

An API key is required to utilize the API. Here's the instructions to get started using the API. Once you create a developer account on New York Times, you'll have to register your application to access the API key.

• Tip: Store your API key in a .env or .env.local file as environment variables in the root of your project. Make sure the .env or .env.local is added to the .gitignore file so you dont accidentally push up your API key. Read more
• Tip: For Cypress testing, you will also need to store the API key as an environment variable. Inside your cypress folder, create a file called cypress.env.json to store the environment variable. Add cypress.env.json to your .gitignore. Read more

• Kanban system via GH Projects

• Wireframes

• Component Architecture

• React fundamentals
• React Router to build a multipage application
• REST APIs
• Asynchronous JavaScript
• Acceptance testing & End-to-End (E2E) testing via Cypress

Skip installation by using this deployment link to view the application: NYT

• The application was deployed using Vercel.

To get a local copy up and running follow these simple steps.

1. In your terminal, clone the repository to your local machine

   git clone [email protected]:lswatson16/nyt.git

2. cd into the root directory

   cd nyt

3. Install NPM packages

   npm install

4. Start the server to view the application in the browser

   npm start

   • Runs the app in the development mode.
   • Open http:https://localhost:3000 to view it in the browser.
   • The page will reload if you make edits.

1. Install Cypress

   npm i -D cypress

   or

   npm install cypress --save-dev

2. Add this command to your scripts in package.json

   "cypress": "cypress open"

3. Run cypress tests

   npm run cypress

A user can type into the controlled form to find an article based on the keyword typed in the search input.

After searching for an article, you can select an article to find out more information. After selecting an article, you will be navigated to a details page. Here you can view additional details such as a link to the New York Times article.

• Add a favoriting/bookmarking functionality and a bookmarks page
• Utilize the additional endpoints

• React
• React Router
• Cypress
• Javascript
• HTML
• CSS
• React Dev Tools (Chrome Dev Tools)

Lighthouse (Chrome Dev Tools)

• Lauralyn Watson

• Create React App
• React
• Cypress.io
• React Router v5