Filmflix

https://hubkinza.github.io/Filmflix/

Purpose of the Project

Filmflix is a user-friendly movie browsing web app that allows users to discover, explore, and learn more about movies using real-time data from The Movie Database (TMDB) API. It aims to provide a clean, responsive, and engaging interface for users to search for movies, filter by genre or release year, and view detailed information like overviews, ratings, and posters.

Value for Users

Discover popular and top-rated movies instantly
Search for specific titles without leaving the page
Filter results by genre or release year for a more personalized experience
Responsive layout for seamless use on desktop and mobile devices
Clean, intuitive design to keep the focus on content

Project Structure

File/Folder	Description
`index.html`	Homepage with all movies and filters
`about.html`	Info about the website
`movie-details.html`	Details of selected movies
`top-rated.html`	List of top-rated movies
`static/css/styles.css`	Styling and layout for the entire site
`static/js/app.js`	API calls, filters, rendering
`static/js/movie-details.js`	JS for movie details page
`static/js/top-rated.js`	JS for top-rated page
`static/img/`	Image assets

Tools used in the project.

HTML5 – Markup structure of the website
CSS3 – Styling, layout, responsiveness
JavaScript (ES6) – DOM manipulation, API integration, filter logic
TMDB API – Provides dynamic movie data
Git & GitHub – Version control and deployment
GitHub Pages – Hosting the live version of the site
Figma - Creating wireframing and color pallete

Screenshots

Here are some screenshots of the final implementation:

Landing page

Movie Details Page

Top Rated Movies page

About page

User Stories

Home Page – Movie Discovery

Feature: View Top-Rated Movies
As a movie enthusiast,
I want to see a list of top-rated movies on the homepage,
So that I can quickly discover popular films.
Feature: View Movie Details
As a user,
I want to view details about a selected movie,
So that I can learn about its plot, watch trailer, and rating.

Search and Filter

Feature: Search by Title
As a user,
I want to search for movies by typing a title,
So that I can find specific films quickly.
Feature: Filter by Genre
As a user,
I want to filter movies by genre from a dropdown,
So that I can see only the types of movies I enjoy.
Feature: Filter by Year
As a user,
I want to filter movies by release year,
So that I can find older or newer movies more easily.

Responsive Design

Feature: Mobile Accessibility
As a mobile user,
I want the site layout to adapt to my screen,
So that I can browse movies comfortably on my phone.

About Page

Feature: Learn About the App
As a visitor,
I want to read a short description of what this site is about,
So that I can understand what Filmflix offers.

Error Handlingv

Feature: Handle No Search Results
As a user,
I want to see a message when no movies match my search,
So that I’m not left wondering if something broke.
Feature: Handle API Errors
As a user,
I want the app to notify me if the movie data can’t be loaded,
So that I know something went wrong and can try again later.

UI

Color Scheme

🎨 Color Scheme

Purpose / Element	Color Code	Description
Body Background	`#121212`	Main dark background color
Navbar & Sections	`#111111`	Used for navbar and filter section
Primary Text	`#ffffff`	Main text color for readability
Accent - Red Button	`red`	Highlight action like reset filters
Card Background	`white`	Movie cards and modal base color
Muted Text	`#939191`	Footer and secondary text