Discover your next favorite film with CinemaScope - a modern, elegant movie search application built with React.js and powered by the OMDB API.
- 🔍 Smart Search - Search through thousands of movies from classics to latest releases
- 🎥 Detailed Information - View comprehensive movie details including plot, cast, ratings, and awards
- ⭐ IMDb Integration - Display IMDb ratings and vote counts
- 📱 Responsive Design - Seamless experience across desktop, tablet, and mobile devices
- 🎨 Modern UI - Beautiful dark theme with gold accents and smooth animations
- ⚡ Fast Performance - Quick search results and smooth transitions
- 🖼️ High-Quality Posters - Display movie posters with hover effects
- 📊 Rich Details - Box office, runtime, language, country, and award information
- React.js - UI library with React Hooks
- React Router - Client-side routing and navigation
- OMDB API - Movie database and information
- Lucide React - Modern icon library
- Bootstrap 5 - Responsive grid and utilities
- Vite - Next-generation build tool
- CSS3 - Custom properties and modern styling
- OMDB API Key (get one free at omdbapi.com)
- Clone the repository:
git clone https://github.com/MuhammadSohaib-pro/Cinema-Scope.git
cd Cinema-Scope- Install dependencies:
npm install- Set up environment variables:
Create a .env file in the root directory:
VITE_BASE_URL=https://www.omdbapi.com
VITE_API_KEY=your_api_key_here- Run the development server:
npm run dev- Open your browser:
http://localhost:5173
- Search for movies: Enter a movie title in the search bar and click "Search"
- Browse results: View movie cards with posters, titles, years, and types
- View details: Click "View Details" on any movie card to see full information
- Navigate back: Use the "Back to Search" button to return to results
src/
├── components/
│ ├── Header.jsx # App header with logo
│ ├── HeroSection.jsx # Hero section with search
│ ├── MovieCard.jsx # Individual movie card
│ ├── EmptyMovie.jsx # Empty state component
│ └── MovieNotFound.jsx # Not found state
├── views/
│ ├── Home.jsx # Main search page
│ ├── MovieDetail.jsx # Movie details page
│ └── NotFound.jsx # 404 page
├── lib/
│ └── api.js # API utility functions
├── App.jsx # Root component with routes
├── App.css # Component styles
├── index.css # Global styles and theme
└── main.jsx # Application entry point
- Real-time search with loading states
- Empty state for first-time visitors
- Not found state for invalid searches
- Clean, intuitive search interface
- Full movie information including:
- Title, year, and runtime
- IMDb rating and vote count
- Genre tags
- Full plot synopsis
- Director and cast information
- Language and country
- Box office earnings
- Awards and nominations
- Smooth hover animations on cards
- Loading indicators during API calls
- Error handling with user-friendly messages
- Responsive grid layout for all screen sizes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project uses the OMDB API for movie data. Please ensure you have your own API key to use this application.
This project is open source and available under the MIT License.
Muhammad Sohaib
- GitHub: @MuhammadSohaib-pro
- OMDB API for providing movie data
- Lucide Icons for beautiful icons
- Bootstrap for responsive utilities
- Vite for blazing fast development
⭐ If you found this project helpful, please give it a star!
Built with ❤️ while learning React.js