In this challenge, you will build a modern client for Hacker News, a news aggregation and discussion platform that caters to tech enthusiasts. By using the Hacker News API, you will display real-time posts from Hacker News, but users will not be able to upvote, post discussions or submit new articles.

Note: The submission vs design comparison feature ("Solution vs Design") will not be accurate for this challenge as working with the Hacker News API involves real-time dynamic data.

Functional requirements

1. Feed interface

Implement the interface according to the provided designs for desktop, mobile and tablet

• Views: There should be 4 views, accessible through the sidebar chips. Data of each tab will be populated with a specific endpoint from the Hacker News API.
  • New
  • Ask
  • Show
  • Jobs
• Listing card types:
  • An external URL (The item card itself will have a URL at the end)
  • In-app article
  • In-app poll
• Data to display on cards for New, Ask & Show
  • Title
  • URL: If the post leads to an external URL, the domain will be displayed
  • Points
  • Author's username
  • Time: Display in relative format e.g. '5 hours ago', '2 days ago'
  • Comments: Display number of comments. If there are none, don't display anything.
• Data to display on cards for Jobs
  • Title
  • Time: Display in relative format e.g. '5 hours ago', '2 days ago'
• Pagination: Display 20 items per page, with a simple 'More' button to load the next 20 items
• Dynamic display without reloading: Switch between different views like new, ask, show, and jobs without reloading the page.

2. In-app article or poll

If an item leads to an in-app article or poll, we display the content of the article or poll, as well as its comments

• Meta data: Display the title, points, author's username, relative time and number of comments
• Main article or poll content: If it is an article, display the text content. If it's a poll, display it in a poll format, with the options and number of votes per option
• Comments: Display the comment author's username, relative time, and comment content. Total comment count should include replies as well.
• Comment nesting: Handle comment nesting (i.e. when users reply to other users)

3. API Integration

Integrate with the Hacker News API to retrieve real-time data for different categories (new, ask, show, and jobs).

• Handling of API requests and responses:
  • Loading state: Display when data is taking time to load
  • Empty state: Display in the case of any API errors or empty lists
• [Stretch goal] Efficiency and Caching:
  • Cache API responses where appropriate to reduce loading times and provide a smoother user experience.
  • Invalidate cache based on staleness or when new data is fetched to ensure content is up-to-date.

General Requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Interactivity:
  • Toast notification: This component is used for displaying error and success messages when it is not specific to any input field
  • Link / Button / Tab chips states: Implement and style links and buttons to reflect different states - normal, hover, focus and disabled.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Adaptive hamburger menu: Hamburger menu should be implemented for tablet and mobile views. The menu should be shown once the hamburger icon button is tapped on.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.