Giter Club home page Giter Club logo

rs-clone's Introduction

Привет-привет, меня зовут Владислав!

Я изучаю JS и еще несколько интересных технологий

Стек технологий 🗺️

frontend

typescriptreactmobxreduxgraphqlJavaScriptHTMLCSSSasspug

tools

vitewebpackgulpnpmyarnGiteslintprettier

testing

cypressjestvitestvitest

design

photoshopadobeXDFigma

Codewars:

codewars

Социальные сети

chervyakov

rs-clone's People

Contributors

chervyakov-vladislav avatar ctpater avatar existanz avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

ctpater

rs-clone's Issues

Предварительная минимальная оценка результатов на 19.02

Технологии frontend(30 баллов):

  • Весь html код генерируется с помощью Typescript, тег body пустой. (20 баллов)
  • Использование ООП, приложение написано на классах на TS. (10 баллов)

Хедер(35 баллов):

  • Поле поиска в хедере
  • Поиск работает по ключевому слову
  • По событию "input" поисковая строка в хедере понимает, что пользователь приостановил ввод и выводит окно с подсказками из 5 фильмов. Запрос совершается 1 раз, а не на каждый введенный символ. Для наглядности задержка увеличена до 1.5 секунд. Если результатов поиска не нашлось, в окне выводится сообщение, что результатов нет (20 баллов)
  • Результаты отображены в виде карточек, стилизованных в зависимости от получаемой информации. Все данные провалидированы, нет значений null и undefined (5 баллов)
  • Результаты обновляются динамически
  • Кнопка “показать больше” отправляет на страницу с результатом поиска
  • Кнопка с иконкой фильтра отправляет на страницу с расширенным поиском
  • Кнопка “Войти” или аватар с именем пользователя отображаются в зависимости от того, авторизован пользователь или нет (10 баллов)

Главная страница(30 баллов):

  • На главной странице выбран главный фильм(премьера).
  • фича с форматированием обложки премьеры описана в фичах админки
  • фича с выбором премьеры описана в фичах админки - Видео и описание переключаются из админки
  • Списки новинок и рекомендаций. (20 баллов)
  • В списках отображены последние несколько фильмов из соответствующих топов.
  • Карточки кликабельны и ведут на страницу фильма.
  • Список “Вы интересовались”; Список фильмов, на страницу которых вы заходили, сохраняется в localStorage и отображается напоминает пользователю о интересных ему фильмах вне зависимости от авторизации (10 баллов)

Премьера, страница с плеером(55 баллов):

  • Плеер принимает ссылку на ютуб, парсит id и грузит в плеер нашего сайта.
  • Управление полностью осуществляется с помощью функционала сайта и заблокирована возможность нажимать на элементы интерфейса стороннего ресурса(+15 баллов).
  • Реализован функционал управления громкостью, есть возможность заглушить звук по клику на динамик, звук можно прибавлять, убавлять (+15 баллов)
  • Корректное отображение времени, можно перемотать таймлайн на нужный момент (+10 баллов)
  • Присутствует управление скоростью воспроизведения (+5 баллов)
  • Можно переключить в полноэкранный режим(+10 баллов)

Страница одного фильма(105 баллов):

  • Есть разделы с основной информацией о фильме, описание, рейтинг, и блок с рецензиями. Вся информация поступает из стороннего API (Kinopoisk Unofficial) и отображается корректно (т.е. нет undefined, null, [object object] либо других символов), а также значения дат форматированы в привычный удобочитаемый формат (50 баллов)
  • Есть возможность написать рецензию. В форме рецензии отображается имя актуального юзера. Новая рецензия отображается в самом верху списка. Если пользователь не авторизован, то кнопка "написать рецензию" на странице фильма перекидывает на страницу авторизации. Если авторизован, то нажатие на кнопку прокручивает до формы ввода рецензии (если уже есть рецензии) (50 баллов)
  • Есть кнопки с добавлением в список “буду смотреть” и “оценить” (флаг и звездочка)
  • При наведении на актера, в всплывающем окне информация о актере: фото, имя фамилия, профессия(несколько, если есть) (5 баллов)

Страница постеров для одного фильма(50 баллов):

  • Со страницы одного фильма можно перейти на страницу с постерами, если они есть. Кнопка "постеры" отображается под обложкой фильма
  • На самой странице с постерами по нажатию на фотографию появляется слайдер
  • Картинки в модальном окне начинают движение с позиции основной сетки картинок и выстраиваются в модель слайдера. картинки слева, основная картинка, картинки справа. Лишние уходят за экран, если такие есть.(25 баллов)
  • Элементы управления при появлении слайдера отображают корректное состояние (верно пронумерован текущий слайд, например "3/11", в строке "открыть в максимальном разрешении" подставляется корректная ссылка, и если необходимо кнопки задизейблены) (15 баллов)
  • слайдер работает корректно для каждого фильма, где есть постеры(10 баллов)
  • кнопка "назад", что бы пользователь мог вернуться к странице фильма

