VibeWatch is a sleek and user-friendly movie and TV show discovery web application built using React.js and TMDB API. It allows users to search, discover trending content, and manage their own personalized watchlist — all saved locally in the browser!
- 🔍 Search for any Movie or TV Show using keywords
- 🎞️ Discover trending and top-rated content from The Movie Database (TMDB)
- ❤️ Add to Watchlist feature using browser's local storage
- 📱 Responsive UI that works great on mobile, tablet, and desktop
- 🍿 Intuitive UI for browsing, viewing details, and exploring related content
- Frontend: React.js, HTML, CSS, JavaScript
- API: TMDB (The Movie Database)
- State Management: useState, useEffect
- Storage: Local Storage for persistent watchlist
- Styling: CSS Modules / Custom CSS
- Routing: React Router DOM
-
Clone the repository
git clone https://github.com/darshanm17/VibeWatch.git cd VibeWatch -
Install dependencies
npm install
-
Set up TMDB API Key
- Create a
.envfile in the root directory. - Add the following line:
REACT_APP_TMDB_API_KEY=your_tmdb_api_key
- Create a
-
Run the app
npm start
The app will open in your browser at
http://localhost:3000.
VibeWatch/
├── public/
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── MovieCard.jsx
│ │ ├── Watchlist.jsx
│ ├── pages/
│ │ ├── Home.jsx
│ │ ├── Discover.jsx
│ │ ├── MovieDetails.jsx
│ ├── App.js
│ ├── index.js
├── .env
├── package.json
├── README.md
| Home Page | Movie Details | Watchlist |
|---|---|---|
 |
 |
 |
🚀 Check out the live version here: https://your-live-link.com
Darshan M R
Final Year CSE Student at RV Institute of Technology and Management
🔗 GitHub • 📫 darshanmrd17@gmail.com
This project is licensed under the MIT License.
- Make sure to keep your TMDB API Key secure and avoid exposing it in public repositories.
- For production, consider integrating user authentication and storing watchlists in a database.