Made some changes about API key

.gitignore

@@ -26,3 +26,5 @@ package-lock.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

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.

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; 
   }
 
 

src/App.js

@@ -8,14 +8,17 @@ 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([]);
   const [searchText, setSearchText] = useState('');
 
   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
+

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

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);

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';