Find movies you'll enjoy — without the hassle.
A modern, responsive movie discovery web application built with React. Browse thousands of movies, search in real time, and see what's trending based on actual user searches.
🔗 Live Demo: react-project-api-fetching.vercel.app
- 🔍 Real-time Search — Search through thousands of movies with debounced input for optimized API calls
- 🔥 Trending Movies — Trending algorithm powered by Appwrite: tracks search counts and ranks the most searched movies
- 🎞️ All Movies Grid — Browse popular movies with poster, rating, language & release year
- ⭐ Ratings Display — Movie ratings fetched live from the API
- 📱 Fully Responsive — Works smoothly on mobile, tablet & desktop
- 🌙 Modern Dark UI — Sleek dark theme with gradient accents
| Technology | Purpose |
|---|---|
| React | UI library |
| Tailwind CSS | Styling |
| TMDB API | Movie data source |
| Appwrite | Backend (trending searches database) |
| Vercel | Deployment |
- Every time a user searches for a movie, the search term is saved/updated in an Appwrite database
- The search count for that movie is incremented
- The trending section queries the top 5 most-searched movies, ordered by count
- Graceful error handling — if the backend is unavailable, the rest of the app keeps working
# Clone the repository
git clone https://github.com/Frontend-website-developer/react-project-api-fetching.git
# Navigate into the project
cd react-project-api-fetching
# Install dependencies
npm install
# Create a .env file and add your keys
VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id
VITE_APPWRITE_DATABASE_ID=your_database_id
VITE_APPWRITE_COLLECTION_ID=your_collection_id
# Run the development server
npm run dev| Home & Search | Movie Grid |
|---|---|
 |
 |
Syed Sajid Ali — Frontend Developer, Doha, Qatar
- GitHub: @Frontend-website-developer
- Portfolio: portfolio-developer-website.netlify.app