🎥 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