The goal was to code a functional website with beautifull animation and learn the technologies on the way. The whole site is inspired from netflix design and i have taken many references and code examples from other github repos.

I have added a very small admin panel with a few functionality, integrated login to learn express and database. There is nothing fancy.

Here you can find the live demo site

• Client
• Admin Panel

Just sign in anonymously to see the panel

✔️    Custom Video Player with netflix like functionality
✔️    Display Movies from database that is added from the admin panel
✔️    Search by movie title
✔️    Category related page with infinite scroll
✔️    Detail modal with movie informations
✔️    Admin panel to add or remove movies
✔️    Automatic data fetch from TMDb api using TMDb id and populate the form
✔️    Loading Skeleton
✔️    Responsive Layout

• React
• React Hooks
• Tailwind Css
• Redux
• Redux Toolkit
• Redux Query
• SwiperJS
• Framer Motion
• React Icons
• Formik
• Express JS
• Mongodb
• Mongoose

Home Page

Detailed Modal 


Custom Video Player

Tmdb Auto Movie Info Generate 


Search

• Install mongodb if you don't have it already and create a database named arrowflix.

• Clone the project

  git clone https://github.com/muhon9/arrow-flix.git

• Go to the project directory

  cd arrowflix

• Install dependencies

  npm install

  npm run install-dependencies

• All the dependency of client && server will be installed

• This project has two part

• Create an empty .env file in /server, copy /server/.env.example contents into it, and fill in your necessary setings

# Url of mongodb
MONGODB_URL =mongodb://127.0.0.1:27017/arrowflix

# JWT secret key
JWT_SECRET=thisisasamplesecret
# Number of minutes after which an access token expires
JWT_ACCESS_EXPIRATION_MINUTES=2
# Number of days after which a refresh token expires
JWT_REFRESH_EXPIRATION_DAYS=30
# Number of minutes after which a reset password token expires
JWT_RESET_PASSWORD_EXPIRATION_MINUTES=10
# Number of minutes after which a verify email token expires
JWT_VERIFY_EMAIL_EXPIRATION_MINUTES=10

• Create another empty .env file in /client, copy /client/.env.sample contents into it, and fill in your necessary setings

REACT_APP_TMDB_API_KEY=put your tmdb api key here
React_APP_BACKEND_ROOT =http://localhost:8000/api
REACT_APP_PROD_PORT =8001

• Request an API key from TMDB and them add it to the .env file

• Go to root directory /arrowflix and run development server

  npm run dev

• You can run the frontend and backend seperately if you want

Before starting 🏁, you need to have Git and Node installed.

There are a lot of things missing. It is not a production ready project. I have learned a lot of thing during the development

[email protected]