/hulu-clone

Hulu clone with Next.js and Tailwind CSS

Primary LanguageJavaScript

hulu clone

Language Framework Release

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.