🎬 Movie Search Application

A modern, responsive movie search application built with React, TypeScript, and Vite. Search for movies, discover trending films, and explore a vast collection of movies powered by The Movie Database (TMDB) API.

✨ Features

• 🔍 Real-time Movie Search: Search for movies with debounced input to optimize API calls
• 📊 Trending Movies: View the top 5 most searched movies based on search analytics
• 🎨 Beautiful UI: Modern, dark-themed interface with gradient accents and smooth animations
• 📱 Responsive Design: Fully responsive layout that works on all device sizes
• ⭐ Movie Details: View movie ratings, release year, language, and posters
• ⚡ Fast Performance: Built with Vite for lightning-fast development and optimized builds
• 🔐 Backend Integration: Uses Appwrite for tracking search analytics and trending movies

🛠️ Technology Stack

• Frontend Framework: React 19.2.0
• Language: TypeScript
• Build Tool: Vite 7.2.4
• Styling: Tailwind CSS 4.1.18
• Backend: Appwrite 21.5.0
• API: The Movie Database (TMDB) API
• Utilities: react-use (for debouncing)

📸 Screenshots

Home Page

Main page showing the hero section and search interface

Search Results

Movie search results displayed in a responsive grid layout

Trending Movies

Top 5 trending movies based on search analytics

Movie Cards

Detailed movie cards showing poster, rating, language, and year

Mobile View

Responsive design optimized for mobile devices

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• TMDB API key (Get one here)
• Appwrite account and project (Sign up here)

Installation

1. Clone the repository

   git clone <repository-url>
   cd movie-project-react

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_TMBD_API_KEY=your_tmdb_api_key_here
   VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id
   VITE_APPWRITE_DATABASE_ID=your_appwrite_database_id
   VITE_APPWRITE_TABLE_ID=your_appwrite_table_id

4. Set up Appwrite Database

   Create a database and collection in Appwrite with the following structure:

   • Collection name: Your table ID
   • Attributes:
     • searchTerm (String, required)
     • count (Integer, required)
     • movie_id (Integer, required)
     • poster_url (String, required)

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:5173 (or the port shown in your terminal)

📝 Available Scripts

• npm run dev - Start the development server
• npm run build - Build the project for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check for code issues

🏗️ Project Structure

movie-project-react/
├── public/                 # Static assets
│   ├── hero.png           # Hero banner image
│   ├── hero-bg.png        # Background pattern
│   ├── search.svg         # Search icon
│   ├── star.svg           # Star rating icon
│   └── no-movie.png       # Placeholder for missing posters
├── src/
│   ├── components/        # React components
│   │   ├── MovieCard.tsx  # Movie card component
│   │   ├── Search.tsx     # Search input component
│   │   └── Spinner.tsx    # Loading spinner component
│   ├── lib/
│   │   └── appwrite.ts    # Appwrite configuration and functions
│   ├── App.tsx            # Main application component
│   ├── App.css            # Application styles
│   ├── index.css          # Global styles and Tailwind config
│   └── main.tsx           # Application entry point
├── .env                   # Environment variables (create this)
├── package.json           # Project dependencies
└── README.md              # This file

🎯 Key Features Explained

Debounced Search

The search functionality uses debouncing to prevent excessive API calls. The app waits 500ms after the user stops typing before making a search request.

Trending Movies

The application tracks search queries in Appwrite and displays the top 5 most searched movies, updating in real-time as users search.

Movie Data

Each movie card displays:

• Movie poster
• Title
• Rating (out of 10)
• Original language
• Release year

🔧 Configuration

Appwrite Setup

1. Create a new project in Appwrite Cloud
2. Create a database
3. Create a collection with the following attributes:
   • searchTerm (String)
   • count (Integer)
   • movie_id (Integer)
   • poster_url (String)
4. Update your .env file with the project, database, and collection IDs

TMDB API

1. Sign up for a free account at TMDB
2. Generate an API key from your account settings
3. Add the API key to your .env file

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• The Movie Database (TMDB) for providing the movie API
• Appwrite for the backend infrastructure
• Vite for the amazing build tool
• Tailwind CSS for the utility-first CSS framework

---

Made with ❤️ using React and TypeScript