Build a movie app with help of powerfull technologies like React js,Next Js,Tailwindcss. In this huge build we have created a hero page,home page,details page and also trailer popup screen. All data getting from TMDB api fetching in real time.

Hero Page

Home Page

Details Page

Trailer Popup screen

Key Features

Nextjs server side rendering
Next Router used for routing
Nextjs image component
Next Js google authentication
TMDB api used for all data
Session stored in firebase database.
Animation effect on hover
Carousel
Sticky navbar
Super responsive

Key Technologies

React.js
Next.JS
Next js Auth
Next js router
Next js Server side rendering(SSR)
Nextjs Image
React responsive carousel
React Player
TailwindCSS
HeroIcons
Firebase
TMDB api

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).