https://github.com/janvi100104/your-tv
A simple and interactive Movie App built with React . This project fetches movie data and allows users to explore details in a clean UI.
https://github.com/janvi100104/your-tv
appwrite appwrite-database css3 movie-web-app open-source react tailwindcss tmdb-api
Last synced: 2 months ago
JSON representation
A simple and interactive Movie App built with React . This project fetches movie data and allows users to explore details in a clean UI.
- Host: GitHub
- URL: https://github.com/janvi100104/your-tv
- Owner: janvi100104
- License: mit
- Created: 2025-08-23T18:29:46.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-23T18:59:46.000Z (10 months ago)
- Last Synced: 2025-08-24T07:11:24.241Z (10 months ago)
- Topics: appwrite, appwrite-database, css3, movie-web-app, open-source, react, tailwindcss, tmdb-api
- Language: JavaScript
- Homepage: https://your-tv.vercel.app/
- Size: 2.83 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Your TV
A modern movie search and discovery web application built with React and Vite. Instantly search for movies, view trending titles, and enjoy a smooth, responsive user experience.
## Features
- **Search Movies:** Find movies by title using the search bar with debounced input for performance.
- **Trending Movies:** See a list of trending movies fetched from a backend (Appwrite integration).
- **Popular Movies:** Browse popular movies by default.
- **Movie Details:** View movie posters and titles in a clean card layout.
- **Loading Spinner:** Visual feedback while fetching data.
- **Error Handling:** User-friendly error messages for failed searches or network issues.
- **Responsive Design:** Works well on desktop and mobile devices.
## Tech Stack
- **Frontend:** React, Vite
- **API:** [The Movie Database (TMDb) API](https://www.themoviedb.org/documentation/api)
- **Backend:** Appwrite (for trending movies and search count)
- **Styling:** CSS
## Getting Started
### Prerequisites
- Node.js (v16 or above recommended)
- npm or yarn
- TMDb API Key ([Get one here](https://www.themoviedb.org/settings/api))
- Appwrite instance (optional, for trending/search count)
### Installation
1. **Clone the repository:**
```bash
git clone
cd movie-app
```
2. **Install dependencies:**
```bash
npm install
# or
yarn install
```
3. **Set up environment variables:**
- Create a `.env` file in the root directory.
- Add your TMDb API key:
```env
VITE_TMDB_API_KEY=your_tmdb_api_key_here
```
- (Optional) Configure Appwrite credentials in `src/appwrite.js`.
4. **Run the development server:**
```bash
npm run dev
# or
yarn dev
```
The app will be available at `http://localhost:5173` (default Vite port).
## Project Structure
```
movie-app/
├── public/
├── src/
│ ├── assets/ # Images and icons
│ ├── components/ # React components (MovieCard, Search, Spinner)
│ ├── App.jsx # Main app logic
│ ├── appwrite.js # Appwrite integration
│ └── main.jsx # Entry point
├── index.html
├── package.json
├── vite.config.js
└── README.md
```
## Environment Variables
- `VITE_TMDB_API_KEY`: Your TMDb API key (required)
- Appwrite credentials: Set in `src/appwrite.js` (if using Appwrite)
## Credits
- Movie data provided by [TMDb](https://www.themoviedb.org/)
- Built with [React](https://react.dev/) and [Vite](https://vitejs.dev/)
## License
This project is licensed under the MIT License.