MoShows - Movies and TV shows trailer showcase

With TMDB API, MoShows showcases a wide range collection of trailers. MoShows let movie or TV show lovers find the one they are going to watch next, all made easy with sort, filter, and search. (This is a project for practical purposes only)

Live Preview Photo

If you're interested in MoShows

You can fork or clone this repo and follow Installation guide

Or just take a look at the live deployed one

Features

• Custom carousel is every on MoShows, pardon me if you find them cumbersome
• Tab switch
• Sticky header
• Client routing
• Skeleton loading (At first, I thought this is the most complicated thing I would work on. After some research, it turned out to be the simplest)
• Pagination (server side)
• Sorting
• Filtering
• Video player modal

To name a few, head to live site to explore more and all are made possible by What I used

Installation

yarn or npm (note that you should remove yarn.lock first to use npm)

1. Navigate to the project directory (you've forked or cloned) and install dependencies

cd <prj-dir>

yarn # npm install

2. Set up environment variables

• First, create .env file
• Include these variables (head to TMDB API to get your API key and API access token)

# API Key
VITE_TMDB_TOKEN = <your API key, apologize for the misleading name :((>
VITE_TMDB_ACCESS_TOKEN = <your API Acess token>

# App related
VITE_APP_TITLE=<your title>
VITE_APP_BASE_API=https://api.themoviedb.org/3

# Image base
VITE_TMDB_CAST_BASE_URL=https://www.themoviedb.org/t/p/w138_and_h175_face/
VITE_TMDB_IMG_1X_BASE_URL=https://www.themoviedb.org/t/p/w220_and_h330_face/
VITE_TMDB_IMG_2X_BASE_URL=https://www.themoviedb.org/t/p/w440_and_h660_face/
VITE_TMDB_BD_1X_BASE_URL=https://www.themoviedb.org/t/p/w355_and_h200_face/
VITE_TMDB_BD_2X_BASE_URL=https://www.themoviedb.org/t/p/w710_and_h400_face/
VITE_TMDB_PF_1X_BASE_URL=https://www.themoviedb.org/t/p/w235_and_h235_face/
VITE_TMDB_PF_2X_BASE_URL=https://www.themoviedb.org/t/p/w470_and_h470_face/
VITE_TMDB_PD_BASE_URL=https://image.tmdb.org/t/p/w500
VITE_TMDB_POS_1X_BASE_URL=https://www.themoviedb.org/t/p/w300_and_h450_bestv2
VITE_TMDB_POS_2X_BASE_URL=https://www.themoviedb.org/t/p/w600_and_h900_bestv2
VITE_TMDB_HERO_BASE_URL=https://www.themoviedb.org/t/p/w1920_and_h800_multi_faces/

3. Run the local server and do whatever you want

yarn dev # npm run dev

What I used

• 
• 
• 
• 
• 
• 

Feedback for improvement

If you have any feedback, please reach out to me at

• Email: tmphat1312@gmail.com
• Facebook: Minh Phat
• Or just open an issue here

Project status

It's all basically done, but I'm willing to make some improvements if I have time

Any feedback is appreciated

License

This project is licensed under the GNU General Public License v3.0 license.