Movie Database Clone

Table Of Contents:

1. Live Deployment
2. Getting Started
3. Description
4. Pictures
5. Functionality
6. Technologies Used
7. Things I Learned
8. License
9. Acknowledgements

Link To Deployment

🖥   View a live demo of this project at: Movie Database Clone

^{Back to top}

Getting Started

1. ⬇️ Clone the repository to your local machine

   git clone git@github.com:EpictetusZ1/movie-database-clone.git

2. Install project dependencies with npm

   npm install

3. 🏃‍ Run project

   npm run start

^{Back to top}

Description

An assignment from The Odin Project

The motivation of this project was to re-create a site and some of its functionality from scratch, using the current live version of it as a template.

Project Planning:

I have attempted to be as thorough as possible in the planning phase of this project. The following is the result of that effort.

Project architecture

Note: The project did not adhere to this plan verbatim, however, it provided an incredibly useful map to follow during development and helped me to build a well-structured project.

^{Back to top}

Pictures

Add a review

An example review

Watch later

^{Back to top}

Functionality

• Google Authentication
• Persistent "Watch later" list of movies, with ability to add and remove items at will
• A Global (app-level) state management using dynamic data from an API, Redux, and Firebase Firestore
• A Review system that lets any unique user leave a review on a movie to be seen by all others
• Review protection, can only edit review that was written by you
• Dynamically generated data from an API, the site has no data or assets (aside from icons and svgs) of its own

^{Back to top}

Technologies Used

• React
  • React Router
  • React Router DOM
  • Styled Components
• Redux
  • Redux DevTools
• TypeScript
• Jest

^{Back to top}

Things I Learned

• Data Modelling - especially in Firestore with Collection / Document / Collection / structure
• Redux, and its nuances like how it can be a bit verbose, but does provide incredibly stable application state management
• Dynamic Routes or Routes with parameters. The movie name gets spliced into the URL path on navigation to the movies detail page:

  <Route path={"/movie/:title"} element={<MoviePage />} />

• Client and server side permissions and validations

^{Back to top}

License

Distributed under the MIT License. See LICENSE.txt for more information.

^{Back to top}

Acknowledgements

This project makes use of two APIs

1. The Movie Database

   

2. The Open Movie Database

This site is not endorsed by or affiliated with IMDb.com in any way. This site was created and exists solely for the purpose of learning, if there are any issues with the use of any assets on the site, the author can be reached via this repositories contact information

Project was authored by Jack Heaton - (EpictetusZ1).

^{Back to top}