https://github.com/y2-znt/CineQuik
CineQuik is an app for movie enthusiasts to explore detailed film information, watch trailers, and more. 🍿
https://github.com/y2-znt/CineQuik
motion react react-query react-router-dom tanstack-query tanstack-react-query
Last synced: 10 months ago
JSON representation
CineQuik is an app for movie enthusiasts to explore detailed film information, watch trailers, and more. 🍿
- Host: GitHub
- URL: https://github.com/y2-znt/CineQuik
- Owner: y2-znt
- Created: 2023-12-22T22:26:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-15T06:27:19.000Z (about 1 year ago)
- Last Synced: 2025-08-19T18:11:51.068Z (10 months ago)
- Topics: motion, react, react-query, react-router-dom, tanstack-query, tanstack-react-query
- Language: JavaScript
- Homepage: https://cinequik.vercel.app
- Size: 32.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 🎬 CineQuik – Your Ultimate Movie Explorer
[](https://cinequik.vercel.app/)
**A modern and immersive movie discovery platform powered by TMDB API**
[Live Demo](https://cinequik.vercel.app) •
[Features](#-features) •
[Getting Started](#-getting-started) •
[Tech Stack](#-tech-stack) •
[Implementation](#-key-features-implementation) •
[Contributing](#-contributing) •
[Support](#-support)
## 🌟 Features
- **🔍 Intuitive Search**: Instantly find any movie from the TMDB database
- **🔥 Curated Lists**: Explore “Popular” and “Top-Rated” movie selections
- **📄 Detailed Info**: See runtime, ratings, release dates, trailers, similar movies & more
- **📽 Watch Options**: Direct links to official providers when available
- **⚡ Fast Performance**: Vite-powered builds with lazy loading and code splitting
- **💅 Modern UI**: Sleek, responsive layout with smooth transitions
---
## 🛠️ Tech Stack
### Core
- **Frontend Framework**: React 18
- **Build Tool**: Vite
- **Routing**: React Router v6
- **State & Caching**: TanStack Query (React Query)
### Libraries & Tools
- **HTTP Client**: Axios
- **UI/UX Enhancements**:
- Swiper.js (Carousels)
- React-Youtube
- Motion (Framer Motion-compatible)
- **API**: [TMDB – The Movie Database](https://www.themoviedb.org/)
---
## 🚀 Getting Started
### 📦 Prerequisites
- Node.js (v14+)
- npm or yarn
- TMDB API key (free)
### 🔧 Installation
1. Clone the repo
```bash
git clone https://github.com/Yoni-Deserbaix/CineQuik.git
```
2. Move into the project folder
```bash
cd CineQuik
```
3. Install dependencies
```bash
npm install
# or
yarn install
```
4. Create a `.env` file at the root of the project and add your TMDB API key:
```bash
VITE_API_KEY=your_api_key_here
```
5. Run in dev mode
```bash
npm run dev
# or
yarn dev
```
Visit http://localhost:5173 - You're ready to explore! 🎉
---
## 💡 Key Features Implementation
### 🔄 Data Fetching & Caching
- Cached queries with stale-time strategies
- Real-time search with debounced inputs
- Error handling & loading skeletons per section
### 🎯 UX & UI
- Mobile-first responsive design
- Custom skeletons, animations and page transitions
- Lazy loaded components for fast initial load
---
## 🤝 Contributing
We welcome contributions! 🧠✨
You can improve features, fix bugs or suggest ideas.
[](https://github.com/Yoni-Deserbaix/CineQuik/graphs/contributors)
### Contribution Guide
1. Fork the repo
2. Create a new branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add AmazingFeature'`)
4. Push to your fork (`git push origin feature/AmazingFeature`)
5. Submit a pull request 🧃
---
## 📝 Support
- 📮 Found a bug? [Open an issue](https://github.com/Yoni-Deserbaix/CineQuik/issues/new)
- 💡 Have a feature idea? [Request it here](https://github.com/Yoni-Deserbaix/CineQuik/issues/new)
---
## 🎨 Credits
- 🎬 [TMDB API](https://www.themoviedb.org/) – the backbone of the movie data
- 💡 Inspired by multiple open-source movie discovery apps
---
Made with ❤️ by [y2-znt](https://github.com/y2-znt)