A simple App that fetches data from the Hacker News Top Stories API and displays a list of the individual stories.
The UI is built using React + Typescript and styled using Styled-Components. Framer-Motion is used for UI animations. A SkeltonLoader component is shown while data is being fetched from the API and a useInfiniteScroll custom hook is used to render more data as the user reaches near the bottom of the page. The fetchStories async function handles the API calls and toggles the isFetching state. The storyIds from the first API call are sliced and mapped accordingly with the count from the useInfiniteScroll hook to return data for each story. When the use clicks on the title of the individual story, they are navigated to the actual page on a new tab.
The ListItems component is wrapped in the React.memo higher order component to stop unnecessary rendering of the component unless the props have changed in value. The serviceWorker.ts file registers a service-worker to cache the page results to speed up subsequent loads of the page.
React-testing-library is used along with MSW to make sure the UI is rendered correctly and by mocking the API calls. By using MSW, we can avoid directly mocking the Fetch API and still have confidence that the fetch function is being called correctly.