A modern, responsive movie discovery application built with React 19 and powered by The Movie Database (TMDB) API. Browse trending movies, view detailed information, and enjoy a sleek dark-themed interface.
- 🔥 Trending Movies - Discover the most popular movies of the week
- 🎥 Detailed Movie Info - View comprehensive details including ratings, runtime, budget, and more
- 📱 Fully Responsive - Optimized for all screen sizes with mobile-first design
- 🌙 Dark Theme - Beautiful dark UI with smooth animations and transitions
- 🔐 User Authentication - Login and signup functionality
- ⚡ Fast Performance - Built with Vite for lightning-fast development and builds
- 🎨 Modern UI/UX - Gradient effects, hover animations, and polished interactions
https://movie-app-eight-blond-57.vercel.app/
| Technology | Purpose |
|---|---|
| React 19 | Frontend UI library |
| Vite 7 | Build tool & dev server |
| Tailwind CSS 4 | Utility-first CSS framework |
| React Router 7 | Client-side routing |
| Lucide React | Beautiful icon library |
| React Toastify | Toast notifications |
| TMDB API | Movie data source |
movie-app/
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable components
│ │ ├── FilmCard/ # Movie card component
│ │ ├── Footer/ # Footer component
│ │ ├── Loading/ # Loading spinner
│ │ └── Navbar/ # Navigation bar
│ ├── pages/ # Page components
│ │ ├── Home page/ # Trending movies display
│ │ ├── Movie Details/ # Individual movie details
│ │ ├── Login Page/ # User login
│ │ ├── SignUp page/ # User registration
│ │ └── Not Found/ # 404 error page
│ ├── App.jsx # Main app component
│ ├── main.jsx # App entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
└── package.json # Dependencies & scripts
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/mohamedosama2004/movie-app.git cd movie-app -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint for code quality |
This project uses The Movie Database (TMDB) API to fetch movie data.
- Trending Movies:
GET /trending/movie/week - Movie Details:
GET /movie/{movie_id}
Create a new account with email and password, or use social login options (Google, Facebook, X/Twitter).
Welcome back screen with email/password authentication and "Remember me" functionality.
Animated Pac-Man style loading screen with the tagline "LOADING YOUR CINEMATIC EXPERIENCE".
Browse trending movies in a responsive grid layout with ratings, release dates, and quick action buttons.
Detailed movie information including backdrop image, poster, rating, runtime, genre tags, overview, and action buttons (Watch Now, Add to Favorites, Share).
Interactive movie card with:
- Hover effects and animations
- Rating badge with star icon
- Favorite button
- Quick action buttons for play and details
Responsive navigation with:
- Animated logo
- Desktop and mobile menu support
- Active link highlighting
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- TMDB for providing the movie data API
- Lucide for the beautiful icon set
- Tailwind CSS for the utility-first CSS framework