MovieBox

MERN • TypeScript • Nextjs • Scss • Bootstrap


Description

A feature-rich Full-Stack movie data web app, inspired by popular movie streaming services like Netflix and Hulu. This project was developed using Next.js, TypeScript, Node.js, Express.js, MongoDB with mongoose, SCSS, Bootstrap and uses JWT for authentication. Next.js leverages the App Router for efficient navigation, improved SEO, and server-side rendering (SSR) for faster page loads. The platform integrates with the TMDB (The Movie Database) API to access a vast repository of film data, including movie details, cast information, trailers, and reviews. This integration enables the platform to offer users a comprehensive and up-to-date library of movies and TV shows. Users can search for their favorite films, explore curated lists, discover new movies, and change various settings.

It also has an account system with authentication allowing users to signup, login or join as a guest

In addittion, The UI/UX is designed to be unique and intuitive, with a focus on easy navigation and accessibility, with support for both light and dark mode themes.

Features

  • Account system with authentication

    Users can login, signup or join as a guest. Making an account allows the user to add movies to lists

  • Movies & Shows page

    Page's displaying a list of movies and shows seperated by different genere's, such as Action, Animation, Documentery, Etc.

  • Discover page

    Use's pagination and allows you to explore many diffrent movie titles and shows, also has a search bar to find a specific film

  • Settings menu

    The settings menu allows you to change the websites theme and filter out specific content. Changes are saved in localstorage and load when ever you visit the website again

  • Data & film info

    Each movie and show displays various metrics showing, the rating, cast, description, run time, etc. Addittionaly, it will also display similar films and shows to the one your currently viewing.

  • show info

    For shows, you can view a list of seasons and episodes with information about each episode

  • Mobile support and responsive design

    The project was built with resposnvie design ensuring flexability accross different devices