Live demo 🔥 LIVE

How to start the Project!

Clone the repo in your machine!

git clone https://github.com/Milan-960/Moonlight-films.git

install the dependency

npm install

Run on the dev server

npm start

To be able to watch the movies you would need to have your API in .env

REACT_APP_API_KEY=MOVIE API

REACT_APP_FB_API_KEY=FIREBASE API KEY
REACT_APP_FB_AUTH_DOMAIN=FIREBASE AUTH_DOMAIN KEY
REACT_APP_FB_PROJECT_Id=FIREBASE PROJECT_Id KEY
REACT_APP_FB_STORAGE_BUCKET=FIREBASE STORAGE_BUCKE KEY
REACT_APP_FB_MESSAGING_SENDER_ID=FIREBASE MESSAGING_SENDER_I KEY
REACT_APP_FB_APP_ID=FIREBASE APP_ID KEY
REACT_APP_FB_MEASUREMENT_ID=FIREBASE MEASUREMENT_ID KEY

what this app will have

This app is about movie with using the movie database API. it will allow user to create an account and they also will be able to put commnets on in review section on the movie app. As well it it will allow user to stream movie online and can download the app.

Moonlight Films

Hot TV Show / Movie Watching Website

Movie sources API

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

• 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