Synopsis
A visually forward web app for browsing the top NYT stories of the day
User Capabilities
- User can click on any topic of their choice and observe a visual grid of articles relating to that topic
- User can utilize the search bar to query articles by various keywords such as title, people, and location
- User hover over any image to see the article title fade in
- User can click on any image to be taken to the 'detailed' view of their article of choice
- User can utilize the two buttons at the bottom of the 'detailed' view to:
- Open the article on NYT
- Return to their topic section of choice
-
React.js (bootstrapped with create-react-app)
- React Router
- Hooks
-
JSX / HTML
-
JavaScript ECMA6
-
CSS3
Implementing React Router
- Ensuring that the
/path hits the 'home' endpoint - No additional calls are being made upon render of the ArticleDetails component
- Which limits the capabilities of the useHistory and useMatchPath hooks
First time working with a process.env variable
- Though not difficult to implement, took some additional research to understand how create-react-app compiles
Responsiveness
- Getting breakpoints down to mobile screen widths of 320px would be the next goal
- Apply alt text to ArticleCard images
Testing
- Testing is likely at 25 - 30 % coverage at the time of writing this README
- Ensuring that stubbing is working properly will be essential to continuing the E2E testing process
Styling
- Element transitions at present are very sharp due to lack of easing