API Integration and Deployment Specialist
Budget: $30 – $250 USD
you’ll need to accomplish four tasks
Implement interactions with a third-party API.
Handle the responses.
Simulate some backend responses, to allow the reviewer full access to all pages and design elements.
Deploy the project.
1. API Interactions
When the search form is submitted, it should be validated. If no text is entered in the field, the error "Please enter a keyword" should be displayed. Otherwise, a request is sent to this API: https://newsapi.org.
Before you can send requests you need to register with the service and get an API key. Send the request to the https://newsapi.org/v2/everything endpoint, which is documented here. Add the following parameters:
q — what the user entered into the search bar
apiKey — the key you receive after registering at News API
from — this should be the date 7 days before the current date
to — the current date
pageSize — the maximum allowed array. Set it to 100 articles (max in the free version).
The data in the response will be rendered on the page, as described below.
In the free version of News API, requests will only work from localhost, and the number of requests is limited. This is fine while developing your project, but when the site is in production, you must use a proxy URL to bypass the restriction: https://nomoreparties.co/news/v2/everything.
You can handle this the same way you handled the base URL in your previous project:
const newsApiBaseUrl = process.env.NODE_ENV === "production"
? "https://nomoreparties.co/news/v2/everything"
: "https://newsapi.org/v2/everything";
2. Handling the response
When handling the responses, keep in mind the following guidelines:
If the user hasn't searched for anything, there should be no cards on the page.
If the user hasn't searched for anything, there should be no cards on the page.
Once a search request has been sent, the preloader animation should be rendered in the search results block. It should be removed when the response is received.
If no matching articles are found, a “Nothing Found” message should be displayed in the search results block.
If an error occurs during the response, show the error message in the results block: "Sorry, something went wrong during the request. Please try again later."
If the response includes one or more articles, the array should be saved to a piece of state in App.jsx and rendered on the page as cards.
If there are more than three cards, only three should be rendered, with the "Show more" button appearing below them. Upon pressing this button, three more cards should be rendered above the “Show more” button.
If all cards are being rendered, the "Show more" button should disappear.
3. Rendering the articles
The articles in the response will contain the following fields:
The source name: source.name
Publication title: title
Publication date: publishedAt
Publication description: description
Related image: urlToImage
Keep in mind the following details when implementing the design:
You’ll need to convert the date field so it corresponds with the Figma design.
There is a "Save" icon in the upper-right corner of the card. If the user is not logged in, the icon should be inactive. When hovering over an inactive icon, a message should appear saying "Sign in to save articles."
A screenshot of two cards with save icons. One icon is being hovered over, with a message saying "Sign in to save articles."
When the user is logged in, the icon should become active. If an article is saved, the icon should have a filled-in blue appearance.
A screenshot of three cards, with save icons in the top right. The save icon from the middle card is filled in with blue, whereas the other two are not filled in.
4. Simulating some backend responses
Since you don’t have a fully functioning backend yet, you’ll have to simulate (or “stub out”) some of these responses on the frontend. In particular, you should simulate responses for logging in, checking tokens, and saving and deleting cards.
Check out this brief guide for details.
Implement interactions with a third-party API.
Handle the responses.
Simulate some backend responses, to allow the reviewer full access to all pages and design elements.
Deploy the project.
1. API Interactions
When the search form is submitted, it should be validated. If no text is entered in the field, the error "Please enter a keyword" should be displayed. Otherwise, a request is sent to this API: https://newsapi.org.
Before you can send requests you need to register with the service and get an API key. Send the request to the https://newsapi.org/v2/everything endpoint, which is documented here. Add the following parameters:
q — what the user entered into the search bar
apiKey — the key you receive after registering at News API
from — this should be the date 7 days before the current date
to — the current date
pageSize — the maximum allowed array. Set it to 100 articles (max in the free version).
The data in the response will be rendered on the page, as described below.
In the free version of News API, requests will only work from localhost, and the number of requests is limited. This is fine while developing your project, but when the site is in production, you must use a proxy URL to bypass the restriction: https://nomoreparties.co/news/v2/everything.
You can handle this the same way you handled the base URL in your previous project:
const newsApiBaseUrl = process.env.NODE_ENV === "production"
? "https://nomoreparties.co/news/v2/everything"
: "https://newsapi.org/v2/everything";
2. Handling the response
When handling the responses, keep in mind the following guidelines:
If the user hasn't searched for anything, there should be no cards on the page.
If the user hasn't searched for anything, there should be no cards on the page.
Once a search request has been sent, the preloader animation should be rendered in the search results block. It should be removed when the response is received.
If no matching articles are found, a “Nothing Found” message should be displayed in the search results block.
If an error occurs during the response, show the error message in the results block: "Sorry, something went wrong during the request. Please try again later."
If the response includes one or more articles, the array should be saved to a piece of state in App.jsx and rendered on the page as cards.
If there are more than three cards, only three should be rendered, with the "Show more" button appearing below them. Upon pressing this button, three more cards should be rendered above the “Show more” button.
If all cards are being rendered, the "Show more" button should disappear.
3. Rendering the articles
The articles in the response will contain the following fields:
The source name: source.name
Publication title: title
Publication date: publishedAt
Publication description: description
Related image: urlToImage
Keep in mind the following details when implementing the design:
You’ll need to convert the date field so it corresponds with the Figma design.
There is a "Save" icon in the upper-right corner of the card. If the user is not logged in, the icon should be inactive. When hovering over an inactive icon, a message should appear saying "Sign in to save articles."
A screenshot of two cards with save icons. One icon is being hovered over, with a message saying "Sign in to save articles."
When the user is logged in, the icon should become active. If an article is saved, the icon should have a filled-in blue appearance.
A screenshot of three cards, with save icons in the top right. The save icon from the middle card is filled in with blue, whereas the other two are not filled in.
4. Simulating some backend responses
Since you don’t have a fully functioning backend yet, you’ll have to simulate (or “stub out”) some of these responses on the frontend. In particular, you should simulate responses for logging in, checking tokens, and saving and deleting cards.
Check out this brief guide for details.