mah51/scuffedmdb

An open-source website to rate movies watched with friends, made with next.js & chakra-ui. Hosted on vercel.com.

Hi there, I'm Michael! 👋

Hi, I'm a uni student learning to code...

Previous projects:

• ScuffedMDB - movie rating website, a superior replacement to the old movie-web!
• ScuffedMDB Bot! A bot that provides a nice integration with a discord server for the ScuffedMDB website
• My personal website - mikeroph.one, to show off some of my projects and maybe start a blog.
• The Discord bot: MikeBot - Not hosted currently due to expense.
• A react website dedicated to counting grid squares with worm tracks. (pretty niche 🧐 )

Ask me about anything here

scuffedmdb's Issues

Swap ordering of users in userlist page

Show newest users at the top by default, or allow option to sort newest-first (as they are the most likely to need attention)

Also a good place to test pagination

Review modal auto-popup via url

Be able to direct link a film page and have the review modal automatically pop up on load.

Potentially use url parameters to keep life easy. Something like "?review=true"

Auto-fill modal with old details when editing review

If someone clicks add/edit review on a film that they already reviewed, prefill their previous scores in the form (the comment would also be nice but doesnt matter as much)

Filter by genre should act as AND instead of OR with multiple genres

Description

.

In relation to...

A component

Justification

.

Proposed Solution

No response

Additional Information

No response

Set a new film via API

Description

There may already be a way to do this but it would be great if there was a way to add a new film with an API call

In relation to...

