ScuffedMDBWeb DevelopmentNext.JSChakra-UIMovie Rating

Big changes I made to ScuffedMDB.

Michael Hall

• October 01, 2021

1,350 words • 7 min read • ––– views

My new movie rating site, ScuffedMDB.

Introduction

About two months ago I wrote a blog post about my experience with ScuffedMDB and how I made it, since then I have made some pretty big changes, and I wanted to share some of them with you.

As I explained in my previous blog post, I made this website to rate movies with my friends, without any annoying ads or annoying UX features, it does what it says on the tin. It has come to the point where it is open source and takes less than fifteen minutes to setup your own instance, if you want to do so there are instructions on the repo. It is completely free to host thanks to the brilliant Vercel platform.

User Experience

When weighing up my changes, I decided to highlight the UX changes first. UX is very important to keep the site simple and easy to use which is what I really care about.

Say no to modals

On the original site, there was one main home page, and then three individual modals, one to add movies, one to add reviews, and one to see the details of a selected movie. Having this arrangement was a shortcut, as it was easier to code, but after I posted it to reddit it was quite clear that this was a very confusing way to display information. So I endeavoured to make a movie details page that was able to display more data and be slightly more intuitive.

New movie details page

I am happy how this page turned out, and I am able to display a lot more information about the movie in a way that isn't cluttered.

Editing reviews made easier

Another big UX improvement is related to editing reviews, previously there wasn't an 'editing' state while writing reviews, submitting a review would overwrite the previous. I changed this so the review modal would pre-populate with the old review. Now you don't have to re-type out a whole review just because you made a typo!

Editing a review with autofill

However, this didn't come without its challenges. As I wanted to be able to make the review modal accessible from the movie details page too, I needed to be able to share context around the web app, showing what movie is currently selected in the modal and whether it is open or closed. Thankfully I was able to do this by using react-context.

Allowing the review modal to be opened by any component

To allow other components to utilise the review modal I had to use React's useContext function. Whilst this is a perfect scenario to use react-context, it was still a new feature to me, so I had to do some googling.

I use a ModalContext file to initiate the methods and properties I want the context to have.

utils/ModalContext.ts


  export const ReviewModalContext = React.createContext<ReviewContext>({
    isOpen: false,
    onOpen: () => {},
    onClose: () => {},
    movie: null,
    setMovie: () => {},
  });

These properties are then initialized in the pages/_app component.

pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps): React.ReactChild {
  const { onOpen, onClose, isOpen } = useDisclosure(); // A chakra-ui utility to open and close modals
  const [movie, setMovie] = useState<SerializedMovieType<
    ReviewType<PopulatedUserType>[]
  > | null>(null);

  return (
      <ReviewModalContext.Provider
        value={{ isOpen, onOpen, onClose, movie, setMovie }}
      >
        <Component {...pageProps} />
      </ReviewModalContext.Provider>
  )
}

This then allows me to utilise the useContext function to open, close, or set the movie for the modal.

import { useContext } from 'react';
import { ReviewModalContext } from './utils/ModalContext';

function SomeComponent() {
  const { onOpen, onClose, isOpen, setMovie } = useContext(ReviewModalContext);

  return <Button onClick={onClose}>Close modal!</Button>;
}

Changing authentication provider

Whilst this doesn't initially seem like a UX problem, the old auth I was using was botched together from some code I found online. This caused a few problems, such as the user being logged out every time they closed the browser. As my understanding of JWT tokens and cookies is criminally minimal, I decided to switch to next-auth.

This basically handles all of the authentication, and was very simple to configure the basic functionality, however I did struggle extending properties on the user component.

Additionally, this allowed me to add quite an important feature for those who wish to use this as a closed off community. You can now set a list of discord ids in ALLOWED_USERS in .env.local. This function is called on every log in attempt and goes through each discord id to check if the user logging in is in that list:

pages/api/[...nextauth].ts


async signIn(user, account, profile) {
  const ALLOWED_USERS = process.env.ALLOWED_USERS;
  if (ALLOWED_USERS) {
    if (
      ALLOWED_USERS
        .replace(/\s/, '')
        .split(',')
        .includes(profile?.id as string)
    ) {
      return true;
    }
    return false;
  }
  return true;
}

Performance

Using the next/image component

Whilst this is very easy to implement, it provides a great improvement in page load performance. You have probably already seen it in action, every image on this blog is only loaded as it scrolls into the viewport. This component will also resize, optimize, cache and serve the images in modern formats such as WebP. This provided a huge improvement in page load speed, however there is still room for improvement here. Together the SSR and cold-start take longer than I would like, but that is the draw-back with serverless hosting and once warm, the page load times are fast enough. For more information on the next/image component you can read the next/image docs.

Small improvements

There are many other small improvements that I have made, but I don't have time to go into them all, or we would be here all day. So instead I am just going to whack them all into a list!

Allow host to change the accent colour throughout the website via the .env.local file.

Website with a teal accent color

Implement a mobile nav with hamburger button (much like the one on this site).
Markdown support for review comments.
Hide your discord image on the site, it is replaced with a default discord image.
Show the most recent movie on a card at the top of the page, allowing the user to open a review modal with one click.
Filter movies by genre.
Added a table view so users can scroll through the content a lot faster.

The new table view.

- Added support for webhooks and made a discord bot to send details about movies and reviews to a discord server once added. (Okay... this isn't a small one, I'll have a seperate blog post on this :))

An quick note about typescript

For the majority of the time typescript has been amazing, however I have had a bit of trouble trying to integrate it with all the different User instances. For example, if it is serialized, from next auth, from mongoDB etc, the properties on the object change as do their types. I tried a few different tricks but have settled on leaving it unsolved for now. It got to the point where it would take more time to solve the typescript issue than any issues that came around from the unknown types.

Edit on github