Skip to content

emjose/news-site

Repository files navigation

previous 100 days of code next

News Site


News Site

Table of Contents


#100DaysOfCode

Day 27: April 12, 2021


Installation

1. PREREQUISITE: This app requires an API key from News API.

  • Log in or register at News API.
  • Once logged in, press the "Get API Key" button.
  • The generated API key will be alphanumeric and 32 characters long.
  • Keep the browser tab with your News API key open for reference.

2. Git clone and cd into the repo folder:

git clone git@github.com:emjose/news-site.git && cd news-site

3. In the main root directory of the project files, create an .env file:

.env

4. In the .env file, create an environment variable to store the API key. Paste this line:

NEXT_PUBLIC_NEWS_KEY=

5. Paste your News API key after the equal sign character:

NEXT_PUBLIC_NEWS_KEY=your-news-api-key

6. The API key variable is used in the fetch request located in /pages/feed/[slug].js:

const apiResponse = await fetch(`https://newsapi.org/v2/everything?q=dogs&pageSize=9&page=${pageNumber}`, {
	headers: {
		Authorization: `Bearer ${process.env.NEXT_PUBLIC_NEWS_KEY}`,
	},
});

7. Back in the terminal, install dependencies:

npm install

8. Run the development server:

npm run dev

9. Open http://localhost:3000 with your browser to launch the News Site app.


Live Site

Live Site

Dog Day News is a progressive web app.

Dog Day News is responsive and keyboard-navigable.

• Users can browse the newsfeed and app pages.


Live Site

• Users can navigate 10 pages of the most recent dog-related news.

Note: Although the News API fetch request has parameters for the keyword "dogs," some articles unrelated to dogs appear in the newsfeed.


Resources


Let's Connect!

Twitter badge Linkedin badge Medium badge Instagram badge Gmail badge Portfolio badge Github badge

Back to Top