https://github.com/pintu544/moviesearchapp

A simple, responsive web application to search and view details of movies using the OMDB API. This app allows users to see a list of popular movies by default, search for movies dynamically with suggestions as they type, and view detailed information about a selected movie in a modal.
https://github.com/pintu544/moviesearchapp

mui omdb-api react

Last synced: 6 days ago
JSON representation

A simple, responsive web application to search and view details of movies using the OMDB API. This app allows users to see a list of popular movies by default, search for movies dynamically with suggestions as they type, and view detailed information about a selected movie in a modal.

• Host: GitHub
• URL: https://github.com/pintu544/moviesearchapp
• Owner: pintu544
• Created: 2024-11-15T13:18:20.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-15T13:21:36.000Z (about 1 month ago)
• Last Synced: 2024-11-15T14:26:14.966Z (about 1 month ago)
• Topics: mui, omdb-api, react
• Language: JavaScript
• Homepage: https://moviesappomdb.netlify.app/
• Size: 47.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  

  

  


Movie Search App

A simple, responsive web application to search and view details of movies using the OMDB API. This app allows users to see a list of popular movies by default, search for movies dynamically with suggestions as they type, and view detailed information about a selected movie in a modal.



Features





Search Movies: Type in the search bar to see live suggestions.



Popular Movies: Displays a default list of popular movies.



Movie Details: Click on a movie to view detailed information such as plot, genre, year, and IMDb rating in a modal.



Responsive Design: Optimized for all screen sizes.



Clean and Modern UI: Styled using Material-UI (MUI).





Demo

https://moviesappomdb.netlify.app/



Technologies Used





React.js: Frontend framework.



Material-UI (MUI): For styling components and ensuring responsiveness.



OMDB API: External API for movie data.



Axios: For API requests.



Environment Variables: To securely store the API key.





Installation and Setup





Clone the repository:

bash





git clone https://github.com/pintu544/MovieSearchApp/ cd MovieSearchApp





Install dependencies:

bash



npm install







Create a .env file in the root directory and add your OMDB API key:

env

REACT_APP_OMDB_API_KEY=your_api_key_here





Start the development server:

bash

npm start





Open the app in your browser at http://localhost:5173.







How to Use



Launch the app.

Use the search bar to find a movie. Suggestions will appear dynamically as you type.

Click on a movie title from the suggestions or the popular movies list to view its details in a modal.

Use the close button in the modal to exit the details view.





File Structure

scss

Copy code

src/ ├── pages/ │ ├── MovieDetailsModal.js // Component for the movie details modal ├── App.js // Main application logic ├── Main.js // Entry point └── .env // Environment variables (not included in repo)



Assumptions



Popular movies are hardcoded with specific IMDb IDs (tt0111161, tt0068646, tt0071562) for demonstration purposes.

The OMDB API is free-tier and has limited request rates.





Future Enhancements



Add pagination for search results.

Support switching between different movie databases.

Add user authentication for personalized features.

Implement dark mode for the app.





Acknowledgments





OMDB API for providing the movie data.



Material-UI for the design components.



Enjoy the app! 🎥🍿