Skip to content

fuocy/moonlight-films

Repository files navigation

Moonlight Films

Hot TV Show / Movie Watching Website

Live demo

Official website: https://mymoonlight.vercel.app/

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

Features

  • 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

Screenshot 11

Screenshot 12

Start

From July 19, 2022 to August 9, 2022

How to clone this project

You have to create an account on the website: https://www.themoviedb.org/ to get the API KEY. You then create a file named ".env" in your root project folder.

In that file, assign the API KEY that you get from the previous step to a variable named REACT_APP_API_KEY (it has to be this specific name).

It looks like this: REACT_APP_API_KEY = a8a6fa2f944128e971223235bc3cxxxxx

👉 If you like this project, give it a star ✨ and share 👨🏻‍💻 it to your friends 👈

About

Moonlight | Hot TV Show/Movie Watching Website.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages