Watcho

Netlify Status

Welcome to the 🎬 Watcho app! 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

banner

🛠️ Built with

  • Frontend: ReactJS, NextJS, TailwindCSS
  • API: TMDB API
  • Version Control: Git
  • Hosting: Netlify, Github Pages, Vercel, CloudFlare

Features

  • Browse movies by genre
  • Search for specific movies
  • View movie details, including plot summary, cast, and ratings

Table of contents

Screenshots

Home Page

Trending & Popular Section

Now Playing and Upcoming Section

Movies Genre

TV Series Genre

Search Results

Music Search Genre

Movie Detail

Summary

An entertainment web app built with Next.js and TailwindCSS that allows users to search for movies and tv shows.

Links

Details

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

Future improvements

  • 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

Useful resources

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

  1. Create an API KEY for the TMDB API
  2. Create an .env.local file in the root directory of the project
  3. Add 2 environment variables to the .env.local file:

// .env.local

TMDB_ENDPOINT="https://api.themoviedb.org/3"
TMDB_API_KEY="YOUR_TMDB_API_KEY"

Installing

Clone the repository and run the development server:

npm install
npm run dev
# or
yarn install
yarn dev

GitHub

View Github