hulu clone

About

This is hulu web clone build with Next.js and Tailwind CSS. The core functionalities of this build include:

• It is completely responsive
• I used heroicons in this project
• I used flexbox with CSS grid to support screen sizes upto 4K
• I used flipmove animation to switch between different movies on same page

Tech Stack

• Next.js
• Tailwind CSS
• Flexbox and CSS grid
• Heroicons
• REST API
• TMDB movie API

What I learnt

• Lazy loading using nextjs Image tag
• How to use images from external domains in nextjs (configuration)
• How to apply global styling in tailwind css
• bunch of new tailwind css styling techniques
• How to add custom screen sizes break point in tailwind
• How to use grid and flex together on different screen sizes
• How to add switch animation using FlipMove

Vercel Hosted Preview

You can check out hosted preview of app https://hulu-clone-nu-ten.vercel.app

Running locally

$ git clone https://github.com/haideratGitHub/hulu-clone.git
$ cd hulu-clone
$ npm install && npm run dev

Disclaimer

This build is purely for learning purpose. I do not own any logo/design or have any affiliation with hulu. This hulu clone is just to showcase my skillset in web app development in Next.js framwork.