Страница поиска по ключевому слову:

  • Реализован бесконечный скролл. Информация по фильмам на странице загружается в карточках, по 20шт за загрузку. При прокрутке в конец страницы, приложение подгружает еще фильмы, если они есть. Общее количество фильмов отображается, список фильмов пронумерован. Список не подгружается, если нечего загружать.
  • Данные провалидированы, т.е. нет undefined, null, [object object] либо других символов

Страница расширенного поиска (90 баллов):

  • Уточнение -> У api kinopoisk есть ограничения на данные эндпоинты, количество загружаемых фильмов при расширенном поиске ограничено(250-100шт)
  • Реализован бесконечный скролл. Информация по фильмам на странице загружается в карточках, по 20шт за загрузку. При прокрутке в конец страницы, приложение подгружает еще фильмы, если они есть. Список фильмов пронумерован. Список не подгружается, если нечего загружать (20 баллов)
  • Данные провалидированы, т.е. нет undefined, null, [object object] либо других символов. Уточнение -> Данные в карточках формируются с 3 разных эндпоинтов, приходят разных форматах с разными полями и аккуратно собраны в один формат карточки фильма (20 баллов)
  • Все фильтры в форме можно комбинировать без ограничений (30 баллов)
  • Поиск работает, даже если часть полей оставить пустыми. (20 баллов)
  • Присутствует форма: поиск по названию или частичному названию, поиск по году и/или поиск по году от и до (годы 1895 - 2022), поиск по стране (выпадающий список), поиск по жанру (выпадающий список)
  • Присутствует возможность быстрого вывода списка фильмов "Лучшие фильмы", "Популярные фильмы", "Ожидаемые фильмы", 4 кнопки вывода фильмов за последние 4 года

Страница авторизации(60 баллов):

  • Присутствует кнопка войти и работает сервис авторизации и регистрации (10 баллов)
  • Сайт узнает нас с помощью JWT (20 баллов)
  • Если неправильно вводить логин или пароль - выводятся информация о неверных данных в сообщении (10 баллов)
  • Если вы без авторизации, пытаетесь воспользоваться функционалом, которые её требует. Приложение отправляет вас на страницу авторизации (10 баллов)
  • Кнопка со стрелкой(назад) возвращает на предыдущую страницу, где вы находились ранее. Приложение помнит, где вы были (10 баллов)

Страница личного кабинета(возможности юзера)(40 баллов):

  • Раздел с личной информацией - отображается имя юзера. Можно изменять имя юзера и пароль. (10 из 10 баллов)
  • Можно загрузить аватарку. она так же поменяется в хедере и сохраниться на беке (10 из 10 баллов)
  • Раздел с фильмами добавленными в “буду смотреть” (10 из 15 баллов) - пока не сохраняется на беке
  • Раздел с фильмами добавленными в “вы оценили” (10 из 15 баллов) - пока не сохраняется на беке
  • Раздел со своими рецензиями - не реализован
  • Кнопка с удалением списка посещенных фильмов

Страница личного кабинета(возможности админа)(35 баллов):

  • Раздел с управлением трейлером - есть возможность установить информацию и добавить трейлер на главную страницу. Можно вставить ссылку на фильм или его id. Есть возможность вставить ссылку с youtube для установки трейлера(25 баллов)
  • В админке, когда обновляем премьеру. Обложка подстраивается под формат окна. Например, фильм "Матрица" растягивает всю обложку полностью на окне с премьерой на главное странице. Если переключить информацию, где изображение не помещается(фильм "Чебурашка"), приложение это увидит и изменит стили для оформления (10 баллов)
  • Возможность забанить пользователя, дать ему функционал обычного незарегистрированного пользователя(0 из 20 баллов)
  • Возможность добавить права админа, если успеем

backend(xx баллов): Нужно описание бекенда, Ниже черновик

  • Была реализована своя база данных созданная на Node + Express. В качестве базы данных использовалась MongoDB.
  • На бэкэнде была реализована авторизация, логин и их валидация со стороны сервера. Так же были добавлены специальные роли: USER, ADMIN. Вы можете зарегистрироваться и авторизоваться, и ваши данные будут отправлены на БД. Так же АДМИН может получить список всех юзеров, дату их регистрации и все сопутствующие данные. Только пароль юзера будет захэширован, чтобы АДМИН не смог залогиниться как ЮЗЕР и поставить фильмам неверные рецензии. Только юзеры которые залогинились, смогут добавлять фильмы в избранное, писать на них рецензии и ставить рейтинг. Админ может получить список всех рецензий и рейтинги, которые оставили юзеры.

510 баллов без бэка по самой скромной оценке)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.