How to build a movie application using Next.js and Appwrite ?

In this tutorial we are going to build a movie application using Next.js , Appwrite, tailwind css, Digital Ocean and deploy it to Vercel.

Before going into coding. Let’s see a few details on the frameworks which we are going to work with.

Introduction:

Next.js: It is a React framework for building server side applications with more features like static rendering , Page based routing, smart bundling etc.

Appwrite: It is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application.

Tailwindcss: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Appwrite Setup:

First we need to setup Appwrite to use its back-end features. There are two ways which you can do it.

1. Docker ( Manual Configuration )
2. Digital Ocean droplets ( pre-configured )

I will be trying out both ways but , In this tutorial we will be going with the second way.

Note : There will be article on how to manually configure Appwrite using docker

Pre-requisite : You need to have digitalocean account

Click on this link to create app-write droplet.

Once you get to the on-boarding screen, choose a basic plan ( Shared CPU ) and for CPU options we will go with minimum requirements. Then create a SSH key and keep it safe. Once the above things are done click on create a droplet.

Head over to this link and wait for sometime so that the docker images are installed in the droplet.

Click on the get started link which will open a side navigation modal. Click on Quick access to Appwrite which will take you the Appwrite console. It will look something like this.

Note: If you have a custom domain you can also link it to the digital ocean droplet. Once that is done , Appwrite will automatically take care of installing the SSL certificates for that domain.

Now with console setup is done, you will have to create your account.

Once you have created your account, click on Create Project. We will name the project as Movie app.

Now we need to create a platform. Click on Add Platform and click on New Web App. Give the name of the web-app as Movie-web and hostname as localhost and click on Register.

Finally, the setup complete.

Let's create collection and add bunch of attributes.

Click on the database in the navigation menu on the left side. Click on Add Collection and create a new collection called Movies.

Now, head over to the collection and go to the Attributes tab and create the following attributes

Level 1 complete i,.e now our back end powered by Appwrite is ready to accept some data.

Nice work so far 👏 👏 👏.

Before setting up the front end , one small step we need to do that is getting the API key from the TMDB.

Head over the TMDB site and create your account. Once done go to this link and create your API Key. Keep it safe , we will needing them when we code the API.

Front end setup

Head over to the terminal and run the following command. This will create a boilerplate app which will contain the basic Next.js and tailwindcss code.

Now create your .env.local file at the root of your application and paste in the following

For APPWRITE_ENDPOINT, since we are using digital ocean’s pre-configured Appwrite droplet you will be seeing a IP address in your url bar.

You can find the APPWRITE_PROJECT_ID in your console settings.

For getting the COLLECTION_ID , head over to database/collections/settings to find the collection id.

We will be using Appwrite’s Server side SDK for our application. Let’s first install the dependency

Go to the terminal and type in the following command

Seeding the database:

Let’s create library function which will initialise the Appwrite SDK.

Create a new file called appwrite.ts under the folder lib and paste in the following code

How do you get the Server API Key ?

Go to the Appwrite console and click on the API keys

Create a new API key with the following scopes

Go to pages/api and create a new file seed.ts and add in the following code

Code walkthrough:

First, we initialise the sdk with help of the library function initAppwrite which gives us the instance of the sdk which we can use to create collections , documents etc.

In the API, we will get the page number as the query param which will be used, when fetching the movies from the TMDB API.

Once we get the response , we loop through movie results and create a document using database.createDocument method provided by Appwrite.

**database.createDocument** will take 3 arguments which is collection id , document id ( which we generate with help of the uuid package to give us a unique id for each document ) and finally the details for each document.

Now head over to the browser and type in the following url. Make sure your server is running.

If everything goes as expected , you should see a JSON response OK on your browser, alternatively you can head over to the Appwrite console and go to the collection to check if those documents are added.

Let’s do that.

Your browser should show something like this

Now our DB is successfully seeded with bunch of movie data.

let's get those movie from the database and display it on our application's homepage

Rendering movies in the Home page:

Let's create our layout component, so that every time we create our page we don't have to rewrite the same thing over and over again.

Create a components folder, inside that create layout.tsx file and paste in the following content.

Head over to your browser to see the layout changes.

We will create a API endpoint called getMovies and use them to fetch the data from the database.

In the API folder , create a file called getMovies.ts and add in the following content.

