A modern React application for discovering and exploring movies. Built with React 19, Vite, and Tailwind CSS, this app offers a sleek interface to search for movies, view trending titles, and explore film details.
- Movie Search: Instantly search through thousands of movies with real-time results
- Trending Movies: Discover what's popular based on user search patterns
- Responsive Design: Enjoy a seamless experience across all devices
- Lazy Loading: Optimized image loading for better performance
- Sort Options: Organize movies by popularity or release date
- Modern UI: Clean, intuitive interface with smooth animations
- Frontend: React 19, TailwindCSS 4
- Build Tool: Vite 6
- Backend: Appwrite for data storage and retrieval
- API: The Movie Database (TMDB) API
- Performance: React Lazy Load Image Component
- State Management: React Hooks (useState, useEffect)
-
Clone the repository:
git clone https://github.com/Matinj031/React-MovieApp.git cd React-MovieApp -
Install dependencies:
npm install
-
Create a
.env.localfile in the root directory with your API keys:VITE_TMDB_API_KEY=your_tmdb_api_key VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id VITE_APPWRITE_DATABASE_ID=your_appwrite_database_id VITE_APPWRITE_COLLECTION_ID=your_appwrite_collection_id -
Start the development server:
npm run dev
- Search Movies: Type in the search bar to find movies
- Sort Results: Click on the sort dropdown to organize results
- View Trending: See what movies are trending based on user searches
- Explore Details: View ratings, release dates, and languages for each movie
- 3D movie poster displays with Three.js
- Smooth scrolling with Lenis
- Engaging animations with GSAP and ScrollTrigger
- Detailed movie view with additional information
- User authentication for personalized recommendations
This project is licensed under the MIT License - see the LICENSE file for details.
- The Movie Database (TMDB) for their comprehensive API
- Appwrite for backend services
- React and Vite for the amazing development experience