Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdulvahabaa/movie-app
Built with React.js for the user interface, Appwrite for the Trending Movies Algorithm, and styled with TailwindCSS.
https://github.com/abdulvahabaa/movie-app
appwrite movie-web-app reactjs tmbd-api vite
Last synced: about 19 hours ago
JSON representation
Built with React.js for the user interface, Appwrite for the Trending Movies Algorithm, and styled with TailwindCSS.
- Host: GitHub
- URL: https://github.com/abdulvahabaa/movie-app
- Owner: abdulvahabaa
- Created: 2025-01-29T19:31:14.000Z (about 21 hours ago)
- Default Branch: main
- Last Pushed: 2025-01-29T20:20:53.000Z (about 20 hours ago)
- Last Synced: 2025-01-29T20:35:33.643Z (about 20 hours ago)
- Topics: appwrite, movie-web-app, reactjs, tmbd-api, vite
- Language: JavaScript
- Homepage:
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Movie Application
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🔖 [Quick Start](#quick-start)
Built with React.js for the user interface, Appwrite for the Trending Movies Algorithm, and styled with TailwindCSS.
- React.js
- Appwrite
- Tailwind CSS
## 🔋 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.
👉 **Responsiveness**: Fully responsive design that works seamlessly across devices.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
**Cloning the Repository**
```bash
git clone https://github.com/abdulvahabaa/movie-app.git
cd movie-app
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env.local` in the root of your project and add the following content:
```env
VITE_IMDB_API_KEY=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_COLLECTION_ID=
```
Replace the placeholder values with your actual **[TheMovieDatabase API](https://developer.themoviedb.org/reference/intro/getting-started)** and **[Appwrite](https://appwrite.io/)** credentials. You can obtain these credentials by signing up on the [TheMovieDatabase](https://developer.themoviedb.org/reference/intro/getting-started) and creating a new project on the [Appwrite](https://appwrite.io/) dashboard.
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
That's it! You should now be able to browse and search for movies using the provided features.
**Note**: Make sure to replace the placeholder values in the `.env.local` file with your own API keys and credentials.