Get 90+ scores on Lighthouse

• there is a Lighthouse option in DevTools
• Scored above 90
• Report printed as PDF and saved to public folder in repo

Set up a CI/CD workflow to automatically deploy your application when the master branch in the repository changes

• build and deploy to Netlify
• https://suspicious-hawking-232766.netlify.app/

OPTIONAL: Make your application a progressive web app

• I'm spent... Maybe come back later and work on this item

• the project / repo linking instructions are a bit confusing.
• this project exists outside of the r-c repo.
• makes sense (projects can use multiple repos), but you can also create project(s) inside a specific repo.

get images to size properly

quickly look into how to make grid responsive

transition animations

isLoading animations ->

https://blog.hubspot.com/website/css-loading-animation

• Redux, and Redux toolkit
  need toolkit to get async stuff
• Get on top of the Redux workflow
• Need async / API functionality

1 npx cra reddit-client
2 npm install react-redux
3 npm install react-router-dom
4 start by writing tests

• react -> test rendering (snapshots)
• redux -> uses Enzyme (state injection?)
• router -> ???

Unit tests with RTL and Enzyme

Write end-to-end tests for your application
using Selenium
https://www.selenium.dev/

• Selenium IDE talks about doing e2e testing. Let's go with this one.

https://redux.js.org/usage/writing-tests

• setup initial layout from wireframes
• stubbed in component code / calls

"The application will allow users to view and search posts and comments provided by the API."

• needs a comments slice

• https://www.reddit.com/wiki/api

• https://docs.google.com/forms/d/e/1FAIpQLSezNdDNK1-P8mspSbmtC2r86Ee9ZRbC66u929cG2GX0T9UMyw/viewform

there is an optional PWA task.

maybe come back later to this...

• created using wireframe.cc
• added to repo public folder 20211102

deployed to Netlify ->
https://suspicious-hawking-232766.netlify.app/

Router doesn't really solve the problem.
All that is required is to trigger a getListings action, passing filterTerm, zB

dispatch(getListings(filterTerm))

this is better done using a button / onClick / callback ->

<button onClick={() => dispatch(getListings('rising'))}>Rising

=== below is included for reference tp the past ===
filter and search

• I think the requirements mean by "filtering by preselcted categories" refers to these categories in the Reddit nav bar ->

best / controversial / hot / new / random / rising / top

filtering should be handled using Switch / Router / set endpoint in listingsSlice.js