Film Fusion

📜 Project Overview

Film Fusion Film Fusion is an interactive and feature-rich platform designed to cater to movie enthusiasts. It serves as a centralized hub for exploring, reviewing, and managing information about films and series. The platform is built with modern web technologies, ensuring a seamless user experience and aesthetic appeal.

🚀 Live Link To The Deployed Project

Github Client Repo Link : github/tariqul420/client

Github Server Repo Link : github/tariqul420/server

Live Site Link: Film-Fusion.com

Live Site Link-2: Film-Fusion-2.com

🔍 React Concepts Used

• Components
• Hooks (useState, useEffect, useContext)
• React Router (useLoaderData, useParams, useLocation)
• Conditional Rendering

🛠 Technology Used

👩🏼‍💻 Frontend

• React
• Firebase
• Tailwind CSS
• DaisyUI
• React Router
• React Icons
• React Toastify
• Context API

｡🇯‌🇸‌ Backend

• Node.js
• Express.js

🛢️ Database

• MongoDB

✨ Features

1. Movie and Series Catalog

2. Search and Filter

3. User Reviews and Ratings

4. Watchlist and Favorites

5. Responsive Design

6. Trending Movies Section

🧰 NPM Packages Used

• react-hook-form
• firebase
• prop-types
• react
• react-dom
• react-icons
• react-router-dom
• react-spinners
• react-toastify
• swiper
• sweetalert2
• slick-carousel
• react-slick
• react-simple-star-rating

🐞 Known Issues

1. Limited Movie Data: Some movie data (like detailed descriptions) may not be available due to API restrictions.
2. Responsive Issues: A few elements might not be perfectly aligned on smaller screens (currently under review).
3. Search Filter: The search filter doesn’t fully reset after a search is completed. This will be fixed in the next release.
4. Favorites Sync: The favorite movies list may not always persist after a browser refresh. This will be improved in the next update.

💡 How to Run Locally

1. Clone the repository:

   git clone https://github.com/tariqul420/Film-Fusion.git
   

2. Navigate to the project directory:

   git clone Film-Fusion
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev

📸 Screenshots

1. Home Page

2. Movie Details Page

3. Contact Us Page

4. Reviews & Celebrities Page