Skip to content

ki321g/MovieAPP

BranchesTags

Repository files navigation

MovieAPP React App Assignment

Full Stack Development 2, HDip in Computer Science

This repository contains my submission for the Movie assignment which was to the update the Full Stack 2 labs Movie Application.

Name: Kieron Garvey

Video Demo: https://youtu.be/rXJJLXb5JFc

Deployed URL: https://kgmdb.vercel.app/

FEATURES

I made alot of changes hoping for a clean and simple design. My application features a straightforward and user-friendly interface.

  • Comprehensive Movie and TV Show Aplication:
    • I updated the API Integration with The Movie Database (TMDb) API to provide extensive information on Movies, TV Shows and Actors.
    • Extensive list of endpoints used to fetch data such as popular movies, upcoming releases, top-rated TV, see API ENDPOINTS below for a full list.
  • Custom Theming:
    • Pagination Application-wide theming using a custom palette to match branding and design preference.
    • Consistent use of colors, typography, and spacing.
  • Home Page:
    • Default scroll bar disabled on the page.
    • Custom scroll bar to only scroll Movies\TV Show List
    • Pagination support for Movies\TV Shows
    • Search\Sort Feature
      • I added a search feature to teh home page.
      • Once any of the Selects are changed the application makes a call to the API and the Movies list to the right is updated
      • You can search by
        • Media Type: (Movies or TV Shows)
        • Genre This list changes based on what _Media Type _was selected
        • Date From\To Using google and found that TMDB has movies from 1888 to 2024 so the select has an entry for every year. I added in a feature which resets the search if your Date From is more current that your Date To and vice vers.
        • Rating is based on a rating of 1 to 10
      • Sort By You can sort the Movies\TV Shows by the current relevant TMDB sort criteria for each Media Type selected.
      • Reset Search resets all the search elements to defaults.
    • Movies\TV Show Results
      • Displays search results in the Movie/TV Show List which contains Movie/TV Show Cards for all teh Movies\TV Shows returned
  • Movie/TV Show List:
    • Pagination i have pagination throughout the site on all lists.
    • Sort I added a sort feature where you can sort by Date, Rating & Popularity but it only works on the current displayed movies. In my HomePage i have a sort that sorts it via the API call.
    • Filter: Did't change much bar UI changes.
      • Filter by Genre
      • Search
  • Movie/TV Show Card Design:
    • The Card is a 3D transformable element on hover the card flips and displays the overview of the Movie/TV Show.
    • Contains Links to the Movie/TV Show Details page.
    • Favourites Add\Delete button only available when user logged in on different endpoints
    • Add to Playlist button only available when user logged in on different endpoints
  • Movie/TV Show Details Page:
    • I got a lot of enjoyment out of putting this together trying to mimic the layout on TMDB a little.
    • The main Image is the first image in the list of images returned from the get images API call.
    • Heading: I made the Title the main heading on the page
    • Sub-Heading: I used a mixture of Release Date, Genres and converted the runtime to hours and minutes.
    • Tagline: change the CSS to make the tagline stand out from the rest of the text.
    • Vote Average: I used the Material UI Box, CircularProgress & Typography components to build i circular progress bar based on the vote_average returned for each movie/TV show.
    • Buttons: I Added three buttons to the center of the screen
      • Reviews: Displays the Reviews in a drawer for the movie/TV show
      • Watch Trailer: Opens a Modal which starts playing the movie trailer.
      • Movie Home: Opens a new window/tab displaying the movie/TV show website.
    • Cast\Actor List:
      • Each main member of the cast has its own card which has a transition on hover and is clickable bringing you to the Actors details page for that actor.
      • I redesigned the scroll bar under the actors list.
    • Similar Movies/TV Shows I added a component under teh details which contains similar Movies/TV Shows which has pagination.
  • Actor Details Page:
    • Similar to "Movie/TV Show Details Page"
    • DATE OF DEATH only visible if the Actor has died.
    • Credits: Displays the actor credits for both Movie and TV Shows.
  • Fantasy Movie:
    • The Add Movie component allows you to add a movie with teh "Movie Genre" list being populated from TMDB Api
      • If there is no image i have a custom one already designed.
    • Fantasy movies are displayed beside the Add movie form and you can see all users Movies.
    • Not done but need to do: I had most of it done on my first design but forgot to add it to the is page
      • Update Movie Image
      • Delete Movie
      • Update Movie
  • Playlist Component:
    • You'll find this on the Movie Cards in the Upcomming Movies.
    • Create new Playlists
    • Delete Playlists
    • Add to existing playlists
    • The Component displays the image fo the movie your adding to a playlist.
  • Playlist Page:
    • All Movies in all Playlists are show first but there is a drop down (built dynamically for each user, based on the lists they create) which will filter out all movies bar the ones in the list.
  • Favourites:
    • Movies Favourites
      • ADD To Favourites Logged in User can add movies in any of teh movie endpoints to the favourites
      • Favourites Page Pulls all the favourites from teh favourites table in Firebase and displays them on the page.
    • TV Show Favourites I spent a long time on this but it wouldn't work for me. I wasn't getting any errors. but when my addToFavourites call was made it just skipped over it. Even with console logs in place and an await it just did nothing
  • Login Page:
    • I used Firebase Authentication for all Login\Sign-Up.
    • Users can
      • Login (signInWithEmailAndPassword) with email and password
      • Sign-up (createUserWithEmailAndPassword) with email and password
      • Login\Sign-Up with Google Popup (signInWithPopup).
  • Hamburger Menu:
    • I redesigned the site menu so it is hidden unless teh Hamburger is clicked.
    • Menu Icons added relevant icons to each menu item.
    • Sub Menus can be extended for hidden.
    • Protected route menu items are not displayed unless logged in.