Code Walkthrough

In the above code we made use of the [listDocuments](https://appwrite.io/docs/server/database?sdk=nodejs-default#databaseListDocuments) method provided by Appwrite.

We will be able to get 25 documents by default from the database, which is why we will be passing the values of limit and offset as query parameter while calling the API.

What is Offset ?

Offset in this context is basically when you tell the Appwrite server to skip the number of records before fetching.

That did not make sense right.

For example, Let's say you want to go to page 2 , now you don't need to have the first 25 records , so you can mention in the offset param as 25 which will skip the first 25 records and get you the next 25 records to be displayed on the interface.

Let's write our UI code to call the API when the component mounts. In the pages folder create a file named index.tsx and add in the following content.

Code walkthrough

First when the component mounts , we set three local variables offset, page limit and page count. Then the useEffect runs fetching the movies and setting up the movie data.

we use the same data to render them in the screen.

Note: I have used useEffect to do a data fetching in the client side. Alternatively , you can also do a server side data fetching using getServerSideProps.

In the pagination component we use the relevant props to navigate between the pages.

Inside the components folder, create a new file called Pagination.tsx and add in the following content.

Code walkthrough

In the pagination component, handlePreviousPage and handleNextPage will take care of the navigating between pages ( takes care of setting up the offset value accordingly ) and then we disable prev and next button based on the offset value.

Head over to the browser to see the magic

Adding movies to the Database via form :

We are going to add the movie to the collection via a form from the browser.

Fun part is, we won't have to add to movie name , year or upload the image. TMDB API has a way to fetch the information using IMDB id.

The IMDB id in the url https://www.imdb.com/title/tt4154756/?ref_=hm_tpks_tt_i_2_pd_tp1_cp is tt4154756. Once we input the ID in the form , it will fetch relevant movie information and check if it is already in the database , if not it will add them to the database.

Let's see how we can do that. First as usual ,let's create our API endpoint.

Go to api folder and create a new file called addMovies.ts and add in the following content

As usual , we initialise the Appwrite SDK and then fetch the movie details using TMDB api. We check if it is a TV show related IMDB id has been entered and then we check if the document is present in the collection.

If the document is found, then we send in the response saying movie already exists. If it is not found then we add it to the collection.

Now onto coding the component. Create a file called add.tsx in the pages directory and add in the following content

In the component we get the IMDB id from the user and then we sent it to the API.

Based on the response we get from the API we create a movie and redirect it to separate movie page ( which we will be coding in the later part of this tutorial ).

Bookmarking the movie:

Let's code our last feature for the application, which is bookmarking the movie. We will first create our separate movie page and add in the bookmark. We will be using Next.js dynamic routes feature for this.

Create a folder called movie in the pages directory and inside that create a file called [id].tsx.

Now if we go to the url localhost:3000/movie/1 we can send the id present in the url to the API to get the particular movie detail.

Inside the [id].tsx file you created , add in the following content.

Note: We will be storing the bookmarked movies in the IndexDB. For that I am using a package called localforage.

Run this command to install the dependency

yarn add localforage

Since we are storing the movie id in our database , we pass it dynamically when the user visits the separate movie page. We use that in the getServerSideprops method to fetch the particular movie data.

Since we are not storing the particular movie data in the database , we use the TMDB API to fetch the movie information.

When the component mounts, we need to check whether the movie has already been bookmarked or not. For that we use useEffect combined with localforage method to get the bookmarked status.

When the user clicks on the Bookmark button , we then add the movie to localstorage list.

When you visit your browser , you should see something like this

Now that we can bookmark the movies, we need a place to render them. Let's quickly create a page named bookmark.tsx and add in the following content.

In this component , we simply fetch the data from indexDB and render it on the screen.

You should see something like this in your browser.

That's it. You can deploy the finished code to vercel.

Conclusion

That's pretty much it. Thank you for taking the time to read the tutorial. I hope , everyone understood how to create application using Appwrite and Nextjs.

If you found the post useful , add ❤️ to it and let me know if I have missed something or if you have any doubts in the code in the comments section.

Feedback on the tutorial is most welcome.

Repository Link: App write Movie

Deployed Link: appwrite-nextjs-movie.vercel.app

Digital Ocean Free $100 credits :(Not a compulsion to use this referral code )

Social Links:

Twitter Showwcase