Job board

Hard
·
120 minutes

Prompt

Create a job board that pulls the latest job postings from HackerNews. You will use the HackerNews API to pull down a list of post IDs for the latest job posts, fetch metadata for the latest 9, display them, and allow the user to load more.

You can use the GET /jobstories endpoint to get a list of the latest job post IDs, and the GET /item/<POST_ID> endpoint to get the metadata for an individual post.

The post data.title includes both the company name and information on the role as a single string: you will need to parse these to format the card correctly.

Requirements

  • The latest 9 job postings are displayed along with company name,
  • Company name (and YC(22), if present) is displayed at the top of the card
  • The Is hiring... text should be displayed in the center of the card
  • The date (in whichever day/month/year format you'd like) should be displayed at the bottom of the card
  • If the job metadata includes a URL, clicking a card should open the URL in a new tab
  • If the job metadata does not include a URL, clicking a card should open https://news.ycombinator.com/item?id=<POST_ID> in a new tab
  • Clicking 'Load more' should fetch and display the next 6 job posts

Important

  • You should only fetch the metadata for the latest 9 posts on load, and 6 more every time the user presses 'Load more'
  • data.title from the GET /item/<POST_ID> endpoint is nearly always in the format COMPANY_NAME [(YC21)] Is hiring.... If you come across other formats (e.g. COMPANY_NAME is looking for) you can choose to either ignore these edge cases, or handle them

API endpoints

Get the latest job post IDs

Get the metadata for a single posts

  • Method: GET
  • URL: https://hacker-news.firebaseio.com/v0/item/.json
  • Example response (with URL):
    {
    "by": "some-user",
    "id": 1234567,
    "score": 1,
    "time": 1642593662,
    "title": "AcmeCo Is Hiring Frontend engineers",
    "type": "job",
    "url": "https://jobs.lever.co/acmeco/123"
    }
    
  • Example response (with text):
    {
    "by": "some-user",
    "id": 1234567,
    "score": 1,
    "time": 1642593662,
    "title": "AcmeCo Is Hiring Frontend engineers",
    "type": "job",
    "text": "Hi everyone! This is a sample response that doesn't include a URL and instead links to an HN post"
    }
    

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here

Hints

Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.