Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmedalsanadi/movie-streaming-app
A feature-rich movie streaming app built with Next.js, React, and Tailwind CSS. Includes advanced search, personalized watchlists, multi-language support, and Firebase authentication
https://github.com/ahmedalsanadi/movie-streaming-app
authentication dark-mode firebase i18n movie-streaming-app multi-language nextjs react server-side-rendering tailwind-css tmdb-api
Last synced: 13 days ago
JSON representation
A feature-rich movie streaming app built with Next.js, React, and Tailwind CSS. Includes advanced search, personalized watchlists, multi-language support, and Firebase authentication
- Host: GitHub
- URL: https://github.com/ahmedalsanadi/movie-streaming-app
- Owner: ahmedalsanadi
- License: mit
- Created: 2024-10-22T15:51:13.000Z (25 days ago)
- Default Branch: dev
- Last Pushed: 2024-11-02T23:43:55.000Z (14 days ago)
- Last Synced: 2024-11-03T00:20:58.098Z (14 days ago)
- Topics: authentication, dark-mode, firebase, i18n, movie-streaming-app, multi-language, nextjs, react, server-side-rendering, tailwind-css, tmdb-api
- Language: JavaScript
- Homepage: https://movie-streaming-app-virid.vercel.app
- Size: 6.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎬 Movie Streaming App
---
Made with ❤️ by [Ahmed Al-Sanadi]
⭐ Star this repo if you find it helpful!
## ✨ Overview
Experience cinema like never before with our feature-rich movie streaming platform! Built with cutting-edge technologies, this app brings the magic of movies and TV shows right to your screen, complete with a seamless user experience and stunning visual design.
**Why you'll love this app**:
- 🍿 **Discover, explore, and save** your favorite movies and TV shows.
- 🎨 **Dark/Light Mode** for a tailored viewing experience.
- 🌍 **Multi-language Support** for diverse audiences.
## 🚀 Key Features
### 🎯 Core Functionality
- **🔍 Advanced Search & Discovery**: Search movies, shows, or actors with ease.
- **💡 Light/Dark Mode**: Switch between sleek dark and clean light modes.
- **🌐 Multi-language Support**: Available in **English**, **Arabic**, and **French**.
- **🧑💻 Personalized User Profiles**: Keep track of your favorite movies and shows in your watchlist.
- **📱 Fully Responsive**: Looks great on any screen size, from mobile to desktop.
### 🛠️ Technical Features
- **⚡ Next.js**: Enjoy lightning-fast server-side rendering for a smooth user experience.
- **🔥 Firebase**: Authentication, data storage, and more, seamlessly integrated.
- **🎨 Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **🌍 i18next**: Effortless multi-language support for a global user base.
## 🎨 Screenshots Showcase
Click to expand and explore the visual beauty
### 🎬 Movie Details & More
### 🏠 Home Experience
### 👤 User Profile & Auth
## 🚀 Quick Start
### Prerequisites
Before you begin, ensure you have the following installed:
```bash
Node.js v14+
npm or yarn
```
### 🛠️ Installation & Setup
1. **Clone the repository**
```bash
git clone https://github.com/ahmedalsanadi/Movie-Streaming-App.git
cd Movie-Streaming-App
```
2. **Install dependencies**
```bash
npm install
```
3. **Environment Configuration**
To fetch movie data and use Firebase services, create a `.env.local` file in the root of your project with the following environment variables:
```bash
NEXT_PUBLIC_API_KEY=your_tmdb_api_key
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
```
4. **Launch the app**
```bash
npm run dev
```
Open your browser and navigate to `http://localhost:3000` to view the app!
## 🎮 Features Guide
### User Features
- **🔐 Authentication**: Secure login, registration, and profile management with Firebase.
- **🔍 Discovery**: Browse thousands of movies, TV shows, and actors.
- **💾 Watchlists**: Add movies to your personalized list.
- **🌍 Language Support**: Toggle between **English**, **Arabic**, and **French**.
- **🌓 Light/Dark Mode**: A toggle for personalized viewing.
### Developer Features
- **🔧 ESLint & Prettier**: Ensure code quality with automated linting and formatting.
- **🛠 Husky Hooks**: Pre-commit hooks ensure high code standards with **lint-staged**.
## 🤝 Contributing
We appreciate contributions! Here’s how you can contribute:
1. **Fork the repository**
2. **Create your feature branch** (`git checkout -b feature/AmazingFeature`)
3. **Commit your changes** (`git commit -m 'Add some AmazingFeature'`)
4. **Push to the branch** (`git push origin feature/AmazingFeature`)
5. **Open a pull request**
## 📜 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
---
Made with ❤️ by [Ahmed Al-Sanadi]
⭐ Star this repo if you find it helpful!
---