Hot TV Show / Movie Watching Website
Official website: https://mymoonlight.vercel.app/
The Movie Database API
- 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.
From July 19, 2022 to August 9, 2022
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