https://github.com/shailendrasingh189/trailerly
🎬 Trailerly – A modern movie search app built with React.js. 🔎 Search movies, view details, and watch trailers instantly. 🛠️ Tech: React.js · TMDb API · React Router
https://github.com/shailendrasingh189/trailerly
appwrite react-router reactjs tailwindcss tmdb tmdb-api
Last synced: 3 months ago
JSON representation
🎬 Trailerly – A modern movie search app built with React.js. 🔎 Search movies, view details, and watch trailers instantly. 🛠️ Tech: React.js · TMDb API · React Router
- Host: GitHub
- URL: https://github.com/shailendrasingh189/trailerly
- Owner: Shailendrasingh189
- Created: 2025-07-01T09:20:01.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-01T10:32:32.000Z (12 months ago)
- Last Synced: 2025-07-01T11:39:40.899Z (12 months ago)
- Topics: appwrite, react-router, reactjs, tailwindcss, tmdb, tmdb-api
- Language: JavaScript
- Homepage: https://poetic-selkie-1b80ac.netlify.app/
- Size: 6.07 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎬 Trailerly
> Discover movies, explore detailed info, and watch trailers instantly with a sleek UI. Built with **React.js**, **Appwrite**, **Tailwind CSS**, and powered by the **TMDB API**.
---
## 🧭 Table of Contents
* 🤖 [Introduction](#-introduction)
* ⚙️ [Tech Stack](#%EF%B8%8F-tech-stack)
* 🔋 [Features](#-features)
* 🤸 [Quick Start](#-quick-start)
* 🕸️ [Snippets](#%EF%B8%8F-snippets-code-to-copy)
* 🔗 [Assets](#-assets)
* 🚀 [More](#-more)
---
## 🤖 Introduction
**Trailerly** is a movie discovery web application where users can:
* Browse trending movies
* Search any movie title
* View complete details like plot, cast, rating
* Watch trailers directly
It features a **modern, responsive design** and is powered by the **TMDB API** for real-time movie data and trailers.
---
## ⚙️ Tech Stack
### 🔹 React.js
A powerful JavaScript library by Meta for building responsive UIs.
### 🔹 Appwrite
An open-source Backend-as-a-Service (BaaS) platform used for future-ready authentication and database services.
### 🔹 Tailwind CSS
A utility-first CSS framework for rapidly building custom, responsive UI.
### 🔹 TMDB API
The Movie Database API used to fetch real-time data about movies, posters, ratings, and trailers.
### 🔹 Vite
A fast modern frontend build tool that improves development performance.
---
## 🔋 Features
* 🔎 **Search Movies** – Search movies by name with instant results
* 🎬 **Watch Trailers** – Click to watch official trailers via YouTube
* 📊 **Trending Section** – Displays dynamic trending movies
* 📝 **Detailed Movie Pages** – Shows title, overview, release date, rating, cast
* 📱 **Responsive Design** – Optimized for all screen sizes
---
## 🤸 Quick Start
### Prerequisites
* Node.js
* npm
* Git
### Clone the Repository
```bash
git clone https://github.com/your-username/trailerly.git
cd trailerly
```
### Install Dependencies
```bash
npm install
```
### Set Environment Variables
Create a `.env.local` file in the root and add:
```env
VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_MOVIE_API_BASE_URL=tmdb_movie_api_base_url
VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id
VITE_APPWRITE_DATABASE_ID=your_appwrite_database_id
VITE_APPWRITE_COLLECTION_ID=your_appwrite_collection_id
VITE_APPWRITE_ENDPOINT=appwrite_endpoint_url
```
### Run the App
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to view the app.
---
## 🕸️ Snippets (Code to Copy)
> You can explore reusable components like:
* `components/MovieCard.jsx`
* `components/Search.jsx`
* `components/Spinner.jsx`
---
## 🔗 Assets
* Logo and icons from the TMDB official kit
* Trailer thumbnails via YouTube API
---
## 🚀 More
I wanted to build more amazing projects. Level up with advanced React.js or dive into full-stack apps with Next.js and nodejs !
---
## 🙌 Contribution
Pull requests are welcome. For major changes, open an issue first to discuss what you would like to change.
---
## ✨ Inspired
by Mastery Javscript
## 📄 License
MIT
---
## 👨💻 Author
**Your Name** – [LinkedIn](www.linkedin.com/in/shailendrasingh189) | [GitHub](www.github.com/in/shailendrasingh189)
---