/filme_js

**** MOVIE VERSE is a Movie Web Application that replicates the popular features of Netflix. It is built using advanced JavaScript tools, including React.js, Redux, Material UI.

Primary LanguageJavaScript

MOVIE VERSE MOVIE VERSE

screencapture

About   |    Features   |    Technologies   |    License

🚀 "MOVIE VERSE Demo🚀


Summary of the Contents (Click here to Expand it!)
  • About
  • Features
    • Toggleable NightMode
    • Navigate with an AI Assistant when in the EN-US language
    • Expanding and Responsive Menu Hamburguer with Avaliable Genres and Categories
    • Up to Date Movie Cards dynamic generated via API acting as Links to Movie Details
    • Rating and Tooltip of ?/10 of each Movie Card on Hover
    • Dynamic Genre list generated via API
    • Search for any Movie using the SearchBar
    • Create your account to save your favorite movies and see personalized recommendations.
    • Movie Details with:
    • Titles, Taglines, Ratings, Genres, Overview, Top Cast
    • Links to Website, IMDB, Trailer Modal with embeded Youtube Video, Favorite Option and Watchlist Option
    • Recommendations of Movies based on your Favorites, Watchlist and History
    • Actor Details with:
      • Birthday
      • Biography
      • Movies it was casted also
    • Profile Details with:
      • Favorite Movies
      • Watchlisted Movies
  • Technologies
  • Installing and Contributing
  • What have i learned?
  • License
  • Contributors
  • Author


🚀 Website Page ON

📌 About

MOVIE VERSE is a Movie Web Application that replicates the popular features of Netflix. It is built using advanced JavaScript tools, including React.js, Redux, Material UI.

Track all your Movies with MOVIE VERSE, never miss the latests and popular Movies, and easily Learn more about its Details, Cast and Save as Favorite or to Watch Later.

⚙️ Features

🧷 Toggleable NightMode

  • On the Navigation Bar you can easily toggle between Dark and Light modes using the First Icon (Second Icon on Mobile).

🧷 Menu Hamburguer ( Mobile Friendly )

  • On Mobile the Fixed Menu turns into a Expanding and Responsive Menu Hamburguer with Avaliable Genres and Categories.
  • Clicking on any of the Options refreshes the Movies and Closes the Menu.

🧷 Search Bar

  • Search for Movies Names using the search bar in the Middle of the Navigation Bar.

🧷 Profile Account

  • Create your account to save your Favorite Movies and see personalized recommendations.

🧷 Movie Details

  • Up to Date Movie Cards dynamic generated via API acting as Links to Movie Details.
  • Movie Details Page with the following Features:
    • Titles, Taglines, Ratings, Genres, Overview, Top Cast.
    • Links to: Website, IMDB, Trailer Modal with embeded Youtube Video, Favorite Option and Watchlist Option.
    • Recommendations of Movies

🧷 Actor Details

  • Birthday, Biography.
  • List of Movies it was casted also on the Recommendations at the Bottom.

🧷 Profile Details

  • List of Favorited Movies on the Account.
  • List of Watchlisted Movies on the Account.

💻 Technologies

In this project it was utilized: Javascript, React && Redux ToolKit, MUI, Alan AI, ESLint

  • JavaScript - The Programming Language.
  • React && Redux ToolKit - The Builder of User Interfaces and responsible for Persisting Data and Dynamically Consuming APIs.
  • MUI - The Page layout, Responsiveness and Style
  • ESLint - The Tool that makes your Code Clean.

📦 Installing and Contributing

To get started, fork the repository and then run the following commands:

  1. Install NPM packages
npm install
  1. Configure your .ENV Get a free TMDB API Key at - https://www.themoviedb.org/.
REACT_APP_TMDB_KEY=<put your key here>
  1. Start the Local Server
npm run start
  1. If you have problems connecting with REST Calls, disable any Adblock/Ghostery or similar extensions.

☕ What have i learned?

With this project i was able to further advance my Technical Skills and Knowledge with React and Javascript in general, using Redux Toolkit to persist my Data and RTK Query to easily integrate the whole Aplication by Dynamically Consuming APIs
It was also my first contact with Material UI (MUI) and i love how simple it is to create Good and Responsive Styles with its suite of UI tools full of fully-loaded component library. Its also easy to Integrate your Custom Styles with it too.
Got to learn how to Use and Integrate a Personal AI Assistant on the Application, capable of Interacting with different Options and Making Actions via English Voice Command.
I learned how to setup and configure ESlint to my needs to mantain Clean and Formatted Structured Code.
Also learned the one of the best Refactoring and Componentization Practices on the actual Market.

📝 License

Distributed under the MIT License.

🤝 Contributors

Thanks to the following people who contributed to this project in some way:

Nobody yet, see something that you want to improve on this project? Share it with me!.

Author

Made with 💜 and dedication by me Alin TIMIS

Acknowledgments

Used resources: