Spectre - это стриминговый сервис на основе подписки, который позволяет нашим пользователям смотреть фильмы, мультфильмы на устройстве, подключенном к Интернету.

Веб-приложение Spectre включает в себя:

• Удобный и красивый интерфейс
• Различные фильтрации фильмов
• Страницы актеров и информация о них
• Отдельные страницы фильмов
• Панель администратора
• Личный кабинет пользователя
• Список фильмов для просмотра позже
• Рейтинги и комментарии к фильмам и актерам
• Сохранение времени просмотра, для продолжения в любое другое время в места остановки
• Поиск фильмов и актеров
• Полная информация о фильмах
• Сохранение истории просмотров фильмов

Backend часть была реализована на NodeJS, Express. В качестве СУБД был выбран MongoDB. Frontend был разработан на React, Typescript. Также были использованы другие различные фреймворки и библиотеки, их список вы можете посмотреть в файлах package.json.

Интерфейс кинотеатра Страницы регистрации и авторизации: Все поля для ввода имеют валидации как на клиенте так и на сервере. На сервере была использована библиотека Express-Validator. Для безопасного хранения пароля, была использована библиотека bcrypt.

Главная страница кинотеатра: Тут для слайдера использована библиотека React-slick. Все было реализовано с идеей того, чтобы пользователь как можно меньше нажимал на кнопку мыши.

Страница отдельного фильма: На этой странице пользователь может начать просмотр фильма, прочитать информацию о фильме, познакомится с актерским составом, оставить комментарии и рейтинги.

Страница просмотра: Как можно увидеть на картинках, если пользователь смотрел фильм, остановился и вернулся к просмотру через какое-то время, то он увидит перед собой модальное окно, которое предложит продолжить просмотр.

Страница фильтрации: Пользователю доступны фильтрации по: жанру, году, рейтингу, языку.

Страница актеров: На этой странице пользователь может увидеть всех доступных актеров, также может искать по имени.

Страница актера: Пользователь может оставить свое мнение об этом актере.

А так выглядит страница актера, если в кинотеатр уже добавлены фильмы с этим актером.

Панель администратора:

Spectre is a subscription-based streaming service that allows our users to watch movies, cartoons on an internet-connected device.

The Spectre web application includes:

• User-friendly and beautiful interface
• Various filterings of movies
• Actors' pages and information about them
• Individual movie pages
• Admin Panel
• User's personal account
• List of movies to watch later
• Ratings and comments on films and actors
• Save the viewing time, to continue at any other time at the stop location
• Search for movies and actors
• Full information about the films
• Saving movie viewing history

Backend part was implemented on Node JS, Express. MongoDB was selected as the DBMS. Frontend was developed on React, Typescript. Various other frameworks and libraries were also used, you can see a list of them in the package.json files.

Interface Registration and authorization pages:   All input fields have validations both on the client and on the server. The Express-Validator library was used on the server. For secure password storage, the bcrypt library was used.

Home page of the cinema: Here the React-slick library is used for the slider. Everything was implemented with the idea that the user should click on the mouse button as little as possible.

Individual movie page: On this page, the user can start watching the movie, read information about the movie, get acquainted with the cast, leave comments and ratings.

View page: As you can see in the pictures, if the user watched the movie, stopped and returned to viewing after some time, he will see a modal window in front of him, which will offer to continue viewing.

Filtering page: Filters are available to the user by: genre, year, rating, language.

Actors Page: On this page, the user can see all the available actors, and can also search by name.

Actor's page: The user can leave his opinion about this actor.

And this is how the actor's page looks if movies with this actor have already been added to the cinema.

Admin Panel: