🎬 Moviepedia

A responsive movie information website built with Angular, powered by the public TMDB API. Browse what's now playing, what's coming soon and what's popular around the world — then dig into cast and crew details for any title.

🔗 Live demo: https://ruston-rny.github.io/movie-pedia/home

---

✨ Features

• Upcoming movies carousel on the home page (slick carousel, autoplay, fully responsive).
• Movie catalog with category filters — Now Playing, Upcoming and Popular.
• Movie search from the header search bar, available on every page.
• Load more pagination instead of page numbers.
• Detail modal with poster, synopsis, director and cast list, fetched on demand.
• Scroll animations with AOS and a mobile-first layout that works down to small phones.
• Lazy-loaded routes — home, movie and about are separate bundles.

🛠 Tech stack

Area	Tools
Framework	Angular 11.2.14 (Angular CLI)
Language	TypeScript 4.1
Styling	SCSS, Bootstrap 4.6, ngx-bootstrap
UI extras	ngx-slick-carousel + slick-carousel, AOS, Font Awesome 6, jQuery
Data	TMDB API v3
Testing	Karma + Jasmine (unit), Protractor (e2e)
Hosting	GitHub Pages

📋 Prerequisites

• Node.js 12.x or 14.x — Angular 11 does not run on newer Node versions.
• npm 6+
• A free TMDB API key — sign up at themoviedb.org, then grab the key from Settings → API.

🚀 Getting started

# 1. Clone the repository
git clone https://github.com/ruston-RnY/movie-pedia.git
cd movie-pedia

# 2. Install dependencies
npm install

# 3. Add your TMDB API key (see below)

# 4. Start the dev server
npm start

Open http://localhost:4200/ — the app reloads automatically when you edit a source file.

Configuring the TMDB API key

The key lives in src/app/shared/service/api.service.ts. Replace the placeholder with your key including the api_key= prefix, because the value is concatenated straight into the query string:

// src/app/shared/service/api.service.ts
API_KEY = `api_key=YOUR_TMDB_API_KEY`;

The base URL is configured per environment in src/environments/ and points to https://api.themoviedb.org/3/.

⚠️ Note: the key is bundled into the client build, so anyone can read it from the shipped JavaScript. That is fine for a public read-only TMDB key on a demo project, but never commit a key you care about — use your own and keep it out of shared branches.

📜 Available scripts

Command	What it does
npm start	Dev server at http://localhost:4200/
npm run build	Development build into dist/movie-pedia/
npm run build -- --prod	Optimized production build
npm test	Unit tests via Karma + Jasmine
npm run e2e	End-to-end tests via Protractor
npm run lint	TSLint check

🗺 Routes

Path	Page
/home	Landing page — hero banner, upcoming carousel, about + contact sections
/movie	Movie catalog, defaults to Now Playing
/movie/:type	Catalog filtered by now_playing, upcoming or popular
/movie/search/:keyword	Search results
/about	About the project and the developer

/ redirects to /home.

📁 Project structure

src/
├── app/
│   ├── components/          # Reusable UI: banner, list-movies, section-thumb, contact-us
│   ├── layouts/             # Header (nav + search) and footer
│   ├── pages/               # Lazy-loaded feature modules
│   │   ├── home/
│   │   ├── movie/           # movie.module + movie-list (catalog & search)
│   │   └── about/
│   ├── shared/service/      # ApiService — TMDB HTTP calls + error handling
│   ├── app-routing.module.ts
│   └── app.module.ts
├── assets/
│   ├── image/               # Icons, illustrations, profile images
│   └── sass/                # Shared variables and base styles
└── environments/            # API base URL per environment

🙌 Credits

• Movie data and images courtesy of The Movie Database (TMDB). This product uses the TMDB API but is not endorsed or certified by TMDB.
• Icons by Font Awesome and Flaticon.

👤 Author

Ruston Efendi — Frontend Engineer

📄 License

Personal portfolio project — free to explore and learn from.