🎬 FlickFinder

FlickFinder is a sleek and responsive movie discovery web app that lets users explore trending, popular, and searched movies — all powered by The Movie Database (TMDB) API).
Built with React + Tailwind CSS, it provides a modern and intuitive movie-browsing experience.

---

🌍 Live Demo

👉 Visit FlickFinder on Vercel

---

🚀 Features

• 🔍 Search Movies – Instantly find movies by title
• 🎞️ Popular Movies – See trending movies on the homepage
• 🧭 Movie Details Page – View posters, ratings, and overviews
• ⚡ Dynamic Routing – Seamless navigation with React Router
• 💬 Responsive Design – Optimized for mobile, tablet, and desktop

---

🛠️ Tech Stack

Technology	Description
⚛️ React.js	Frontend framework
🎨 Tailwind CSS	Utility-first CSS
🧭 React Router	Client-side routing
🌐 Axios	API request handling
💎 React Icons	Vector icons

---

⚙️ Installation & Setup

🧩 Step-by-step setup

1. Clone the repository

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

2. Install dependencies

   npm install
   
   

3. Set up your TMDB API key

   • Create a .env file in the project root

   • Add:

     VITE_TMDB_API_KEY=your_tmdb_api_key_here

4. Run the app

   npm run dev

5. Open in your browser:

   http://localhost:5173
   

---

📁 Folder Structure

🧱 View Project Structure

FlickFinder/
│
├── src/
│   ├── components/
│   │   ├── NavBar.jsx
│   │   ├── Footer.jsx
│   │   ├── MovieCard.jsx
│   │   └── NotFound.jsx
│   │
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── MovieDetail.jsx
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── api/
│       └── tmdb.js
│
├── public/
│   └── screenshots/
│       ├── homepage.png
│       └── movie-details.png
│
├── .env
├── package.json
└── README.md

---

💡 How It Works

1. Home Page – Fetches popular movies using TMDB’s /movie/popular endpoint
2. Search Feature – Calls /search/movie dynamically as users type
3. Movie Details – Displays info like poster, rating, and overview
4. Error Handling – Custom 404 page for invalid routes

---

🌐 API Reference

Powered by The Movie Database (TMDB). You’ll need your own API key.

Example:

https://api.themoviedb.org/3/movie/popular?api_key=YOUR_API_KEY&page=1

---

👨‍💻 Author

👤JstMeJosh 💬 Let’s collaborate or build something amazing: 💚 Chat on WhatsApp

---

🩶 Acknowledgements

• TMDB API
• React
• Tailwind CSS
• Vite

---

⭐ Support

If you like FlickFinder, please consider giving it a ⭐ on GitHub!