[WIP] # 🎬 Movie Browser App A modern, responsive movie browser application built with React and TypeScript that allows users to explore movies, view details, and discover new content using The Movie Database (TMDB) API. ![Movie Browser App](https://githu...

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original description:

🎬 Movie Browser App

A modern, responsive movie browser application built with React and TypeScript that allows users to explore movies, view details, and discover new content using The Movie Database (TMDB) API.

🌟 Features

• 🏠 Home Page: Featured movie with category-based movie lists (Horror, Comedy, Family, Action)
• 🔍 Search: Find movies by title with real-time search functionality
• 📱 Browse Movies: Comprehensive movie browsing with filtering options
• 🎭 Movie Details: Detailed movie information including:
  • Movie gallery and images
  • Similar movie recommendations
  • Video trailers and clips
  • Cast and crew information
• 📅 Upcoming Movies: Preview of upcoming movie releases
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
• 🌙 Dark Theme: Sleek dark interface with modern styling
• ⚡ Fast Performance: Built with Vite for optimal loading speeds

🚀 Demo

Check out the live demo: https://browse-movies-app.vercel.app/

🛠️ Tech Stack

• Frontend Framework: React 19 with TypeScript
• Build Tool: Vite
• Styling: TailwindCSS 4
• UI Components: shadcn/ui with Radix UI
• Routing: React Router DOM 7
• Icons: Lucide React
• Carousel: Embla Carousel
• API: The Movie Database (TMDB)

📦 Installation

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• TMDB API key

Setup Instructions

1. Clone the repository

   git clone https://github.com/Seveneqqq/movie-browser-app.git
   cd movie-browser-app

2. Install dependencies

   npm install

3. Environment Configuration

   Create a .env file in the root directory and add your TMDB API key:

   VITE_API_KEY="Bearer YOUR_TMDB_API_KEY_HERE"

   Getting a TMDB API Key:

   • Visit TMDB and create an account
   • Go to API Settings
   • Generate your API key
   • Copy the API key and paste it in the .env file

4. Start the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:5173 to view the application

🏗️ Project Structure

movie-browser-app/
├── public/                 # Static assets
├── src/
│   ├── api/               # API service functions
│   │   ├── browseMovies.ts
│   │   ├── getCategoryList.ts
│   │   ├── getMainMovie.ts
│   │   ├── getMovieDetails.ts
│   │   ├── getMovieVideos.ts
│   │   ├── getSimiliarMovies.ts
│   │   ├── getUpcomingMovies.ts
│   │   └── searchMovies.ts
│   ├── components/        # Reusable components
│   │   ├── ui/           # shadcn/ui components
│   │   ├── home-page/    # Home page specific components
│   │   ├── movie-details-page/ # Movie details components
│   │   ├── Header.tsx
│   │   ├── MovieList.tsx
│   │   └── Error.tsx
│   ├── pages/            # Page components
│   │   ├── Home.tsx
│   │   ├── BrowseMovies.tsx
│   │   ├── MovieDetails.tsx
│   │   ├── Search.tsx
│   │   └── UpcomingMovies.tsx
│   ├── lib/              # Utility functions
│   ├── App.tsx           # Main application component
│   └── main.tsx          # Application entry point
├── .env                  # Environment variables
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

🔧 Available Scripts

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

🌐 API Reference

This application uses The Movie Database (TMDB) API to fetch movie data.

Main API Endpoints Used:

• Discover Movies: /discover/movie - Get popular movies
• Movie Details: /movie/{movie_id} - Get specific movie details
• Movie Videos: /movie/{movie_id}/videos - Get movie trailers and clips
• Similar Movies: /movie/{movie_id}/similar - Get similar movie recommendations
• Search Movies: /search/movie - Search for movies by title
• Upcoming Movies: /movie/upcoming - Get upcoming movie releases

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the project
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 open source and available under the MIT License.

🙏 Acknowledgements

• The Movie Database (TMDB) for providing the movie data API
• shadcn/ui for the beautiful UI components
• Tailwind CSS for the utility-first CSS framework
• Lucide for the icon library

---

Made with ❤️ using React and TypeScript to jest okej ale musisz zrobić zdjecia 5 sekund pozniej bo nie zdazyla sie zaladowac strona

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frontend-arduino	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2025 0:51am