All Projects

MovieFinder

01.Description

MovieFinder allows users to find a random movie at the click of a button, search movies by genres, keywords, release year, or rating. It utilizes server side rendering to create a swift user experience achieving Google's Lighthouse scores of 100 across all metrics. The backend consists of a PostgreSQL database integrated to the frontend with Prisma and is deployed on Vercel.

02.Motivation & Challenges

I built this project as I've always had trouble deciding which movies to watch. The central idea behind the application was having the ability to find a random movie through the click of a button.

One challenge I faced was accessing an API endpoint from the client side without exposing the API key. I was able to accomplish this by using Next.js' built-in API routes where I passed params to the route which is located on the server. On the server I then fetch the data and send a response back to the client side where it is rendered. I also learned how to integrate an API (TheMovieDB) into a project and ensure proper practices of protected information.

03.Tech Stack

Next.js TypeScript NextAuth PostgreSQL Prisma MaterialUI TailwindCSS