Moonlight Films

Hot TV Show / Movie Watching Website

Live demo

Official website:

Movie sources

The Movie Database API

Main technology used

  • ReactJS, Typescript, TailwindCSS
  • Redux-Toolkit
  • React-Query, Axios
  • Firebase
  • Swiper
  • React-AutoAnimate, React-Select, React-Toastify, React-Circular-Progressbar, React-Infinite-Scroll-Component, React-Lazy-Load-Image-Component, React-Icons, React-Router-Dom
  • Formik, Yup


  • Well-designed homepage/detail/watching pages.
  • Sort/filter (query-params based).
  • Search by name, with suggestion keywords, filter result by type.
  • Skeleton loading, infinite scrolling, query-based pagination and smooth animation.
  • Authentication by email/password or Google/Facebook. Fully validated sign-up form.
  • Bookmark favourite films, store recently watched films. Allowing to edit films list: Select All -> Clear.
  • Profile page: allowing to change profile photo, name, email, password, verify, delete account after reauthentication.
  • Comment: Allowing to give reactions, see who reacts to a comment (sorted and filter out the 3 most popular reactions), reply to a comment, edit, delete, hide, sort by latest/popular and load more comment.

Screenshots, Preview

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

Screenshot 6

Screenshot 7

Screenshot 8

Screenshot 9

Screenshot 10


From July 19, 2022 to August 9, 2022

? If you like this project, give it a star ✨ and share ??‍? it to your friends ?


View Github