A modern, responsive movie discovery application built with React and Vite. Search for your favorite movies and explore detailed information with a sleek, user-friendly interface.

• 🎬 Movie Search: Search for movies using the OMDB API
• 🎨 Modern UI: Beautiful, responsive design with gradient effects and smooth animations
• 💨 Fast Performance: Built with Vite for lightning-fast development and optimized production builds
• 📱 Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices
• 🔍 Movie Details: View essential movie information including type and year
• ⚡ Hot Module Replacement: Instant updates during development with HMR

• React 19.2 - UI library for building interactive components
• Vite 7.2 - Next-generation frontend build tool
• JavaScript - Core application logic
• CSS3 - Advanced styling with gradients, shadows, and animations
• OMDB API - Movie database for search functionality

• Node.js (v16 or higher)
• npm or yarn package manager

1. Clone the repository:

git clone https://github.com/yourusername/movieland.git
cd movieland

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

• npm run dev - Start the development server with HMR
• npm run build - Build the project for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality

MovieLand/
├── src/
│   ├── App.jsx           # Main application component
│   ├── App.css           # Application styles
│   ├── MovieCard.jsx     # Movie card component
│   ├── main.jsx          # Application entry point
│   └── assets/           # Images and static assets
├── public/               # Static assets
├── index.html            # HTML template
├── vite.config.js        # Vite configuration
├── eslint.config.js      # ESLint configuration
└── package.json          # Project dependencies

1. Search for Movies: Enter a movie title in the search bar and click the search icon
2. Browse Results: Browse through the displayed movie cards
3. View Details: Hover over a movie card to see more information including the movie type and release year

The application uses the OMDB API (OMDb - The Open Movie Database) for movie data. The API key is configured in src/App.jsx. For production use, consider moving this to environment variables.

The project uses ESLint for code linting with React-specific rules. To check code quality:

npm run dev

• Vite provides optimized builds with code splitting
• React 19.2 includes performance improvements and new features
• CSS is optimized with proper media queries for responsive design

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

The application is fully responsive with breakpoints for:

• Desktop (1024px and above)
• Tablet (600px to 1023px)
• Mobile (below 600px and 400px)

• Add movie filtering and sorting options
• Implement user ratings and reviews
• Add to watchlist functionality
• Dark/Light theme toggle
• Movie recommendations based on genre

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

Developed by Engineer Ushindi Victoire

For more information or support, please open an issue or contact me directly.