Movie Database - find the perfect movie

What I built

The app that let's you discover more information about your favorite movie.

Category Submission:

Search No More

App Link

https://movie-database-33.vercel.app/

Screenshots

Description

Inside the app the main functionality is to quickly search for a movie that you are looking for. When typing you get autosuggestion with links to movies, or you can press enter to go to search page. On the top menu you can also go to all movies and filter or sort them as you wish. Clicking on single movie navigates you on the page with more information about it. There you will find a link to the page with all cast and crew.

To enable saving films to watchlist you need to login using your Google account. Then inside your profile you can see the watchlist.

Link to Source Code

https://github.com/eruj22/movie-database

Permissive License

MIT

Background

It was so exciting to learn about this hackathon, as I love to use MongoDB. The idea for it came rather easy, as I frequently use look up more information about movies to watch. It was a good challenge to make something similar on my own.

Inspiration for the layout came from TMDB, IMDb and Rotten Tomatoes. Color scheme was heavily inspired by socks that were a gift right before I started making the design for an app (not kidding, proof is in the image below).

Technologies used

• Next.js
• MongoDB
• Emotion
• NextAuth
• Typescript

How I built it

First phase of the app was sketching wireframes by hand and making a rough design in Figma.

Then it was time to set up database and basic search functionality. I have populated the data in the database using data from TMDB and modified it a bit for my use case. Next up I set up search indexes to search all movies and autocomplete. These were connected to the functions in App Services.

Moving on comes my favorite part, building out the frontend part of the app. The framework that helped me make data visible to users is Next.js.

First I made the hero page and a connection to the database. Next page was movies page, where you can filter through all movies. Clicking on single movie navigates you to the page with more data about the movie. Inside it is also a link to the page with all the cast and crew.

Search page is a page that you see when you submit search query. Inside it there is a search component (also on hero page) that uses the function in the MongoDB called searchMovies. This function searches through the whole database and returns what it finds.

exports = (title) => {
    let collection = context.services.get("mongodb-atlas").db("test").collection("singlemovies");

    const pipeline = [
      {
        $search: {
          index: "searchMovies",
          text: {
            query: title,
            path: {
              "wildcard": "*"
            },
            fuzzy: {}
          }
        }
      }
    ]

  return collection.aggregate(pipeline)  
};

The index field below is used inside the function on the top to form aggregation pipeline.

{
  "mappings": {
    "dynamic": true,
    "fields": {
      "title": [
        {
          "dynamic": true,
          "type": "document"
        }
      ]
    }
  }
}

Inside search component there is also autocomplete functionality that suggests movies based on what you type in. The function autocompleteMovies returns maximum 6 items and each field consists of only title and id.

exports = function(arg){
 let collection = context.services.get("mongodb-atlas").db("test").collection("singlemovies");

 let pipeline = [
    {
      $search: {
        index: "autocompleteMovies",
        "autocomplete": {
          "query": arg,
          "path": "title",
          "tokenOrder": "sequential"
        }
      }
    },
    {
      $limit: 6
    },
    {
      $project: {
        "title": 1,
        "_id": {"$toString" : "$_id"},
      }
    }
  ]

  return collection.aggregate(pipeline)
};

The function uses search index with index field set only to title and it starts suggesting when you write at least 3 letters.

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "title": [
        {
          "analyzer": "lucene.standard",
          "foldDiacritics": true,
          "maxGrams": 14,
          "minGrams": 3,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}

Last but not least is the login functionality. For this job I picked NextAuth as widely used solution for authentication in a Next.js app. In the app you can only login using your Google account.

In the end I have made final visual improvements in the app and took some time to correctly deploy it.

During the development I had a lot of fun. It is very satisfying to build something new. During the process I have faced many challenges and also successfully solved many of them.

One thing to note, there are only 40 movies stored in the database.

Thank you for reading.