zero-to-mastery/breads-client

Keep track of what you read online and see what your friends are reading.

zero-to-mastery

Zero to Mastery Open Source

breads-client's Issues

Add tags to user aside

• Top tags - display all in order of most used
• Most recent tags - display all in order of most recently used
• selectors for correct tags
• when clicked, filter readings list to display readings with that tag

Ideas for improving ListItem

https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254

make more of a link preview w/ images/video

Update reading from user profile

Users should be able to filter in order to see all readings that didn't extract data correctly, and be able to update those readings from their profile

Error displayed when deleting a reading

e[r].filter is not a function

Check readings and list reducers

Begin implementing Redux style guide

https://redux.js.org/style-guide/style-guide

• structure files as feature folders or Ducks
• normalize complex nested/relational state
• use static typing
• Do not mutate state
• Reducers must not have side effects
• Do not put non-serializable values in state or actions
• only one redux store per app
• use Redux Toolkit for writing Redux Logic
• Use Immer for writing immutable updates
• put as much logic as possible in Reducers
• reducers should own the state shape
• name state slices based on the stored data
• treat reducers as state machines
• model actions as events, not setters
• write meaningful action names
• allow many reducers to respond to the same action
• avoid dispatching many actions sequentially
• evaluate where each piece of state should live
• connect more components to read data from the store
• use object shorthand form of mapDispatch with connect
• call useSelector multiple times in function components
• use Redux DevTools extension for debugging
• use plain JS objects/arrays for state

Video info extraction

Users should be able to save a video and the listitem should display the video title, description, number of times watched by breads users, and video watchtime

User sees error when they haven't read any articles

Redux state

Redux state needs updating to better handle async data.

https://redux.js.org/advanced/async-actions#designing-the-state-shape

Error occurs when switching tabs after deleting reading

TypeError: Cannot read property 'domain' of undefined

Readings List optimization

Reading List loads all data at the same time and places on the DOM. Here are a few resources to look into:

Windowing
How Twitter solved this issue

Success alerts

User should see a success alert after the following actions:

• uploading an article
• updating a reading
• deleting a reading
• following a user
• unfollowing a user
• updating user profile

Followers tab and list

Users should be able to see who follows them.

A tab should be placed next to the 'Friends' tab on their user aside

Global List optimization

The Global page displays most recent readings from everyone, but I'd like it to be a "Trending" page. Here is a good place to start:

Designing Facebook's Newsfeed

Users cannot update their account information

Users should be able to see their current account info (first name, last name, email address, username, image url) and update it

User aside display error

The user aside flashes the incorrect user for a brief second when switching between Global, Your Reads, and Subscriptions tabs

Image doesn't cover listitem background on mobile

Performance Updates

• optimize images
• optimize delivery
• critical render path
• code splitting (Part 2)
• React Performance Optimizations
  • Change out moment.js
  • Create notifications component so the whole navbar doesn't rerender on notification updates
  • why do components render multiple times? Should I change how data is loaded? they should render twice
  • add react bootstrap
  • add react window
• PWA checklist
• caching

WebPageTest Feedback

• compress API responses (Part 3)
• compress Cloudinary images
• use progressive JPEGs
• cache static assets in the browser (Part 3)

PageSpeed Insights Feedback

• text compression (Part 3)
• next-gen image formats
• encode images
• defer offscreen images
• properly size images
  • change standard breads image
• code split (Part 2)
• use efficient cache policy (Part 3)

---

See above

• remove unused CSS
• remove unused JS
• eliminate render-blocking code
• avoid enormous payloads
• minimize main thread work
• reduce JS execution time
• avoid chaining multiple requests
• add performance budgets/reduce requests count and transfer sizes
• limit large contentful paints
• avoid long main tread tasks

Prevent NSFW photos

https://shift.infinite.red/avoid-nightmares-nsfw-js-ab7b176978b1

App crashes when uploading article on user homepage, then switching to global page

has to do with selectors and mapping over the data

Add dark mode

Checkout darkmode.js

https://darkmodejs.learn.uno/

Update tests

Show loading status on async requests

Whenever the user needs to wait for data, show a loading status

User Aside

The User Aside should change based on the readings list the user is viewing - Global, their own, subscriptions, another user's, etc. Right now it only changes between their own and another user's.

When on Global and Subscriptions, the user should see stats based on the last 24 hours of readings.

Website best practices

Look through this list and apply what is relevant

https://www.freecodecamp.org/news/101-ways-to-make-your-website-more-awesome-79c934dd2a11/

Normalize State Shape

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

https://egghead.io/lessons/javascript-redux-normalizing-the-state-shape

Multiple routing bugs

• When user switches from one user's readings list to another, it doesn't load
• When user updates their info, it displays in readings, but not in user aside
• User's notifications hit 0 only after refresh
• User should see their new reading without being sent to global page

Ads

Add advertisements to breads.

Right side of screen
every 10-20 readings

Update manifest.json image files

404 page whenever reloading on any route other than "/"

Any time a user reloads a page that is not the root route, Nginx shows 404 Not Found page

Add 404 redirect page

Add number of times an article has been read

Update old reads

Old reads do not display meta info like article image and description

• Add update button for each reading
• make visible only to certain users
• a month

Refactor code for more clarity

make code more readable by doing the following:

• more, and clearer, variable names (e.g. comparisons inside if statement should be put inside variable
• group by function - global reading list component has too much spaghetti code
• (for backend) - turn model classes into modules

Reading form location

User should see the reading url form at the top of the webpage whenever on mobile.

Use the order property to move it from the bottom

Navbar hamburger doesn't open on signup/signin page (maybe in iOS safari too)

Users should be able to click/touch the hamburger menu to display navbar features

currentUser name not updated, but username in user list is updated

Updating user info

Info user should be able to update:

• Image
  • (should be default image when account is first created)
  • crop
  • rotate
• first name
• last name
• email
• username
• password
• delete

Save article feature

Users should be able save an article to read for later.

Listitems should display a tab for number of times an article is currently saved to read for later

Update site theme

Default Text

The user should see a default text placeholder whenever they don't have any readings, subscriptions, and when the article title is blank or the same as the domain name

Authorized routing

User who are not signed in should only be able to see global readings list - any other page should receive a 'you must be logged in' prompt

https://css-tricks.com/react-router-4/#article-header-id-8

Add tagging

Add tagging features to readings

Users should see their friends list when logged in, and have to navigate to the global/trends list

Update tags in List Item

• When a user clicks on a tag, app should display every reading with that tag

• Tag name should be displayed in Title with tag reading stats

• Tag list on a List Item should be scrollable or expandable

• User should be able to edit tags:

  • add
  • update
  • delete

Show more info related to user's reading data

most read domain
option to list favorite reading
number of domains read from
number of subscriptions and subscribers

On search, display filtered list when user hits 'enter'

Make listitem responsive to multiple line titles and descriptions

Users cannot reset their password if forgotten

Add favorited option to ListItem

User can access website on 3 urls

User should be redirected to https from both plain http and breads-client url