Overview

• Official website: https://net-film.vercel.app
• Author: Nguyễn Hoàng Lâm ( @lamhoang1256 )

Preview

Resources

• API: https://documenter.getpostman.com/view/18986031/UVXdNeFD?fbclid=IwAR3XYwO8C563AuepUFWNFDs9iJzc3jfTWybQRWUekZX4PNWeiGBum_CiRKk
• My API Docs: https://net-film.vercel.app/api-doc
• Font Family: Montserrat

Main technology used

• NextJS, Typescript
• Sass module
• Firebase
• Redux, Redux toolkit (State management)
• Axios, Swr (Support fetching data)
• Swiper (Slider), react-modal (Modal)
• React-toastify, react-hot-toast (Message UI)
• Next-swagger-doc, swagger-ui-react (Document API)
• Cheerio (Crawl data from website Loklok)
• react-hls-player (Media player video m3u8)
• Other: query-string, uuidv4, ...

Features

• Full HD movies with subtitles in many languages
• Suggested movies you may like
• Skeleton loading, infinite scrolling movie at Home page and Explore page
• Search movie by name, with suggestion keywords, filter movie by type (category, area, year,...)
• Profile page: allowing to change profile photo avatar, fullname, password.
• Comment: allowing to give reactions, see who reacts to a comment, edit and delete comment.
• Discovery movie trailer (Short videos like TikTok)
• Save history you watch, follow movie you like
• View information of the actors in the movie
• Read latest breaking movie news
• Optimize SEO and Responsive on many devices

Environment Variables

NEXT_PUBLIC_NODE_ENV = development (or production if deploy to vercel)
NEXT_PUBLIC_BASE_URL_API = https://ga-mobile-api.loklok.tv/cms/app
NEXT_PUBLIC_BASE_URL_API_SUB = https://mobile-api.netpop.app/cms/web/pc
NEXT_PUBLIC_SERVER = https://net-film.vercel.app (Link vercel)
NEXT_PUBLIC_LOCALHOST = http://localhost:3000

# See: https://firebase.google.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

Deployment

• Create a new project on the vercel dashboard -> Add Environment Variables from .env.example
• Go to Settings -> Functions -> Function Region -> Change the region to "Sydney, Australia"
• Redeploy the project

• If an error occurs npm ERR! code ERESOLVE, npm ERR! ERESOLVE unable to resolve dependency tree -> Change Install Command

• See more: https://vercel.com/changelog/customizing-the-install-command-while-creating-projects

Screenshots