Video Reactions with Remix and GraphCMS

I'm super excited to share a video tutorial walking you through storing reactions to videos with GraphCMS.

When a user visits a page with a video, they can play the video and add a reaction at any point that the video is playing. There are four reactions we'll store, but you can add as many as you like if you're following along.

All of the code is available on GitHub if you'd rather skip to the fun stuff.

We'll be using Remix to:

• Fetch a list of videos
• Fetch reactions per video
• Handle actions for new reactions

Here's a quick peak at the code powering saving the reactions:

export let action: ActionFunction = async ({ request, params }) => {
  const { videoId } = params;
  const formData = await request.formData();
  const { timestamp, duration, emoji } = Object.fromEntries(formData);

  await graphcmsClient.request(CreateReaction, {
    timestamp: Number(timestamp),
    duration: Number(duration),
    emoji: String(emoji),
    videoId,
  });

  return redirect(`/${videoId}`);
};

As you can see, there isn't much to it! The only useState we have throughout the application is to store the seconds elapsed and the duration of the video.

const [secondsEnlapsed, setSecondsEnlapsed] = useState<number>(0);
const [duration, setDuration] = useState<number>(0);

Then, using the Remix Form component, we can capture the reactions of users. We'll specify different <button /> values (as enums stored in GraphCMS):

<Form
  method="post"
  style={{
    display: "flex",
    justifyContent: "center",
    marginTop: "30px",
  }}
>
  <input type="hidden" name="timestamp" value={secondsEnlapsed} />
  <input type="hidden" name="duration" value={duration} />

  <button name="emoji" type="submit" value="CLAP">
    👏
  </button>

  <button name="emoji" type="submit" value="HEART">
    ❤️
  </button>

  <button name="emoji" type="submit" value="SHOCK">
    😱
  </button>

  <button name="emoji" type="submit" value="EYE">
    👁
  </button>

  {actionMessage ? (
    <p>
      <b>{actionMessage}</b>
    </p>
  ) : null}
</Form>

I hope you enjoy the video! Let me know in the comments if you have any questions.