swastikyadav / hacker-stories Goto Github PK

This feature should be implemented after at least one filter on stories is added.

• Filter settings are lost when page is refereshed.
• Save the filter settings in local storage, so that it is persisted even on page referesh.

Any discussion doubts, or implementation detail should be done below in comments of this issue.

• Every story either have the key text or not.
• This text key represents the description for that story.
• Use it to filter stories by description.

Scope

• Filter on the basis of whether a story have description or not.

• Install Ant Design npm package in the repo.
• It is required for features to be implemented in near future.

Here is the antd installation guide: https://ant.design/docs/react/use-with-create-react-app#Install-and-Initialization

• Every story have a timestamp key named time.
• Use that timestamp to filter the stories based on the selected time range.

Implement something very similar to this UI.

Any doubt or implementation detail should be discussed in below comments.

• Every story have comments and number of comments is denoted by key descendants.
• Use that descendants key to filter the stories by selected range of comments.

Scope

• Add filter by gte (greater than or equall to) number of comments.
• Add filter by lte (less than or equall to) number of comments.

Implement something very similar UI.

Any query, discussion, or implementation detail should be done below in comments.

• Right now we are fetching random stories.
• Add a search box to filter and show stories by searched title.

Scope

This should be a frontend search only, as the API in use does not have endpoint to fetch via topic.

Some story with long metadata takes more spaces than another. Would you mind if I assigned to this issue and labeled this issue as hacktoberfest?

Story with long metadata

• The web app is designed with mobile first approach.
• Redesign the desktop view with media query.
• The basic design requirement is to have 3 cards in one row (Can be achieved easily with flexbox).
• The mobile view should remain same.
• For simplicity let's have only one break point which is 768px.

Desired Output is something similar to this image:

• Use react-router-dom for routing.
• Capture invalid routes and show 404 not found page.
• On 404 page, just download and add the following svg.

• On top right show the number of stories currentlly in view.
• There is a state with array of stories.
• Length of that array should be enough to show the count of stories in view.

Roughly something like this.

• Currently we have a load more button.
• This button when clicked loads 10 more stories.
• Remove this button and add infinite scroll.
• When we scroll to the bottom of the page it should fetch 10 more stories.
• Instead of having to click the load more button.

Detail

Just moving the button onClick login to the point when scroller reaches end of page should do the job.

• File path: src/components/menu/menu.component.jsx line 39
• Change the text Past to Best.

That tab is for the best hackerNews stories not specifically for the the past stories.