What You will Learn?

• Introduction (what are we building?), tech stack talk
• Using create-react-app as our base
• Stripping out the files & content that we do not need
• Refactoring to named exports
• Modifying our .env file
• Scaffolding our application
• Looking at the Hacker News Api
• Looking at all the news article Ids
• Adding Axios using Yarn
• Creating our hnApi.js service file
• Adding the ability to get all story Ids from HN Api
• Starting work on App.js
• Adding useEffect to App.js to show all story Ids
• Explaining how useEffect works
• Creating our StoriesContainer.js container/component
• Adding the ability to get stories from HN Api
• Demonstrating the results that we receive from the HN Api
• Creating our Story.js component file
• Adding our Story component to the StoriesContainer component
• Adding storyId as a prop to the Story.js component
• Adding state to our Story.js component
• Using useEffect to get a story in our Story.js component
• Adding validation when getting stories
• Dumping our stories onto the page
• Building out the Story.js component with real data
• Adding a selector for the story fields
• Adding styled components
• Building out our StoryStyles.js file using styled components
• Adding a title to StoriesContainer.js
• Adding a StoryWrapper to our Story.js component
• More work on styling
• Adding styling for StoryMeta
• Adding styling for StoryMetaElements & styled component props
• Adding our styled components to our Story.js component
• Adding StoriesContainerStyles for more styling on the container
• Looking at adding global styles (createGlobalStyle)
• Adding our container styles to StoriesContainer.js
• Brief look at the React profiler
• Quick run through as to what we have built so far
• Making our time display properly using mapTime.js
• Adding InfiniteScroll to our application (custom hook)
• Constants to be used by InfiniteScroll for per page items
• Adding debounce functionality for scrolling
• Adding a fixture folder with fixtures for tests
• Testing! Lets test App.js
• Adding react-testing-library to our application
• Adding Jest coverage (good practise to do so)
• Testing the StoriesContainer.js
• Testing the Story.js component
• Testing the HnApi.js file
• Looking at our coverage and more testing!
• Collecting coverage from the right places
• Looking at React memo
• Adding memo to Story.js to prevent additional Api calls
• Overview of what we have achieved!
• Running our application through Lighthouse!
• Thanks for watching, I hope you learned a lot!