🎬 DFlix — Movie Discovery & Review App

DFlix is a modern, responsive movie discovery web application built with React 19, Vite, and the OMDb API. Search for your favorite movies, explore in-depth details (cast, ratings, plot, runtime, awards), and leave custom persistent reviews.

---

✨ Features

• 🔍 Real-Time Movie Search: Instant movie querying powered by the OMDb API.
• 📱 Responsive Grid Layout: Optimized movie cards with lazy-loaded posters and fallback placeholders.
• 📄 Comprehensive Movie Details:
  • IMDb ratings & badges
  • Genre tags & runtime info
  • Director, writer, and cast breakdown
  • Awards and detailed plot synopsis
• 💬 Interactive User Reviews: Write and submit reviews stored locally in your browser (localStorage).
• 🎨 Modern UI/UX: Built with a sleek interface using Bootstrap 5, Tailwind CSS, and custom styling.
• ⚡ Blazing Fast: Powered by Vite build tool and React 19 for instantaneous hot module replacement (HMR).

---

🛠️ Tech Stack

Category	Technology
Frontend Framework	React 19
Build Tool	Vite 8
Routing	React Router DOM v7
Styling & UI	Bootstrap 5, React-Bootstrap, Tailwind CSS v4
Icons	React Icons (Feather & FontAwesome), Heroicons
API	OMDb API (Open Movie Database)
Linter	Oxlint

---

📂 Project Structure

DFlix/
├── public/                # Static public assets
├── src/
│   ├── assets/            # Project media & icons
│   ├── components/        # Reusable UI components (Header, Navbar)
│   │   └── Header.jsx
│   ├── pages/             # Route views & page components
│   │   ├── Home.jsx       # Movie search catalog & grid
│   │   ├── MovieCard.jsx  # Individual movie card component
│   │   └── MovieDetails.jsx # Detailed info view & review system
│   ├── App.css            # Component-level styles
│   ├── App.jsx            # App layout and route declarations
│   ├── index.css          # Global theme tokens & design system
│   └── main.jsx           # Application entry point
├── package.json           # Dependencies and scripts
└── vite.config.js         # Vite configuration

---

🚀 Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

• Node.js (version 18+ recommended)
• npm or yarn
• An OMDb API Key (Free tier available)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/DFlix.git
   cd DFlix

2. Install dependencies:

   npm install

3. Configure API Key: Get your free API key from omdbapi.com and update the fetch endpoints in src/pages/Home.jsx and src/pages/MovieDetails.jsx (or configure via environment variables).

4. Start the development server:

   npm run dev

5. Open in browser: Navigate to http://localhost:5173 to explore DFlix.

---

📜 Available Scripts

Command	Description
npm run dev	Starts the Vite local development server
npm run build	Compiles and builds the production bundle
npm run preview	Previews the production build locally
npm run lint	Runs Oxlint for fast code analysis

---

🔮 Roadmap / Future Improvements

• Add Watchlist / Favorites functionality
• Add category filter (Movies, Series, Episodes)
• Integrate Trailer previews (YouTube embed API)
• Pagination & infinite scroll for movie search results
• Dark / Light mode toggle switch

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Crafted with ❤️ by Darshan

• GitHub: @Bdarshan3007