Skip to content

enszrlu/hulu-clone

Repository files navigation

Hulu Clone

This is a practice project to test different technologies I have learned.

Table of contents

Overview

Functionality

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Technologies:

  • Server side rendering
  • Integrate tmdb API
  • Custom hover bounce on icons
  • Loading bar
  • Pagination on Homepage to discover more movies & TV series
  • Search ability with search box toggles when clicked to search button
  • Pagination on search for movies & TV series
  • Placeholder poster for movies & TV series that does not have poster
  • Collections
  • Collections when clicked opens a page that shows all movies
  • Movies when clicked opens youtube trailer
  • Firebase Integration
  • Account Section with email auth
  • Payment with Stripe
  • Saving bookmarks
  • Recommendations based on saved bookmarks

My process

Built with

  • Next.js & React.js
  • tailwindcss - CSS Framework
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • tmdb API
  • Youtube Database v3 API
  • Firebase Authentication
  • Stripe
  • Firestore

What I learned

  • Integrate API (tmdb & youtube)
  • Pagination with Material UI
  • Multiple fetch requests
  • Dynamic Components
  • Server-side rendering
  • Firebase Database(Firestore) and Auth
  • Stripe Integration

Preview

Links

Screenshot

Author

About

Hulu Clone Built with Next.js React.js and Tailwindcss

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published