moonlight-films's Introduction

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

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 👈

moonlight-films's People

Contributors

Stargazers

Watchers

moonlight-films's Issues

When I self host it nothing is shown

npm ERR! code ERESOLVE -- 21:38:27.774 | npm ERR! ERESOLVE could not resolve 21:38:27.775 | npm ERR! 21:38:27.776 | npm ERR! While resolving: @formkit/[email protected] 21:38:27.776 | npm ERR! Found: [email protected] 21:38:27.777 | npm ERR! node_modules/react 21:38:27.777 | npm ERR! react@"^18.2.0" from the root project 21:38:27.778 | npm ERR! peer react@">=16.8.0" from @emotion/[email protected] 21:38:27.778 | npm ERR! node_modules/@emotion/react 21:38:27.778 | npm ERR! @emotion/react@"^11.8.1" from [email protected] 21:38:27.778 | npm ERR! node_modules/react-select 21:38:27.779 | npm ERR! react-select@"^5.4.0" from the root project 21:38:27.779 | npm ERR! 17 more (@reduxjs/toolkit, @tanstack/react-query, ...) 21:38:27.780 | npm ERR! 21:38:27.780 | npm ERR! Could not resolve dependency: 21:38:27.780 | npm ERR! peerOptional react@"^16.8.0" from @formkit/[email protected] 21:38:27.780 | npm ERR! node_modules/@formkit/auto-animate 21:38:27.781 | npm ERR! @formkit/auto-animate@"^1.0.0-beta.1" from the root project 21:38:27.781 | npm ERR! 21:38:27.782 | npm ERR! Conflicting peer dependency: [email protected] 21:38:27.782 | npm ERR! node_modules/react 21:38:27.782 | npm ERR! peerOptional react@"^16.8.0" from @formkit/[email protected] 21:38:27.786 | npm ERR! node_modules/@formkit/auto-animate 21:38:27.786 | npm ERR! @formkit/auto-animate@"^1.0.0-beta.1" from the root project 21:38:27.786 | npm ERR! 21:38:27.786 | npm ERR! Fix the upstream dependency conflict, or retry 21:38:27.786 | npm ERR! this command with --force or --legacy-peer-deps 21:38:27.786 | npm ERR! to accept an incorrect (and potentially broken) dependency resolution. 21:38:27.786 | npm ERR! 21:38:27.786 | npm ERR! 21:38:27.786 | npm ERR! For a full report see: 21:38:27.787 | npm ERR! /vercel/.npm/_logs/2024-01-19T05_38_26_324Z-eresolve-report.txt 21:38:27.787 | 21:38:27.787 | npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-01-19T05_38_26_324Z-debug-0.log 21:38:27.802 | Error: Command "npm install" exited with 1 `

Recommend Projects

fuocy / moonlight-films Goto Github PK