This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Tailwind CSS

This project uses Tailwind CSS base properties as class names for the tags to apply styles.

Tailwind CSS is a utility-first CSS framework that allows you to write more concise and maintainable code by using pre-defined classes to style your HTML elements.

In this project, Tailwind CSS is used to apply styles to HTML elements by adding class names to the elements. For example, to add a background color to a div element, you can add the class bg-red-500 to the element:

<!-- Add a background color -->
<div class="bg-red-500">This div has a red background</div>

<!-- Add a text color -->
<p class="text-blue-600">This text is blue</p>

<!-- Add a font size -->
<h1 class="text-3xl">This heading is large</h1>

<!-- Add a margin -->
<div class="mx-4">This div has a margin of 4px on the x-axis</div>

<!-- Add a padding -->
<div class="px-6">This div has a padding of 6px on the x-axis</div>

<!-- Add a border -->
<div class="border border-gray-200">This div has a gray border</div>

<!-- Add a responsive design class -->
<div class="bg-red-500 lg:bg-blue-500">This div has a red background on small screens and a blue background on large screens</div>

These are just a few examples of the many utility classes that Tailwind provides.

We can configure custom classes and plugins inside applications root directory tailwind.config.js file.

TMDB API Key

This project uses TMDB for fetching movies.

You can log into TMDB to create and account and get your API key.

After signin you can visit API section under user settings and generate an API key which can be used inside the local env file as:

TMDB_API_KEY

Configure Next Auth

This project uses next Auth for the user to authenticate.

Github authentication is linked to the application using GitHubProvider by Next Auth. Can be seen in the following directory:

src
└── app
└── api
└── auth
└── [...nextauth]
└── routes.ts

Add the following environment variables inside the local env file:

<!-- Set it to be your localhost for local dev server -->
NEXTAUTH_URL

<!-- Generate a random base64 number for the secret  -->
NEXTAUTH_SECRET

Use the following command to generate a random base64 secret:

# Generate rendom base64
openssl rand -base64 32

Copy the generated base64 secret and paste it as Next Auth secret.

Configure Github OAuth application to link your application to the github for GithubProvider authentication:

• Go to GitHub Developer Settings
• Create a new OAuth application
• Set the homepage url to http://localhost:3000
• Set the authorization callback URL to http://localhost:3000/api/auth/callback/github
• Register the application
• Generate a client ID and client secret
• Add the following generated keys against environment variables inside the local env file:

GITHUB_ID
GITHUB_SECRET

Setup SQLite Database with Prisma ORM

This project uses SQLite as the database and Prisma as the ORM. To set up the database, you need to run the following commands:

# install prisma
npm i -D prisma

# install prisma client to interact with
npm i @prisma/client

# initialize prisma in your work directory
npx prisma init

# this will generate a .env file if not exists with DATABASE_URL, which if you're not using you can replace it with given url below
# manually update the datasoruce in schema inside prisma directory generated by setting the following:
provider = "sqlite"
url = "file:./dev.db"

# or

# initialize prisma in your work directory with sqlite as datasource provider
npx prisma init --datasource-provider sqlite

Once you have installed and setup prisma you can create models inside the schema to migrate:

# run migration to the
npx prisma migrate dev

Enter migration name after that. It will generate a SQL file which can be viewed under prisma directory.

You can view your data in prisma client:

# start client server for prisma studio
npx prisma studio

Visit the URL provided by the above script execution.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.