🎬 MovieFinder

React Movie Discovery Application

Designed and developed by: Om Patki

🔗 Link to deployed app: MovieFinder Live Demo

---

🧩 About

📝 Description and Purpose

MovieFinder is a sleek, responsive web application designed for cinema enthusiasts to explore a vast database of films. By leveraging real-time data fetching, users can search for any movie title and instantly access detailed information including release years, posters, and plot details.

The goal was to create a friction-less search experience that balances high-performance data retrieval with an engaging, modern user interface.

💡 Inspiration

Inspired by the clean layouts of Letterboxd and IMDb, MovieFinder was built to solve the "what should I watch tonight?" dilemma. I wanted to build a tool that felt snappy and visual, moving away from cluttered text-heavy databases toward a poster-first discovery experience.

---

⚙️ Tech Stack

• Frontend: React.js, HTML5, CSS3
• API Integration: OMDb API (Open Movie Database)
• Communication: EmailJS
• Deployment: Netlify

---

🌟 Key Features

🔍 Instant Movie Search ✅

Integrated the OMDb API using asynchronous JavaScript (async/await) to fetch movie data. By optimizing the fetching logic, search result latency was reduced by over 20%, providing an "instant" feel as users browse.

📧 Automated Contact System ✅

Utilized EmailJS in conjunction with React state management to automate the contact form. This ensures reliable message delivery directly to my inbox without the need for a dedicated backend server.

📱 Fully Responsive UI ✅

Developed a custom CSS architecture featuring fluid layouts and CSS animations. The application ensures 100% layout consistency across smartphones, tablets, and wide-screen monitors.

🖼️ Dynamic Poster Gallery ✅

A grid-based display system that handles various image aspect ratios gracefully, ensuring that movie posters are the star of the show while maintaining a clean, organized aesthetic.

---

💻 Installation Instructions

1. Clone the repository

git clone [https://github.com/opatki/MovieFinder_Improved.git](https://github.com/opatki/MovieFinder_Improved.git)

2. Install dependencies

cd MovieFinder_Improved
npm install

3. API Configuration

To use the search functionality, you will need an OMDb API key. Get a free key at omdbapi.com. Create a .env file and add:

REACT_APP_OMDB_API_KEY=your_api_key_here

4. Run the app

npm start

5. Open the app

Visit: http://localhost:3000