React Movies Application

A modern web application built with React that allows users to search for movies and view trending movies. The app integrates with the IMDB API for movie data and uses Appwrite for backend services.

Features

• 🔍 Search for movies by title
• 🎬 View movie details including title, year, and poster
• 📈 Track trending movies based on search popularity
• ⚡ Fast and responsive UI with Tailwind CSS
• 🔄 Real-time search with debouncing
• 📱 Mobile-friendly design

Tech Stack

• Frontend: React 19
• Styling: Tailwind CSS
• Backend: Appwrite (Database)
• API: IMDB API (via RapidAPI)
• Build Tool: Vite
• Package Manager: npm

Prerequisites

• Node.js (v16 or higher)
• npm (v7 or higher)
• Appwrite account (for database)
• RapidAPI account with IMDB API access

Environment Variables

Create a .env.local file in the root directory and add the following variables:

VITE_RAPID_API_KEY=your_rapidapi_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

Installation

1. Clone the repository:

   git clone https://github.com/your-username/react-movies.git
   cd react-movies

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:5173 in your browser.

Project Structure

src/
├── Components/         # Reusable UI components
│   ├── MovieCard.jsx   # Movie card component
│   ├── Search.jsx      # Search component
│   └── Spinner.jsx     # Loading spinner component
├── appwrite.js         # Appwrite service configuration
├── App.jsx             # Main application component
├── index.css           # Global styles
└── main.jsx            # Application entry point

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint

Contributing

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