A Movie Application

📋 Table of Content

• ✨ Introduction
• 🧩 Features
• 💻 Tech Stack
• ⚙️ Getting Started
• 📬 Contact

✨ Introduction

Welcome to the Watcher website. This site is thoughtfully designed to blend elegance with technology, providing the user with simplicity and fast acessibility to all of the movies. Built with a modern tech stack and refined UI/UX to enhance the interactive experience.

🧩 Features

📽️ Browse All Movies – Explore a wide range of movies available on the platform.

🔎 Search Movies – Easily search for specific movies using a search function.

📈 Trending Movies Algorithm – Displays trending movies based on a dynamic algorithm.

🎨 Modern UI/UX – A sleek and user-friendly interface designed for a great experience.

📱 Responsive design – With Tailwind CSS, it is optimized across mobile, tablet, and desktop screens.

and many more, including code architecture and reusability.

💻 Tech Stack

• JavaScript

• React 19

• React-use

• Tailwind CSS

• Vite

• Appwrite

⚙️ Getting Started

Follow these steps to set up the project locally on your machine.

📃 Prerequisites

• Git
• Node.js
• npm

🛠️ Installation & Development

Installation

# Clone the repository
git clone https://github.com/AnasAlhwid/the-watcher.git

cd the-watcher    # Navigate to the directory

npm install     # Install dependencies

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_TMDB_API_KEY=

VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_COLLECTION_ID=

Replace the placeholder values with your actual TMDB API and Appwrite credentials.

Development

npm run dev     # Start development server

Open http://localhost:5173 in your browser to view the project.

🧹 Code Quality

npm run lint       # Lints the code with ESLint

🏗️ Production Build

npm run build      # Builds the project

npm run preview    # Serves the production build locally

📬 Contact

• Email
• LinkedIn
• X
• GitHub