VKMFlix is a modern and fully responsive movie streaming platform built using React.js, Vite, Tailwind CSS, Redux Toolkit, and TMDB API. This website allows users to browse trending movies, top-rated movies, popular TV series, and more. It also provides a trailer preview and theme switching functionality.
- Home Page with Hero Section: Displays the most popular movies with autoplay slides.
- Movie Cards: Beautiful cards for movies and TV series with hover effects.
- Video Modal: Watch trailers of movies and series.
- Theme Switcher: Switch between Light, Dark, and System themes.
- Sidebar Menu: Navigation menu for Movies, TV Series, and Home.
- Search Functionality: Allows searching for movies and TV series.
- Responsive Design: Fully responsive across all devices.
- Lazy Loading: Images load only when in the viewport.
- Error Handling: Displays error message if API fails.
me-safwan-07-vkmflix/
│
├── public/ # Public assets
├── src/ # Source Code
│ ├── assets/ # Static assets like SVGs
│ ├── components/ # Reusable components
│ │ ├── Header/ # Header with navigation
│ │ ├── SideBar/ # Sidebar for navigation and theme change
│ │ ├── Section/ # Sections to display movies and series
│ │ ├── VideoModal/ # Modal to display trailers
│ ├── context/ # React Context API for global and theme context
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Pages like Home
│ ├── services/ # API call services using Redux Toolkit
│ ├── style/ # Tailwind classes and styles
│ ├── utils/ # Utility functions
│ ├── App.jsx # Main App Component
│ ├── main.jsx # Entry point of the application
├── .env # Environment variables for API keys
├── package.json # Project dependencies
├── vite.config.js # Vite Configuration
- React.js - Frontend JavaScript Library
- Vite - Fast build tool for React
- Tailwind CSS - Utility-first CSS framework
- Redux Toolkit - State management
- React Router DOM - Client-side routing
- TMDB API - Movie database API
- Framer Motion - Animation and modal transitions
- React Icons - Icons used in the website
- React Lazy Load - Lazy loading images
Create a .env file in the root directory and add the following environment variables:
VITE_TMDB_API_BASE_URL=https://api.themoviedb.org/3
VITE_API_KEY=YOUR_TMDB_API_KEY
You can obtain your TMDB API Key from The Movie Database (TMDB).
- Clone the repository:
git clone https://github.com/your-username/me-safwan-07-vkmflix.git
cd me-safwan-07-vkmflix- Install dependencies:
npm install- Run the application:
npm run dev- Build the application (for deployment):
npm run build- Preview the build:
npm run previewThis project uses the TMDB (The Movie Database) API to fetch:
- Trending Movies
- Top Rated Movies
- TV Series
- Movie Trailers
Refer to the official TMDB documentation for more information:
🔗 https://developers.themoviedb.org/3
The website supports three theme modes:
- 🌞 Light Mode
- 🌙 Dark Mode
- 💻 System Mode (Automatically detects system theme)
You can change the theme from the sidebar or the header.
- Displays trending and popular movies in a beautiful carousel.
- Sections for Top Rated Movies, Popular Series, etc.
- "Watch Trailer" button to preview the movie's official trailer.
- Hover effect to highlight the movie.
- Click to navigate to the movie details page.
- Trailer modal for instant preview.
- Toggleable sidebar for navigation.
- Option to switch themes.
- Future feature to search for movies and TV series.
You can easily deploy this project to platforms like Vercel, Netlify, or Coolify.
Here’s a Vercel deployment command:
npm run build
vercel deployThis project is licensed under the MIT License.
If you have any queries or face any issues, feel free to contact us.
📩 Email: support@vkmflix.com
🌐 Website: www.vkmflix.com