Setup requirements.

Clone this Repository

  git clone https://github.com/ki321g/MovieAPP.git

To get a copy of the project running on your system, navigate to the project directory in a command prompt/shell and run the following:

  npm install

This will install all dependencies in package-lock.json

While dependency are installing, rename .env_example to .env manually or if your in the correct location use the below command in the terminal

mv .env_example .env

Edit .env with your TMDB API Key and your Firebase details.

After dependency installation has completed run

npm run start

This will load the application and start a local server on port 3000.

http://localhost:3000/

API ENDPOINTS

Movie, List of Movie endpoints used:

List of TV Series endpoints used:

List of Actor endpoints used:

ROUTING

Below are both Public and Protected Routes, along with all routes within them.

Public Routes

  • /: Home Page which contains the Movie\TV Show Search.
Movies
TV Shows
Reviews
Actor
Actor

Protected Routes

THIRD PARTY COMPONENTS/INTEGRATIONS

  • API Integration with TMDB:

    • Pagination Robust integration with TMDb API to fetch detailed information on movies, TV shows, and actors.
    • Use of multiple API endpoints to provide users with a rich browsing experience.

  • Firebase Backend Services::

    • Firebase Authentication to manage user sign-in and security for protected routes.
    • Firebase Storage to store Fantasy Movie Images
    • Firebase Database for retrieval of user-specific data such as Favorites, Playlists, Movies in Playlist.

  • react-google-button (https://www.npmjs.com/package/react-google-button) component, used to display the sign in with google button on the Login page.

  • @mui/system (https://www.npmjs.com/package/@mui/system) component. MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.

  • @mui/x-date-pickers (https://www.npmjs.com/package/@mui/x-date-pickers) component. This package is the Community plan edition of the Date and Time Picker components. It's part of MUI X, an open-core extension of MUI Core, with advanced components.

  • dayjs (https://www.npmjs.com/package/dayjs) component. Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

  • mui-nested-menu (https://www.npmjs.com/package/mui-nested-menu) component. This package provides components to let you nest menu items infinitely deep.

  • react-select (https://www.npmjs.com/package/react-select) component. The Select control for React

INDEPENDENT LEARNING

MY THOUGHTS ON COMPLETION OF ASSIGNMENT

I learnt a lot extending this Movies Application from the HDip Full Stack 2 Labs. I have already bought a course on UDEMY which is 68 hours long which i want to go though.

Developing this Application during teh summer months I took too much of a break after my holidays and I ran out of time to do everything i wanted. There is some of my code in my Routes that I should have broken out into individual components to reuse through out the script. I'll be doing this on my next react project.

I think ill enjoy React, I hope to be able to use it in my working environment soon.

AI DECLARATION

I wanted to make it clear that I did use AI during this project in Visual Studio i have GitHub Copilot Extension installed and I used this to help me with:

  • Troubleshooting: I would copy errors from terminal or chrome console and paste them into copilot to try figure out where the bugs were happening in the application. It was very useful most of the time but sometimes lead to other issues.
  • Building Boiler Plates: For example ill use the home page. I asked Copilot to build me some sor tof grid using Material UI elements which had a left panel and a right one which contained two elements. What it gave me back was the my starting point to building the page.
  • Inspiration: I was lost a few times trying to figure out what to do and just asked for AI for its opinion. Telling it what i was doing and what i like it came back with a few nice helpful suggestions to get me going.

About

Movies Application built around TMDB API & Firebase

kgmdb.vercel.app/

Topics

react typescript firebase-auth firebase-database firebase-storage tmdb-api firebase-authentication vite

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages