Skip to content

Assignment from The Odin Project to learn and practice TypeScript, React, Firebase, Redux and API calls

License

Notifications You must be signed in to change notification settings

EpictetusZ1/movie-database-clone

Repository files navigation

Movie Database Clone

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.

features and entities

Project architecture

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

add review screen shot

An example review

review example

Watch later

watch later screenshot

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

    The movie database dot org
  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

About

Assignment from The Odin Project to learn and practice TypeScript, React, Firebase, Redux and API calls

Topics

Resources

License

Stars

Watchers

Forks