https://github.com/imacod3r/reactjs-movie-app
Reactjs based movie app + appwrite as Baas.
https://github.com/imacod3r/reactjs-movie-app
appwrite javascript reactjs single-page-applications
Last synced: 28 days ago
JSON representation
Reactjs based movie app + appwrite as Baas.
- Host: GitHub
- URL: https://github.com/imacod3r/reactjs-movie-app
- Owner: ImaCod3r
- Created: 2025-08-11T07:51:19.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-11T08:38:15.000Z (10 months ago)
- Last Synced: 2025-08-11T10:29:55.465Z (10 months ago)
- Topics: appwrite, javascript, reactjs, single-page-applications
- Language: JavaScript
- Homepage: https://reactjs-movie-app-omega.vercel.app
- Size: 2.45 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📋 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 backend services, and styled with TailwindCSS, this Movie App lets users browse trending movies, search titles, and explore content using the TMDB API. It features a responsive layout and a sleek, modern design.
- **[Appwrite](https://appwrite.io/)** is an open-source Backend-as-a-Service (BaaS) platform that provides developers with a set of APIs to manage authentication, databases, storage, and more, enabling rapid development of secure and scalable applications.
- **[React.js](https://react.dev/reference/react)** is a JavaScript library developed by Meta for building user interfaces. It allows developers to create reusable UI components that manage their own state, leading to more efficient and predictable code. React is widely used for developing single-page applications (SPAs) due to its virtual DOM that improves performance and ease of maintenance.
- **[React-use](https://github.com/streamich/react-use)** is a collection of essential React hooks that simplify common tasks like managing state, side effects, and lifecycle events, promoting cleaner and more maintainable code in React applications.
- **[Tailwind CSS](https://tailwindcss.com/)** is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing custom CSS, enabling rapid and responsive UI development.
- **[Vite](https://vite.dev/)** is a modern build tool that provides a fast development environment for frontend projects. It offers features like hot module replacement (HMR) and optimized builds, enhancing the development experience and performance.
## 🔋 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/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/ImaCod3r/reactjs-movie-app.git
cd reactjs-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_TMDB_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://apwr.dev/JSM050)** credentials.
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## Authors
- [@imaCod3r](https://www.github.com/imaCod3r)