diff --git a/.gitignore b/.gitignore index 113661f..0a94070 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,5 @@ package-lock.json npm-debug.log* yarn-debug.log* yarn-error.log* + +.env \ No newline at end of file diff --git a/README.md b/README.md index 58beeac..52efd57 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,66 @@ -# Getting Started with Create React App +# Movie Browser -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +Welcome to Movie Browser! This is a web application that allows users to browse trending movies, search for movies, and view details about each movie. -## Available Scripts +## Features -In the project directory, you can run: +- **Trending Movies:** View a list of trending movies for the week. +- **Search:** Search for movies using keywords. +- **Movie Details:** View detailed information about each movie, including its synopsis, genres, release date, and duration. -### `npm start` +## Technologies Used -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. +- React.js +- React Router +- HTML +- CSS +- JavaScript +- Themoviedb API -The page will reload when you make changes.\ -You may also see any lint errors in the console. +## Getting Started -### `npm test` +To run this project locally, follow these steps: -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +1. Clone the repository to your local machine: -### `npm run build` +```git clone https://github.com/AtharvaDeokar21/Movie-Browser``` -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! +2. Navigate to the project directory: -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +```cd movie-browser``` -### `npm run eject` -**Note: this is a one-way operation. Once you `eject`, you can't go back!** +3. Install dependencies: -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. +```npm install``` -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. +4. Create an account on [Themoviedb](https://www.themoviedb.org/) and obtain an API key. -## Learn More +5. Create a `.env` file in the root directory of the project and add your API key: -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +```REACT_APP_API_KEY=your-api-key``` -To learn React, check out the [React documentation](https://reactjs.org/). -### Code Splitting +6. Start the development server: -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) +```npm start``` -### Analyzing the Bundle Size -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) +7. Open your browser and navigate to `http://localhost:3000` to view the application. -### Making a Progressive Web App +## Screenshots -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) +![Home Page](/screenshots/Home.png) +![Search Results](/screenshots/search-results.png) +![Movie Details](/screenshots/movie-details.png) +![Overview](/screenshots/overview.png) -### Advanced Configuration +## Contributing -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) +Contributions are welcome! Please fork the repository and create a pull request with your changes. -### Deployment +## License -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/screenshots/Home.png b/screenshots/Home.png new file mode 100644 index 0000000..df62f7b Binary files /dev/null and b/screenshots/Home.png differ diff --git a/screenshots/movie-details.png b/screenshots/movie-details.png new file mode 100644 index 0000000..27350cd Binary files /dev/null and b/screenshots/movie-details.png differ diff --git a/screenshots/overview.png b/screenshots/overview.png new file mode 100644 index 0000000..6470fa9 Binary files /dev/null and b/screenshots/overview.png differ diff --git a/screenshots/search-results.png b/screenshots/search-results.png new file mode 100644 index 0000000..8c204f2 Binary files /dev/null and b/screenshots/search-results.png differ diff --git a/src/App.css b/src/App.css index 54d0d14..dacedc3 100644 --- a/src/App.css +++ b/src/App.css @@ -20,12 +20,11 @@ } .web-developer { - border: 4px solid #181515; /* Light gray border */ - border-radius: 50%; /* Make the image circular */ - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Slightly darker shadow */ + border: 4px solid #181515; + border-radius: 50%; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } -/* App.css */ .card { border: none; transition: transform 0.2s ease; @@ -42,15 +41,14 @@ text-align: center; } -/* App.css */ .hero-container { position: relative; background-size: cover; background-position: center; - padding: 50px 0; /* Adjust the padding as needed */ + padding: 50px 0; text-align: center; color: #fff; - overflow: hidden; /* Ensure gradient overlay covers entire background */ + overflow: hidden; } .overlay { @@ -59,13 +57,13 @@ left: 0; width: 100%; height: 100%; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); /* Gradient overlay */ + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); } .hero-text { - font-size: 2.5rem; /* Adjust the font size as needed */ + font-size: 2.5rem; font-weight: bold; - margin-bottom: 20px; /* Adjust the margin as needed */ + margin-bottom: 20px; } /* Media query for smaller screens */ @@ -75,54 +73,41 @@ } } - /* App.css */ body { - font-family: 'Roboto', sans-serif; /* Choose a suitable font family */ - background-color: #1f1f1f; /* Dark charcoal background color */ - color: #212529; /* Text color */ + font-family: 'Roboto', sans-serif; + background-color: #1f1f1f; + color: #212529; margin: 0; padding: 0; overflow-x: hidden; /* Prevent horizontal scrolling */ } -/* App.css */ -/* Adjust text color for specific elements */ h2,p, h4 { - color: #ffffff; /* White text color */ + color: #ffffff; } -/* App.css */ -/* Style the cards for movie listings */ .card { - background-color: #2e2d2d; /* Dark background color for the entire card */ - color: #fff; /* White text color for card content */ + background-color: #2e2d2d; + color: #fff; } - /* Style the footer section containing the "Show Details" button */ .card-footer { - background-color: #0c0b0b; /* Dark background color for the footer */ + background-color: #0c0b0b; } - -/* App.css */ - -/* App.css */ - -/* App.css */ -/* Style the "Show Details" button */ .btn-show-details { - background-color: #555; /* Dark gray button background color */ - color: #fff; /* White text color */ - border-color: #555; /* Dark gray border color */ - background-image: linear-gradient(to bottom, #666, #555); /* Gradient effect */ + background-color: #555; + color: #fff; + border-color: #555; + background-image: linear-gradient(to bottom, #666, #555); } - /* Hover effect for the "Show Details" button */ + .btn-show-details:hover { - background-color: #444; /* Slightly darker gray background color on hover */ - border-color: #444; /* Slightly darker gray border color on hover */ + background-color: #444; + border-color: #444; } diff --git a/src/App.js b/src/App.js index d738c9a..f84daea 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,9 @@ import MovieView from './components/MovieView'; import NotFound from './components/NotFound'; import {Route, Routes } from 'react-router-dom'; +const apiKey = process.env.REACT_APP_API_KEY; //use your own api key. + + function App() { const [searchResults, setSearchResults] = useState([]); @@ -15,7 +18,7 @@ function App() { useEffect(() => { if(searchText) { - fetch(`https://api.themoviedb.org/3/search/movie?query=${searchText}&api_key=1e77157cdc2fb9c12ac77c06839e1f72`) + fetch(`https://api.themoviedb.org/3/search/movie?query=${searchText}&api_key=${apiKey}`) .then(Response => Response.json()) .then(data => { setSearchResults(data.results); @@ -40,5 +43,4 @@ function App() { export default App; -// To DO: -// Add on click feature for trending movies + diff --git a/src/components/Home.js b/src/components/Home.js index 43e7882..d2c35fb 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,11 +1,12 @@ import { useState, useEffect } from 'react'; import Hero from './Hero'; +const apiKey = process.env.REACT_APP_API_KEY; // Add your api key const Home = () => { const [featuredMovies, setFeaturedMovies] = useState([]); useEffect(() => { - fetch(`https://api.themoviedb.org/3/trending/movie/week?api_key=1e77157cdc2fb9c12ac77c06839e1f72`) + fetch(`https://api.themoviedb.org/3/trending/movie/week?api_key=${apiKey}`) .then(response => response.json()) .then(data => { setFeaturedMovies(data.results.slice(0, 16)); // Displaying only 16 featured movies diff --git a/src/components/MovieView.js b/src/components/MovieView.js index 6690fb3..5c4b7ca 100644 --- a/src/components/MovieView.js +++ b/src/components/MovieView.js @@ -3,13 +3,15 @@ import Hero from "./Hero"; import { useParams } from "react-router-dom"; import { useEffect } from "react"; +const apiKey = process.env.REACT_APP_API_KEY; + const MovieView = () => { const {id} = useParams(); const [movieDetails, setMovieDetails] = useState({}); const [isLoading, setIsLoading] = useState(true); useEffect(() => { - fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=1e77157cdc2fb9c12ac77c06839e1f72`) + fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`) .then(response => response.json()) .then(data => { setMovieDetails(data); diff --git a/src/components/SearchView.js b/src/components/SearchView.js index 206e148..02bf8d3 100644 --- a/src/components/SearchView.js +++ b/src/components/SearchView.js @@ -1,9 +1,5 @@ import { Link } from 'react-router-dom'; import Hero from './Hero'; -// API key: 1e77157cdc2fb9c12ac77c06839e1f72 -//'https://api.themoviedb.org/3/search/movie?query=Star%20wars&api_key=1e77157cdc2fb9c12ac77c06839e1f72' - -//https://www.omdbapi.com/?i=tt3896198&apikey=74a2ca0 const MovieCard = ({ movie }) => { const posterUrl = movie.poster_path ? `https://image.tmdb.org/t/p/w500/${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Poster+Available';