Movie DB (Moodflix)

Movie Info Website

Description

Movie DB (Moodflix) is a dynamic movie information platform designed to help beginners learn React.js through a real-world project. Leveraging React.js for a fast and interactive UI, Appwrite for a robust backend and trending algorithm, and Tailwind CSS for sleek, responsive styling, Moodflix lets users explore detailed movie data, search titles, and view trending picks in a modern interface.

Tech Stack

• React.js
• Appwrite
• Tailwind CSS

🔋 Features

• Browse All Movies: Explore a wide catalog of films with posters, overviews, and ratings.
• Search Movies: Quickly find movies by title using a built-in search function.
• Trending Movies Algorithm: Automatically highlights trending titles based on user interactions and view counts.
• Modern UI/UX: Clean, intuitive design ensuring a seamless browsing experience.
• Fully Responsive: Enjoy consistent functionality and layout across desktops, tablets, and mobile devices.

Installation

git clone https://github.com/PathumSandeepa/Movie-DB.git
cd Movie-DB
npm install

Environment Variables

Create a .env.local file in the root directory with the following content:

VITE_TMDB_API_KEY=***********************
VITE_APPWRITE_PROJECT_ID=***********************
VITE_APPWRITE_DATABASE_ID=***********************
VITE_APPWRITE_COLLECTION_ID=***********************

How to Create VITE_TMDB_API_KEY

1. Visit TMDB website and sign up.
2. Log in and navigate to API Documentation → API Preference.
3. Copy the Credentials header and set it as your VITE_TMDB_API_KEY.

Appwrite Setup

1. Go to Appwrite and create an account.
2. Create a new project—use the Project ID for VITE_APPWRITE_PROJECT_ID.
3. Set up a database—use the Database ID for VITE_APPWRITE_DATABASE_ID.
4. Create a collection—use the Collection ID for VITE_APPWRITE_COLLECTION_ID.

Collection Attributes

Add these attributes in your Appwrite collection to support search tracking and poster display:

• searchTerm (string, max length: 1000, required)
• count (integer, default: 1, optional)
• poster_url (string, max length: 1000, required)
• movie_id (integer, required)

Usage

After configuration, start the development server:

npm run dev

License

This project has no license.