🎬 CinemaScope

Discover your next favorite film with CinemaScope - a modern, elegant movie search application built with React.js and powered by the OMDB API.

📸 Screenshots

Home Page

Search Results

Movie Details

✨ Features

• 🔍 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

🛠️ Tech Stack

• 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

🚀 Getting Started

Prerequisites

• OMDB API Key (get one free at omdbapi.com)

Installation

1. Clone the repository:

git clone https://github.com/MuhammadSohaib-pro/Cinema-Scope.git
cd Cinema-Scope

2. Install dependencies:

npm install

3. 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

4. Run the development server:

npm run dev

5. Open your browser:

http://localhost:5173

📖 Usage

1. Search for movies: Enter a movie title in the search bar and click "Search"
2. Browse results: View movie cards with posters, titles, years, and types
3. View details: Click "View Details" on any movie card to see full information
4. Navigate back: Use the "Back to Search" button to return to results

📁 Project Structure

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

🌟 Features in Detail

Search Functionality

• Real-time search with loading states
• Empty state for first-time visitors
• Not found state for invalid searches
• Clean, intuitive search interface

Movie Details

• 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

User Experience

• Smooth hover animations on cards
• Loading indicators during API calls
• Error handling with user-friendly messages
• Responsive grid layout for all screen sizes

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 API Attribution

This project uses the OMDB API for movie data. Please ensure you have your own API key to use this application.

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Muhammad Sohaib

• GitHub: @MuhammadSohaib-pro

🙏 Acknowledgments

• 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