https://github.com/fuocy/moonlight-films

Moonlight | Hot TV Show/Movie Watching Website.
https://github.com/fuocy/moonlight-films

movie swiper watching

Last synced: 6 days ago
JSON representation

Moonlight | Hot TV Show/Movie Watching Website.

• Host: GitHub
• URL: https://github.com/fuocy/moonlight-films
• Owner: fuocy
• Created: 2022-07-19T00:42:33.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-22T14:14:00.000Z (over 1 year ago)
• Last Synced: 2024-05-30T11:19:40.566Z (6 months ago)
• Topics: movie, swiper, watching
• Language: TypeScript
• Homepage: https://moonlight-films.vercel.app/
• Size: 4.93 MB
• Stars: 120
• Watchers: 7
• Forks: 50
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Moonlight Films

Hot TV Show / Movie Watching Website

## Live demo

Official website: [https://mymoonlight.vercel.app/](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](https://i.ibb.co/4WM6xSp/home.png)

![Screenshot 2](https://i.ibb.co/CB0694y/detail.png)

![Screenshot 3](https://i.ibb.co/Vxf85Kh/watch.png)

![Screenshot 4](https://i.ibb.co/B2yQtvZ/explore.png)

![Screenshot 5](https://i.ibb.co/NY0kLHD/bookmark.png)

![Screenshot 6](https://i.ibb.co/P5pzbzf/search.png)

![Screenshot 7](https://i.ibb.co/kqc377t/profile.png)

![Screenshot 8](https://i.ibb.co/HzWYzVB/comment.png)

![Screenshot 9](https://i.ibb.co/5BhLp4x/auth.png)

![Screenshot 10](https://i.ibb.co/fGgp0P0/moonlight.png)

![Screenshot 11](https://i.ibb.co/z6JSPYj/404.png)

![Screenshot 12](https://i.ibb.co/LrYHgCF/mobile.png)

## 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 👈