mattburnett-repo / reddit-client Goto Github PK

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

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

"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

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

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

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 -> ???

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

there is an optional PWA task.

maybe come back later to this...

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

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

• 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.

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