API route (/pages/api/*)

Justification

Would allow automation to take over the only admin task of running it :D

Proposed Solution

1. Could be by supplying the TMDB ID
2. Could also be by supplying the Name+Year

I guess #1 is least hassle to implement, basically shortcutting your searching pipeline

Additional Information

No response

Make ScuffedMDB a proper PWA

Description

Allows for:

1. Users to install on devices
2. Users to access offline (will also therefore help with the perception of load times)
3. Ability to get notifications (e.g. new film)

In relation to...

Other

Justification

Is cool tech, and easy to implement at the most basic level given you've already done most of the hard work with Lighthouse.

Proposed Solution

No response

Additional Information

No response

Back button on film page

Suggest a back button to the left of the cog button to (more obviously) signpost a way back to the main grid/list page

"Edit review"

Have the "Add Review" buttons be displayed as "Edit Review" if a previous review by user is in db

Clicking on film titles links to the film page

In all places where film titles are listed (home page & user profile page) have it link to respective film page

Anonymous Reviewers

Description

Ability for users to have a toggle in their profile page (by that i mean just the userpage but show some options if the user=currentuser).

Reviews would just display with "Anonymous" and default image (i'd be temted to keep the real discriminator though)

Bonus points if profile picture has different colours, based on discriminator maybe?

In relation to...

Other

Justification

Anonymity provides a shield for people to say what they really mean

Proposed Solution

No response

Additional Information

No response

Review modal does not autoselect movie when opened from movie details page

Remove/Hide option to select film in review modal when on film page

If film is auto-selected (when modal launched from film page) do not show the option to select film, to regain space in the modal & reduce clutter.

Bonus Points: When a film is selected, change the modal title to be "Review: [film name]" or similar.

Wrong type on user in /user/_id page

Delete reviews by id not just by user its an absolute mare lmao

Allow users to remove reviews from their user page or the movie details page

Film images are stretched when comments are long on user's page

If a user has a comment longer than 2 lines in height then the film image gets stretched

Highlight the "current"/most recent film

Description

Make the current/most recent film more visually captivating when on the main page.

Good options:

1. Making it a hero at the top (is how i used to do it) - e.g. "with image background" on here: https://pro.chakra-ui.com/components/marketing/heroes. Would position this above the "Watched X films" title text
2. literally just different card styling, make the most recent one light purple with white text

In relation to...

Other

Justification

visually grab the attention and make a more satisfying call to action for reviewers

Proposed Solution

No response

Additional Information

No response

Effects of Markdown visible when typing comments

Behaviour that matches Discord in that you can see see Markdown symbols but it's all formatted as it would look.

Top Movies Tier List

Description

• Ability for users to build their own tier list to document their favourite films.
• Ability for users to view a ScuffedMDB "community" aggregated tier-list
• Ability for users to search and add films, rather than a pre-defined list

Example: https://tiermaker.com/create/best-movies-of-all-time--448373?presentationMode=true

In relation to...

Other

Justification

fun

Proposed Solution

No response

Additional Information

No response

Comments with lists have the dot/number appear off-screen left on mobile view

Description

If a comment has a list in it, then when viewing from mobile the dot or numbers are not visible

Link to Reproduction

No response

Steps to reproduce

No response

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

Film Genre colours on main page often revert to red

The film genre colours do not always match with those shown on the film page - where they are consistent.

On the main grid layout they are usually either red/cyan.

Custom Error page

Rework all types, as it is pretty scuffed atm

Suggest Films for review

Description

Ability for reviewers to suggest films for future reviews.

Search imdb/tmdb (like the "add a film" functionality there already for the admin)

Have it go to a separate table/page in admin ui - could do some action buttons

Nice to have option for bot to notify a separate channel on submission

In relation to...

Other

Justification

fun

Proposed Solution

No response

Additional Information

No response

Navbar "Add Review" and/or "Add Film" buttons currently force the dropdown button off screen on mobile

On mobile, the nav bar gets quite cramped with both the add review + add film buttons present, meaning the profile-picture button for the dropdown renders off-screen and is inaccesible.

It would be good to either move the "+add film" button (or both buttons if you prefer) to the dropdown menu.

You could also just do a "hide on sm/md screens" if that's easier.

Site-wide next-seo checkup

Seems to no longer work in a few places again - prob best to take it out and plan it out properly with defaults + hierarchies for each "page"/"screen" type.

Use of Chakra "Skeletons" when waiting for new data

Primarily for situations where there would be old data already in it's place like viewing movie pages one after another

Rich(er) text input

Investigate rich text input/storage in mongo/output in comments.

• Ability to capture and show new paragraphs

• Can include the basic Bold/Italic/Strikethrough

• No need for hints/UI as long as standard entry style works (same as slack/discord/github e.g. *word* and _word_ )

Usernames for comments on the film pages have their tails (ygj) cut off

Any lowercase letters with a hanging part get cut off

Investigate option to call webhook on events

e.g. notify a discord bot when someone submits a review with at least the film info + username in the payload.

Make the "Read-only Mode" alert persistent (but close-able)

Imho, either: Keep the same alert-box but move it to the bottom of the screen (out of the way) and make it persistent.
or:
Have an alert be the top element in a page (moving everything down 10px or whatever)

Preserve ingress link when user needs to auth

If a user clicks a direct link (e.g. to a film page), but they need to log-in to view, they get put on the front page after auth is complete.

I think this is router-history functionality but not sure.

Review comments cut off on mobile view

On a film page, the user-generated comments are rendering lines of text wider than the page-width, so some words are missed before a new line.

Mongo DB error next auth

Description

When I tried to deploy mu own version of this, I get this error:

[next-auth][error][adapter_connection_error] 
https://next-auth.js.org/errors#adapter_connection_error MongoError: bad auth : authentication failed
    at MessageStream.messageHandler (/workspace/dashboard/node_modules/mongodb/lib/cmap/connection.js:299:20)
    at MessageStream.emit (node:events:513:28)
    at MessageStream.emit (node:domain:489:12)
    at processIncomingData (/workspace/dashboard/node_modules/mongodb/lib/cmap/message_stream.js:144:12)
    at MessageStream._write (/workspace/dashboard/node_modules/mongodb/lib/cmap/message_stream.js:42:5)
    at writeOrBuffer (node:internal/streams/writable:391:12)
    at _write (node:internal/streams/writable:332:10)
    at MessageStream.Writable.write (node:internal/streams/writable:336:10)
    at TLSSocket.ondata (node:internal/streams/readable:754:22)
    at TLSSocket.emit (node:events:513:28)
    at TLSSocket.emit (node:domain:489:12)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at TLSSocket.Readable.push (node:internal/streams/readable:228:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23) {
  ok: 0,
  code: 8000,
  codeName: 'AtlasError'
}

Link to Reproduction

No response

Steps to reproduce

No response

Browser

No response

Operating System

• macOS
• Windows
• Linux
• IOS / Android

Additional Information

No response

Toggleable list/table view for homepage

As a user I would like to be able to toggle the list of film cards into a table or list view to allow me to see more films (and their score) on a page.

Public Page

Description

Ability to view the films+scores without signing in.

Could anonymise all names & hide comments to keep things kosher with the private group.

In relation to...

Other

Justification

Would be easier to sell the idea if non-users could see what actually goes on behind locked doors

Proposed Solution

No response

Additional Information

No response

Ability to compare reviews with other users

Description

Not sure how this would work but could be interesting to compare how I feel about films versus one/more other reviewers.

This would also lend itself to any future comparison features

Button on someones profile to "compare with"

In relation to...

Other

Justification

fun

Proposed Solution

No response

Additional Information

No response

Review page anchoring on mobile

When you click view on a film, have it anchor to the top-of-page on load.

Currently it will change page but still be scrolled down to where you were on grid page (e.g. could be linked to the comment section immediately)

Investigate cog button usage on film page

Potentially change cog button to be:
Separate buttons:

• Back button
• Share
• Add Review

Then either have admin buttons or return the cog of justice to condense admin options

Genre pages

When clicking on any of the film genre's, it takes you to a page of all the film's filtered by that genre (not just as primary genre but any that contain it in the array).

Genre page design could be very close/identical to the current main film grid/table, with the "We have reviewed XX films" title replaced with the genre name.

Vertical bounding of movie banner image gets broken when the description is too long

Only visible on desktop, check my review for The Hunt for Red October as example

imdb import

Description

adding 4500 seen movies is a bit dificult, a import would be great :)

In relation to...

A component

Justification

got to many seen movies in my life

Proposed Solution

No response

Additional Information

No response

Settings page for website config

Description

e.g. ALLOWED_USERS, COLOR_THEME, SITE_NAME & SHORT_SITE_NAME.

In relation to...

Other

Justification

changing env variables on vercel requires a re-deploy which may become a drag when regularly adding users to the website or changing theme etc.

Proposed Solution

Mongoose collection with one document containing settings. Have a web page /settings accessible by admins to change the settings.

Additional Information

No response

Minor tweaks to "Edit Review"

1. The logic for changing the title works great with one exception; if you open the modal from a movie it defaults to Add, even if a previous review exists (and pre-populates) - potentially a different nesting of the if statements would be a quick fix.

2. The "Add Review" button on the film page (in cog menu) remains as "add" even if you are editing a review, which is inconsistent. Having it switch to "Edit Review" with something like AiOutlineEdit as the alternative icon would complete the whole flow.

Disable/hide "Add Review" for Viewers (those without review rights)

For users without the review priviledge, you can still see (and click) the "+ Add Review" buttons - even though they dont trigger an action.

Potential solution: Either "isDisabled" the button (so it's greyed out) or replace with "No Review" text or hide button where possible.

Add option for brand logo

Can keep it optional like with .env SiteName so it defaults back to that, and if not then SMDB default.

test of the new trello issue workflow

This is a test :)

Accessing direct link when logged out gives 500 error

if you're accessing an external link to a film, the direct link will give you a 500 rather than ask you to login first