Movie Mate Your Ultimate Movie Search Companion, a React-based movie search application built with Vite , Tailwind CSS v4, ESLint, React Use , and powered by Appwrite for database management and TMDB API for fetching movie data.

Screenshot of Movie Mate in action.

🌟 Features

• Smart Movie Search: Users can search for movies using the TMDB API. The search queries are saved in the Appwrite database to track trends 1. Most Searched Movies : Display the most searched movies by users based on the data stored in the Appwrite database.

• Debounced Search: Using react-use's useDebounce hook, the app waits 500ms after the user stops typing before making an API request, saving unnecessary data fetches and improving performance.

• Movie Details: Show essential details such as the movie name, rating, and release date fetched from the TMDB API.

🛠️ Tech Stack

• Frontend: React (with Vite), Tailwind CSS v4 for styling

• State Management & Hooks: react-use for advanced hooks like useDebounce

• Linting & Formatting: ESLint for code quality

• Database: Appwrite for storing user search queries

• API: TMDB API for fetching movie data

• Environment Variables: .env.local file for managing sensitive keys like TMDB API key and Appwrite collection keys.

🎥 Usage

• Search for Movies: Enter a movie name in the search bar. The app will fetch results from the TMDB API and display them. Thanks to the useDebounce hook, it waits 500ms after you stop typing to make the API call, reducing unnecessary requests.

• View Most Searched Movies: The homepage will show a list of the most searched movies by users, based on data stored in the Appwrite database.

• Movie Details: Click on a movie to view more details like ratings and release dates.

🚀 Steps to Run Locally

1. Clone the Repository

git clone https://github.com/paulopbi/movie-mate.git
cd movie-mate

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables:

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

VITE_TMDB_API_KEY=your_tmdb_api_key_here
VITE_APPWRITE_ENDPOINT=your_appwrite_endpoint_here
VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id_here
VITE_APPWRITE_COLLECTION_ID=your_appwrite_collection_id_here

4. Run the Development Server

npm run dev
# or
yarn dev

🤝 Contributing Feel free to contribute to this project by opening issues or submitting pull requests. All contributions are welcome!