Welcome to the 🎬
Watchoapp! Watcho allows user to browse and search for their favorite movies or being based on any particular genre like horror, action, mystry, crime, family, fantasy, romance, music, and much More. Explore our app and you would fall in love 😍 for sure.
Author : Sayan Maity
🛠️ Built with
- Frontend: ReactJS, NextJS, TailwindCSS
- API: TMDB API
- Version Control: Git
- Hosting: Netlify, Github Pages, Vercel, CloudFlare
- Browse movies by genre
- Search for specific movies
- View movie details, including plot summary, cast, and ratings
Table of contents
Trending & Popular Section
Now Playing and Upcoming Section
TV Series Genre
Music Search Genre
An entertainment web app built with Next.js and TailwindCSS that allows users to search for movies and tv shows.
Project purpose and goal
The main purpose of this project is to take advantages of the capabilities of Next.js and have a functional web app up and running quickly. Secondly, I want to become familiar with the framework itself and its convenient features.
Web stack and explanation
- Add a bookmark page to store the user’s favorite movies and tv shows
- Add the video playing feature when the user hover over the card and play the video
- Add authentication so that the user can sign up and log in to save their favorite movies and tv shows permanently
- Adjust the size of the card item in the last row so that the image won’t be stretched out
- Solution for Cannot read Property ‘slice’ of Undefined
- How to get all available pages in the same request?
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- Create an API KEY for the TMDB API
- Create an
.env.localfile in the root directory of the project
- Add 2 environment variables to the
// .env.local TMDB_ENDPOINT="https://api.themoviedb.org/3" TMDB_API_KEY="YOUR_TMDB_API_KEY"
Clone the repository and run the development server:
npm install npm run dev # or yarn install yarn dev