🎬 SOM Music - Movie & Series Discovery Platform

Your ultimate destination for discovering movies, series, and entertainment content with a modern, sleek interface.

---

✨ Features

• 🎥 Infinite Scrolling - Seamlessly browse through thousands of movies and series
• 🔍 Smart Search - Powerful search functionality with real-time results
• 🎭 Genre Filtering - Browse by Movies, Series, Drama, Horror, and American content
• ❤️ Favorites System - Save and manage your favorite movies with localStorage persistence
• 🌓 Dark/Light Mode - Toggle between themes with smooth transitions
• 📱 Responsive Design - Optimized for desktop, tablet, and mobile devices
• 🎨 Modern UI/UX - Netflix-inspired interface with glassmorphism effects
• 📧 Contact Form - Integrated Formspree contact system
• ⚡ Fast Performance - Optimized React components with lazy loading

---

📸 Visual Demo

🎬 Popular Movies

Discover trending and popular movies with our intuitive interface. Each movie card displays high-quality posters, release years, and quick access to detailed information. The infinite scroll feature ensures you never run out of content to explore.

Key Features:

• 🎯 Instant movie details on click
• ❤️ One-tap favorite functionality
• 🖼️ High-resolution poster images
• ⚡ Lightning-fast loading with lazy loading

---

📺 Series Collection

Browse through an extensive collection of TV series and shows from around the world. Our series section offers the same seamless experience as movies, with detailed episode information and ratings.

What You Get:

• 📊 Complete series information
• ⭐ IMDb ratings and reviews
• 📅 Release dates and years
• 🎭 Genre classifications

---

👻 Horror Genre

Explore spine-chilling horror movies and series curated for thrill-seekers. Our horror collection features classics and modern masterpieces, all organized for easy discovery.

Horror Features:

• 🎃 Curated horror collections
• 🔍 Filter by sub-genres
• 📈 Trending horror content
• 🌙 Perfect for dark mode viewing

---

🎭 Drama Collection

Dive into compelling drama content from around the world. From award-winning films to critically acclaimed series, our drama section has something for every mood.

Drama Highlights:

• 🏆 Award-winning titles
• 🌍 International content
• 💫 Critically acclaimed picks
• 📖 Rich storytelling experiences

---

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager
• OMDb API Key (Get one free here)

Installation

1. Clone the repository

   git clone <repository-url>
   cd movie-app

2. Install dependencies

   npm install

3. Configure Environment Variables

   Create a .env file in the root directory:

   REACT_APP_FORMSPREE_API=https://formspree.io/f/your-form-id

4. Start the development server

   npm start

5. Open your browser

   Navigate to http://localhost:3000

---

🛠️ Tech Stack

Frontend

• React 19.2.3 - Modern UI library
• React Router DOM 6.30.2 - Client-side routing
• CSS3 - Custom styling with CSS variables

APIs & Services

• OMDb API - Movie and series data
• Formspree - Contact form backend

Development Tools

• React Scripts 5.0.1 - Build tooling
• Testing Library - Component testing
• Web Vitals - Performance monitoring

---

📁 Project Structure

movie-app/
├── public/
│   ├── som movies free.png      # App logo
│   ├── favicon.ico              # Browser icon
│   └── index.html               # HTML template
├── src/
│   ├── assets/                  # Images and media
│   │   ├── som music bgc.jpg
│   │   └── screenshots/
│   ├── components/              # Reusable components
│   │   ├── Header.js
│   │   ├── Header.css
│   │   ├── MovieCard.js
│   │   └── MovieCard.css
│   ├── pages/                   # Page components
│   │   ├── Home.js
│   │   ├── Home.css
│   │   ├── MovieDetails.js
│   │   ├── MovieDetails.css
│   │   ├── Favorites.js
│   │   ├── Favorites.css
│   │   ├── Contact.js
│   │   └── Contact.css
│   ├── utils/                   # Utility functions
│   │   ├── api.js               # API calls
│   │   ├── ThemeContext.js      # Theme management
│   │   └── FavoritesContext.js  # Favorites state
│   ├── App.js                   # Main app component
│   ├── App.css                  # Global styles
│   └── index.js                 # Entry point
├── .env                         # Environment variables
├── package.json                 # Dependencies
└── README.md                    # Documentation

---

🎨 Key Features Explained

🔄 Infinite Scrolling

The home page implements infinite scrolling using the Intersection Observer API, automatically loading more content as you scroll down. This provides a seamless browsing experience without pagination.

🎯 Mega Menu Navigation

A Supabase-inspired dropdown menu organizes content by:

• Genres: Movies, Series, Drama
• Collections: Horror, American content
• Quick Access: Favorites

💾 Local Storage Persistence

• Favorites: Saved movies persist across sessions
• Theme Preference: Dark/light mode choice is remembered
• User Settings: All preferences stored locally

🎨 Theme System

Dynamic theming with CSS variables:

• Dark Mode (Default): Optimized for low-light viewing
• Light Mode: Clean, bright interface
• Smooth transitions between themes

---

🔧 Available Scripts

npm start

Runs the app in development mode at http://localhost:3000

npm test

Launches the test runner in interactive watch mode

npm run build

Builds the app for production to the build folder

• Optimized and minified
• Ready for deployment

npm run eject

⚠️ One-way operation - Ejects from Create React App

---

🌐 API Integration

OMDb API

The application uses the OMDb API for fetching movie data:

// Example API call
const API_KEY = '242bc620';
const BASE_URL = 'https://www.omdbapi.com/';

// Search movies
fetch(`${BASE_URL}?apikey=${API_KEY}&s=batman&page=1`)

Key Endpoints:

• Search: ?s={query}&page={page}
• Details: ?i={imdbID}
• Popular: ?s=movie&page={page}

---

📱 Responsive Design

The application is fully responsive with breakpoints:

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: < 768px

Features adapt seamlessly:

• Mega menu → Mobile drawer
• Grid layouts adjust columns
• Touch-optimized interactions

---

🎯 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ⚠️ IE11 (not supported)

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a 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

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

📞 Contact

For questions, feedback, or support:

• Email: yousufmoha255@gmail.com
• WhatsApp: +252 90 668 0955

---

🙏 Acknowledgments

• OMDb API for providing movie data
• React for the amazing framework
• Formspree for contact form handling
• Design inspiration from Netflix and modern streaming platforms

---

Made with ❤️ by the SOM Music Team

© 2025 SOM Music. All rights reserved.