🎬 Modern Movie App

Live Link: https://movie-app-react-fay.netlify.app/

Description

Modern and user-friendly movie discovery platform! This project features a modern interface designed for movie enthusiasts to explore various movies and examine their details. Users can search for movies, view details, and even watch trailers.

✨ New Features (2024 Update)

• Modern UI/UX Design: Current design with glassmorphism and gradient effects
• Enhanced Performance: React.memo and useMemo optimizations
• Responsive Design: Perfect appearance on all devices
• Dark/Light Mode: Theme switching according to user preference
• English Interface: Complete English user experience
• Updated Packages: Latest security updates

🚀 Features

• 🔍 Movie Search: Easily search for movies using keywords or specific titles
• 📋 Movie Details: Access detailed information about each movie, such as release date, cast, and genre
• 🎥 Watch Trailers: Watch trailers for selected movies directly within the app
• 👤 User Accounts: Create an account or log in to save favorite movies and personalize the experience
• 📱 Responsive Design: Enjoy a smooth and intuitive user experience on various devices, including desktops, tablets, and mobile phones
• 🌙 Dark/Light Mode: Theme switching according to user preference
• ⚡ Performance Optimization: Fast loading and smooth animations

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── assets
│   │   └── icons
│   │       ├── GoogleIcon.js
│   │       └── avatar.png
│   ├── auth
│   │   └── firebase.js
│   ├── components
│   │   ├── MovieCard.js
│   │   ├── Navbar.js
│   │   ├── Switch.jsx
│   │   └── VideoSection.jsx
│   ├── context
│   │   └── AuthContextProvider.js
│   ├── helpers
│   │   └── ToastNotify.js
│   ├── index.css
│   ├── index.js
│   ├── pages
│   │   ├── Login.js
│   │   ├── Main.js
│   │   ├── MovieDetail.js
│   │   └── Register.js
│   └── router
│       ├── PrivateRouter.jsx
│       └── Router.js
└── tailwind.config.js

Example Outcomes

🛠️ Technologies and Libraries

• ⚛️ React.js 18.3.1: Powerful JavaScript library for building interactive user interfaces
• 🛣️ React Router 6.30.1: Popular routing library for handling navigation within the app
• 🌐 Axios 1.12.2: Popular HTTP client for making API requests and handling responses
• 🎨 Tailwind CSS 3.4.17: Highly customizable CSS framework for creating stunning designs with minimal effort
• 🔥 Firebase 12.3.0: For authentication and database operations
• 📱 React Toastify 11.0.5: Modern notification system
• 🎭 Context API: Used for state management, providing global access to certain data and functions
• 📱 Responsive Design: Developed with responsiveness in mind to ensure a smooth experience on various devices

🚀 Getting Started

To run the application on your local machine, follow these steps:

1. Clone the project:

   git clone https://github.com/iamfatihay/Movie-app.git

2. Navigate to the project directory:

   cd movie-app

3. Install dependencies:

   npm install

4. Start the application:

   npm start

5. Visit http://localhost:3000 in your web browser

🤝 Contributing

Contributions to enhance the Movie App are welcome! If you find any bugs or have ideas for improvements, please open an issue or submit a pull request. Your input is highly appreciated!

📄 License

The Movie Application is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

🎯 2024 Update Notes

With this update:

• ✅ All packages updated to latest versions
• ✅ Modern UI/UX design principles applied
• ✅ Performance optimizations implemented
• ✅ English interface support added
• ✅ Glassmorphism and gradient effects added
• ✅ Responsive design improved