Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/m-yasirghaffar/react-movies-and-tv-shows-streaming-web-app
React (Vite Build tool) movie and Tv Show streaming app powered by TMDB API and enriched with Third Party video player
https://github.com/m-yasirghaffar/react-movies-and-tv-shows-streaming-web-app
media-player movies reactjs redux redux-toolkit streaming tailwindcss tmdb tmdb-api tv-series vite
Last synced: about 1 month ago
JSON representation
React (Vite Build tool) movie and Tv Show streaming app powered by TMDB API and enriched with Third Party video player
- Host: GitHub
- URL: https://github.com/m-yasirghaffar/react-movies-and-tv-shows-streaming-web-app
- Owner: M-YasirGhaffar
- Created: 2024-02-02T21:00:31.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T12:53:37.000Z (5 months ago)
- Last Synced: 2024-07-18T15:44:56.772Z (5 months ago)
- Topics: media-player, movies, reactjs, redux, redux-toolkit, streaming, tailwindcss, tmdb, tmdb-api, tv-series, vite
- Language: JavaScript
- Homepage: https://react-movie-streaming-app.vercel.app/
- Size: 276 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Movie & TV Show Streaming App
## Overview
This project is a React-based web application that utilizes The Movie Database (TMDB) API to showcase a wide range of movies and TV shows. It's designed with responsiveness in mind, using Tailwind CSS for styling and Redux Toolkit for efficient state management. Users can explore different categories, including trending, top-rated, and detailed seasonal information for TV shows.
## Features
- **Dynamic Dashboard**: A central hub showcasing movies and TV shows with options to filter by category.
- **Detailed View**: Clicking on a movie or TV show card opens a detailed page with extensive information, such as cast, genre, ratings, and episode details for TV shows.
- **Responsive Design**: Built with Tailwind CSS, the application is fully responsive and optimized for various screen sizes.
- **State Management**: Utilizes Redux Toolkit for managing application state, enhancing the performance and scalability.
- **Navigation**: Implements React Router for seamless and intuitive navigation throughout the application.
- **Automatic Scrolling**: Featured sections auto-scroll, improving user interaction and engagement.
## Getting Started
### Prerequisites
Ensure you have the following installed:
- Node.js
- npm or yarn
### Installation
1. Clone the repository:
```sh
git clone https://github.com/M-YasirGhaffar/React-movies-and-tv-shows-streaming-web-app
```
2. Navigate to the project directory:
```
cd React-movies-and-tv-shows-streaming-web-app
```
3. Install dependencies:
```
npm install
```
4. Create a `.env` file based on the `.env.example` template and add your TMDB API key:
```
VITE_TMDB_API_KEY=your_api_key_here
```
5. Start the development server:
```
npm run dev
```
## Built With
- [React](https://reactjs.org/) - The web framework used
- [Tailwind CSS](https://tailwindcss.com/) - For styling
- [Redux Toolkit](https://redux-toolkit.js.org/) - State management
- [Axios](https://github.com/axios/axios) - HTTP client
- [React Router](https://reactrouter.com/) - For routing
- [Vite](https://vitejs.dev/) - Build tool
## Project Structure
- `.env.example` - Template for environment variables.
- `.eslintrc.cjs` - ESLint configuration.
- `package.json` - Project metadata and dependencies.
- `postcss.config.js` - PostCSS configuration.
- `src/components` - React components.
- `src/features` - Redux slices.
- `src/App.jsx` - Main application component.
- `src/index.css` - Global styles.
- `vite.config.js` - Configuration for Vite.
- `vercel.json` - Configuration for Vercel deployment.
## Challenges & Solutions
- **API Integration**: Managed asynchronous data fetching with Redux Toolkit's async thunks.
- **Responsive Design**: Utilized Tailwind CSS for responsive layouts and styling.
- **State Management Complexity**: Simplified with Redux Toolkit, organizing state into slices.
## Future Enhancements
- Implement user authentication for personalized experiences.
- Add a search feature to find specific movies or TV shows.
- Optimize performance further, including lazy loading components.
## Deployment
Deployed on Vercel with automatic rewrites configuration for SPA routing support. See `vercel.json` for deployment settings.
## Contributing
Contributions are welcome!