About | Features | Technologies | License
Summary of the Contents (Click here to Expand it!)
- About
- Features
- Toggleable NightMode
- Choose the Language of your choosing, PT-BR or EN-US
- 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
Filmpire is an AI-Powered Movie Web Application that replicates the popular features of Netflix. It is built using advanced JavaScript tools, including React.js, Redux, Material UI, and Alan AI.
Track all your Movies with Filmpire, never miss the latests and popular Movies, and easily Learn more about its Details, Cast and Save as Favorite or to Watch Later.
- On the Navigation Bar you can easily toogle between Dark and Light modes using the First Icon (Second Icon on Mobile).
Demonstration Gif (Click here to Expand it!)
- On the Navigation Bar you can easily toogle languages between PT-BR and EN-US.
- Changing Language changes the UI and the Data.
- When in EN-US, the AI Assistant is ENABLED.
Demonstration Gif (Click here to Expand it!)
- When in EN-US, the AI Alan Button appears on the Bottom Right Corner of the Screen.
- Make it Listen for Voice Commands after Clicking on its Icon ( Allow Access to Microphone First).
- Try to say "Help" or "What do you do?" to get an Overview about the Application and some Commands.
List of Commands (Click here to Expand it!)
Overview
'Instructions','Help','What do you do?','What does this app do?', 'What can I do here?', 'What is this app about?' Toggle DarkMode 'Make it dark', 'darkmode', 'dark' Toggle LightMode 'Make it light', 'lightmode', 'light' Login 'Log in', 'Login' Logout 'Log out', 'Logout' Go to an Genre(Fantasy) or Category(Top Rated, etc.) 'go to {Genre/Category}' Search for a Movie 'search for {name of movie}' Randomize going to a Genre/Category 'surprise me'
Demonstration Gif (Click here to Expand it!)
- 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.
Demonstration Gif (Click here to Expand it!)
- Search for Movies Names using the search bar in the Middle of the Navigation Bar.
Demonstration Gif (Click here to Expand it!)
- Create your account to save your Favorite Movies and see personalized recommendations..
Demonstration Gif (Click here to Expand it!)
-
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
Demonstration Gif (Click here to Expand it!)
- Birthday, Biography.
- List of Movies it was casted also on the Recommendations at the Bottom.
Demonstration Gif (Click here to Expand it!)
- List of Favorited Movies on the Account.
- List of Watchlisted Movies on the Account.
Demonstration Gif (Click here to Expand it!)
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
- Alan AI - The Voice AI Assistant that Navigates and Interacts with the application.
- ESLint - The Tool that makes your Code Clean.
To get started, fork the repository and then run the following commands:
- Install NPM packages
npm install- Configure your .ENV Get a free TMDB API Key at - https://www.themoviedb.org/.
REACT_APP_TMDB_KEY=<put your key here>(Optional) Get your Alan AI Key at - https://alan.app/
REACT_APP_ALAN_SDK_KEY=<put your key here>- Start the Local Server
npm run start- If you have problems connecting with REST Calls, disable any Adblock/Ghostery or similar extensions.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
✏️ To contribute, do the following:
- Fork the Project
- Create your Feature Branch. (
git checkout -b feature/AmazingFeature) - Commit your Changes. (
git commit -m 'Adding some AmazingFeature') - Push to the Branch. (
git push origin feature/AmazingFeature) - Open a Pull Request
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.
It inspired me to create my own Custom Language Options for the User to Switch between 'pt-BR' and 'en-US'.
Distributed under the MIT License.
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!.
Made with 💜 and dedication by me Guilherme G Cadilhe Aka: Bobnini.
Used resources: