Have A LOOK ||||---->>>>>>> https://movie-fi-app.netlify.app/

Getting Started with Create React Movie-fi App

return ( <> <Button variant="contained" onClick={handleClick} sx={{ margin: "0.5rem" }} > Back 🔹🔹🔹 {/* /}

THE 🎞️MOVIE-FI APP

Idea behind the project 💻

I decided to create this project because I thought it would represent everything I have learnt in these ReactJs Concepts in past 5 weeks in this JavaScript Frontend library. This project showcases what I have learnt about React from simple reusable components to using APIs.

🔗 API Reference

The API used for this project is called OMDB -{" "} ( The Open Movie Database API ) {" "} which I have found by having an extensive search on Google. The documentation for the OMDB API can be found{" "} here {" "}

How does it work ❔

The functionality of the app is simple. The app provides users with information about the movies and All by searching. It does this by gathering the required information from the OMDB API and returning a Movie-card list upcoming and popular movies as well as their artwork with short descriptions.

This app can also take user input in a form of Search and return a specific movie series, Games data the user has searched for. For ease of use we have even included a "Back to Top" button which can take the user back to the top of the page no matter how far they have scrolled.

There is also the functionality to "Show All" if the user wants to return to the initial list of movies in the Homepage which will clear the search and will showcase the original listing.

Potentially the most eye-catching element on the page is the Add Favorite One which was implemented using a Add Favorite and Bookmark By Browser Local Storage. . The bookmark button to show the Favorite movies on the Home Page possibility to use the arrows to either go right or left to scroll through the movie detail page.

The users can also click on the movies which will take them to an overview page of the movie which will list a short overview of the plot, the release date, budget, revenue, rating as well as the list of actors.

🧑🏻‍💻Technologies

The languages as well as libraries that we have used for this project are as follows:

• JavaScript
• React JS
• Material UI
• Axios
• React Router - DOM
• CSS3
• HTML5

Resources:

R&D

1. Google Chromium & Mozilla FireFox
2. Google.com
3. MUI.com
4. Pexels.com

💻What is the Setup?⚙️

To start working on a project, you will need to create a new React app through the terminal by using npm (or you can also use{" "} yarn):

npx create-react-app my-app
cd my-app
npm start


There are a few dependencies that need to be set up in order for this to work. The first one is Material UI:

📐npm install @mui/material @emotion/react @emotion/styled

How and which components and styles from MUI you include is completely up to you. You can find more information on how to get set up and start using all the components from MUI.com{" "} here .

Another thing that needs to be installed is React Router, which is a smart and simple routing utility:{" "}

📐npm install -- npm i react-router-dom

More information on how to utilise React Router and find the tutorials can be found{" "} here .

Another component that needs to be installed is the "Back to Top" button:{" "}

📐npm install react-back-to-top-button

Ⓜ️ More information can be found - -- here .

As it was mentioned before, another component that would need to be installed is the Carousel:

📐 npm i @brainhubeu/react-carousel

If you would like to contribute:🤝🏻

• Step 1: You can clone the movie-fi app repo from My GitHub to your local machine using this 👇🏻 link
• Step 2: Use all your amazing skills to make the changes to your liking 👍🏻
• Step 3: Create a new pull request using this 🤝🏻{" "} link

Credits 🤝🏻

We would like to say thank you to our amazing Geekster coach and Educator Aayush Sinha Sir who has provided his help and immense support as well a huge "Thank You" to our teammates in the Geekster.

{/ <Route path="/about" element={} /> /} {/ <Route path="/home" element={} /> */}

</> ); };

export default About;