putnam14 / reading-length-2.0 Goto Github PK

Related books need to be styled, with images a proper size and four per row on full-screen. Flexbox will be good for this, try experimenting with creating 'card's for each book.

Will need to break out a new component, RelatedBooks with RelatedBooksStyles.

Make each book link to their book detail page.

Not every user/visitor to the site needs to see the Price component. Crawlers and spiders come to mind. Making API calls to Amazon each time googlebot visits a page is not ideal.

No code change (or minimal) should be required.
Do not really need to migrate the database...
Follow this tutorial: https://www.prisma.io/tutorials/deploy-prisma-to-digitalocean-ct12
Use a $80/mo droplet with weekly backups.

Current Heroku deployments are spendy ($100/mo) and memory is already thrashing.

Do issue #62 first, since that might be nicer afterwards with a clean database.

Bringing the price query into the prices component will allow the book pages to render before loading price data.

MVP with the search component. Leave comments as a reminder for when I can tell what books are popular.

Most online retailers require you to pull price information every time a page is loaded. This ensures the price isn't stale. We should start off including at least Amazon and Powell's. Need to research Amazon's ToS and if using Amazon data is allowed if also using Powell's affiliate link.

For some reason the image alt text blows out the page width on Safari mobile. ???

Found using web.dev
https://dequeuniversity.com/rules/axe/3.1/aria-valid-attr-value?application=lighthouse

When a user presses the search button there is no indication that anything is happening. I'm sure there are other places where this might happen. NProgress would be a good visual indicator.

/book/isbn-1234567890/ should 301 redirect to /book/isbn-1234567890. Same goes for the WPM pages. Slash was the default on the old Reading Length, so without this fix many old links will break.

Need to move to the PA API 5.0, there's a Node SDK

With 48.5% users being mobile, this is a big UX breaker.

Need to have the search bar on mobile display the label above the input and set a max width to 100vw.

Looks cool.
https://nextjs.org/blog/next-8

Subtasks:

• Figure out how to set up next.config.js and the @now/next builder (Do we still point it to package.json or the config?)
• Use the next.config.js instead of env-config and babel for setting environment variables

For some longer books, wordcounts are awfully low. The Big Short says 17 minutes. This ain't right. Maybe put in a check for minutes < page count if the number of pages is over 100? Want to be cognizant of issue #4

Need to add "#ad" near each affiliate link and revise the amazon associate disclaimer.

Need more tests pls

Some shorter books have audiobooks with a length in minutes less than the page count of the book. We shouldn't ignore these. The check for length < pages is only useful for huge books (Ulysses, War and Peace, etc.). 350 pages could be the cutoff.

The title needs to either be truncated or the background color needs to extend further down dynamically

The BEM model looks nice and could help the CSS be more maintainable.
http://getbem.com/introduction/
https://www.toptal.com/css/introduction-to-bem-methodology

Create a loading component that doesn't look horrible and uses NProgress.

Inputs on iOS are rounded and buttons are invisible. I'm betting it has to do with some weird iOS overriding of borders.

Not quite sure how to go about this, but it looks less than ideal when the background of the searchbar is white, then the page header is gray which fades to white.

It should fade from transparent to white/background color.

See: vuejs/vue-cli#3407

Found using web.dev
https://dequeuniversity.com/rules/axe/3.1/aria-required-children?application=lighthouse

Powell's has a 'Partner' program, but they are not currently accepting applications. My older Partner account appears to have been made inactive. Will need to check back up on this at a later date.

Related issue: #12

Usually all you need to do is refresh the page when this happens...

Until issue #51 can be resolved, the apollo client will need to be modified to fetch the queries before rendering a page. I imagine this will be a performance hit, and not sustainable once we do user functionality.

Background: Crawlers need to have access to meta tags for the book pages, which are populated after the queries are ran.

Wordcount's should be more descriptive. '123456 words' -> 'Estimated at 123,456 words based on audiobook length' or 'Estimated at 123,456 words based on page count'
Alternatively:
123456 words
Estimate based on audiobook length

Instead of a 2x2 grid, I think a list would look better on smaller screens.

https://www.prisma.io/blog/mongodb-preview-ow4wahkekaep/