michaelboyles / flamewars Goto Github PK

Allow users to be able to authenticate via Twitter. Currently only Google is supported

https://developer.twitter.com/en/docs/authentication/guides/log-in-with-twitter

API gateway can validate requests against schemas ("Models"). It would save some effort of spinning up the lambda, and may be good protection against malicious requests (e.g. extremely long request body).

Only problem is that it seems that it does not support $ref, which the FW schemas use. Maybe we can have some build step which flattens the $refs in the schema by pulling in any dependencies

Be careful of XSS (which right now React protects again inherently)

Current deployment is fairly manual, would be good to automate with CloudFormation

Currently there's a "Load more button" after the first page of items. It would be better if there was infinite scroll - when user scrolls to the button, auto-load in the next page of items.

Probably a good idea to make this toggle-able.

If a comment has a reply and that reply is subsequently deleted, the parent comment's number of replies is not updated to reflect that deletion.

Causes bad UX where a button can read "View 3 replies" and, once clicked, only 2 replies appear.

Consider using a Dynamo transaction to update both rows https://aws.amazon.com/blogs/aws/new-amazon-dynamodb-transactions/

It'd be nice to have an admin console in AWS

Features:

• View all comments for site
• Delete comments
• Approve comments (maybe comments with suspicious links require approval first)
• Block users
• Turn comments off
• Give users a label that appears next to their name e.g. Michael [Site Owner]

More?

Things to think about

• How to authenticate? IAM?

Allow Facebook authentication. Currently only Google is supported

https://developers.facebook.com/docs/facebook-login/web/login-button/

Currently no avatars are used. It defaults to a boring SVG.

Seems Google avatar requires authentication token on the request. So we'd need to download it and store it in S3? I'd rather not... Maybe Twitter or Facebook are more permissive. Could just do a subset, whatever's easiest.

Or maybe just generate some random identicon for them, it's less drab at least
https://en.wikipedia.org/wiki/Identicon
https://www.npmjs.com/package/svg-identicon

You can close edits and replies by clicking Edit or Reply a second time but it's not obvious. It would be better if these forms had a 2nd button to cancel the action

Permalinks used to jump directly to a post (e.g. if 'Share' is clicked) when the user loaded the page. It still works but, since pagination was added (#17), only if the item is visible after the first GET. If the comment is a reply or isn't on the first page it will do nothing.

One way to solve this would be the change the initial GET request to add an optional query parameter e.g. ?permalink=some-comment-id. Then the back-end could make sure that item was included.

Also considering removing permalinks for now too.

User is automatically logged in, and has no way to sign out again

Not everyone will want the ability to embed images in the comments. Make this optional, part of the configuration.

It should be possible to get a permalink for a particular comment.

Navigating to a URL using comment permalink should jump the browser to that comment and highlight the comment somehow.

'Post' button should be replaced with sign in options to make it clearer to user that sign-in is required. Else they could write a long comment before realising authentication is required, and then give up - annoying.

Comment count includes comments that have been deleted, it should only count non-deleted comments

Currently it's possible to have a chain of replies that gradually become more and more indented. Past a certain point the reply area is really narrow and looks really bad. There's a lot of wasted space.

UserA 
   |-----> UserB reply
             |-----> UserA reply
                      |-----> UserB reply

Need to think of a way to solve this. Perhaps the way YouTube handles this is worth imitating. You can reply to a top-level comment, but any reply-to-a-reply is just placed in the same thread, it's not nested.

UserA
     |-----> UserB "@UserA you're right"
     |-----> UserC: "@UserA you're wrong"
     |-----> UserD: "@UserB he's not!"

I think Disqus does a hybrid, where it nests up to a certain point (around 4 levels) then does the YouTube style.

Currently, every single comment is loaded when the page load. It would be better if comments cut off after a certain point, with either a 'See more...' button, or maybe a trigger reacting to user scroll, that dynamically loads in the next batch.

In the simple case where every comment has no replies, this is really easy. Just sort by time and divide them into chunks.

When we take into account replies, it becomes harder to determine where the boundaries should be

Foo
 | ---> Reply
          |-----> Reply
Bar 

Think this will likely be related to #16, addressing the nesting problem

Add some basic styling

Users should be able to upvote and downvote existing comments. Comments should show the count of upvotes and downvotes

A logged in user should be able to edit their existing comments. It should display a marker "Edited" next to the timestamp to prevent abuse