JoshDoes.Work

Rate My Clip

Rocket League clip posting & rating.

A website to upload Rocket League clips for people to watch, rate and comment on.

View Live Demo

Built With

Next.JSPrismaAuth.JSTailwind

Goals

The core objectives driving this projects development and design

Allow users to upload clips with a title and tags.

Allow users to comment and rate on other clips.

Provide a streamlined and performant experience.

Key Features

Discord Integration

OAuth authentication

Admin Panel

Challenges & Solutions

Challenge: Relational Database

For the website to work, I needed a relational data structure. Users had clips, clips had comments & ratings, users had comments & ratings, and so on.

Solution

I added and configured Prisma ORM and used code-first migrations to define the relationships.

Challenge: Authentication

I wanted to tie clips to specific users, so I needed a way to authenticate the users.

Solution

I used a beta version of Auth.js to use OAuth from the user's Discord account. This handles the session management and authentication.

Code Highlights

Discord OAuth

Let the user authenticate with Discord and then create a user in our database linking the two together.

1    async signIn({ user }) {
2      const existingUser = await getUserByEmailWithProfile(user.email ?? '')
3      const email = user.email as string
4      if (!existingUser) {
5        try {
6          await prisma.user.create({
7            data: {
8              email: email,
9              isExternal: true,
10              profile: {
11                create: {
12                  name: user?.name as string,
13                  photoUrl: user.image ?? '',
14                },
15              },
16            },
17          })
18        } catch (e) {
19          if (e instanceof Prisma.PrismaClientKnownRequestError) {
20            console.error(e.message)
21            return false
22          }
23          throw e
24        }
25      }
26      return true
27    },

Knowledge accquired

Key insights and knowledge gained throughout this project

💡

Became much more familiar & skilled with the OAuth 2.0 standard.

💡

How to use server components and server actions in Next.js

💡

How to integrate with YouTube APIs

💡

How to use Prisma ORM and migrations.

Want to see more?

View All Projects