danbamikiya / movie-finder

Explore movies 🎬, Watch their trailers 🎥, Check out its actors 👩‍🎤👨‍🎤.

🎥 Movie Finder 🦾

Explore movies and recognize its actors easily!

A web app for exploring movies, watching their trailers and checking out its actors.

movie.finder

more

---

✨ Features

• Movies Search (Search up your fav movies)

• Hovercard Info (Hover on each actor's names to view their pic and info)

• Movie Trailer (Watch a trailer of the movie you searched)

🌴 Branches

• main - production ready code
• staging - testing/development
• gh-pages - deployment of bundled app

⌛ Status

✅ Early Development: Start building a barebones version of the project (Movies Search).
⛔︎ Actor Face Recognition: Work on recognizing actor's faces from the movie poster - stopped. See #1.
✅ Hovercard Info: Displaying actor profile images and info.
✅ TypeScript: Converted codebase from JS to TS.
✅ Movie Trailer: Trailer for searched movies.
✅ Migration: Migrated from CSS to Sass.
✅ Caching: In-Memory cache for storing searched movies, document fragments, API requests/responses, images.
⌛️ Local Storage: Persisting cached data to local storage.
⌛️ Loading Status: Displaying loading effects when movies are searched.
⌛️ Redesign/write: Implementation of the 2nd re-design. See ARCHITECTURE.md.
⌛️ Recommendation Engine: Recommending movies to users. See ARCHITECTURE.md.

📚 Tech Stack

This is currently a frontend focused app so everything is browser rendered.

🎨 Frontend

Typescript . Sass . HTML (bundled with Webpack + Babel)

💫 Hosting

Github Pages (currently)

🚀 Continuous Deployment

Github Actions

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run start	Starts local dev server at localhost:8080
npm run start:remote-dev	Starts local dev server at localhost:8080 in a remote development environment eg: Gitpod
npm run build	Build the production site to ./build/
npm run build:serve-local	Build the production site to ./build/ and serve it locally

How To Run

Clone the app

git clone https://github.com/danBamikiya/movie-finder.git

Navigate to the cloned directory

cd movie-finder

Install dependencies

npm i

Add personal RapidAPI token (free)

We recommend setting this up when running the project locally, as we use the RapidAPI to fetch movies data.

• Sign up to create a RapidAPI account and follow these steps to get a RapidAPI token
• In local repo root directory: Make a copy of .env.example and name it .env
• Copy & paste your new RapidAPI token into .env

// .env Example (an invalid key):
RAPID_API_KEY=K6NUTARFJZJCIXHF1F1E1YGJZ8RQ29BE4U

Quick Start

• To run the development server:

npm run start

• To build the app:

npm run build

• To build and serve the production build locally:

npm run build:serve-local

movie-finder's Issues

Face Recognition

This was one of the OG features I had in mind when I started this project. It was supposed to work by recognizing actor's faces from the movie poster using the Face API library which is performant enough to run in the browser. But I decided to not continue with it as I was stuck on a bug with the way I was building it for tooo long.

Remove cheerio, use DOMParser API

I just found out the browser has a DOMParser API that provides an interface for parsing XML and HTML.

This can be used instead of Cheerio to parse HTML in the webscraper. Reducing the build size because Cheerio is adding a whooping almost 400 KiB as a dependency in production builds.

The total build size for all javascript files is 438 KiB as of the last build run out of which Cheerio is taking almost almost 400 KiB 🤯

Look for another Movies API

The current API I'm using to fetch movies doesn't have some latest movies like Loki, Black Window e.t.c
So I'll have to look for a new API to use.

I've tried OMDB API and it doesn't return sufficient data (only returns like 3 - 5 actor names, no trailer link) that I'll need.