Недавно Кинопоиск отключил пользователям личную статистику по просмотренным фильмам — это был последний нетронутый островок функциональности, оставшийся от классической версии сайта.
Неизвестно, что стояло за этим решением, но в любом случае на официальном форуме уже создаются обсуждения в защиту удалённой статистики, например тут и тут.
Меня это изменение не задело — я давно уже переехал с Кинопоиска на Letterboxd.
Не буду сегодня останавливаться на моих впечатлениях от Letterboxd в целом (спойлер: они смешанные). Но вот интересно посмотреть, как там обстоят дела со статистикой просмотренного.
Хорошая новость в том, что она есть. Вот примеры для профиля целиком и за конкретный год. Но плохая новость в том, что статистика доступна только на платной Pro-подписке.
Что очевидно подталкивает нас к тому, чтобы сделать своё решение, где будет вся нужная нам статистика бесплатно и в лучшем виде. Тем более, Letterboxd позволяет выгрузить всю свою личную информацию в виде архива.
Сегодня я покажу, что у меня получилось, поделюсь исходным кодом и расскажу, как легко запустить такой же проект у себя локально или в облаке.
❯ Текущий статус проекта
Проект я назвал Cinesta — сокращение от Cinema Statistics («Статистика кино»). Что в принципе и отражает ключевую задачу проекта — отобразить разнообразную статистику конкретного человека на основе данных о его просмотренных фильмах.
Это не готовый сайт-сервис, а проект с открытым кодом для личного использования, доступный в репозитории на GitHub.
Код можно скачать и запускать на своём ПК, на сервере и в облачной платформе. Далее мы разберёмся, как это сделать.
Не стоит ожидать от Cinesta многого — это всего лишь прототип, собранный на коленке за пару выходных просто для демонстрации, вдохновения и проверки гипотезы. Да, функций мало, код кривой, дизайн простоват, с телефона не юзабельно и местами всплывают баги, но это всё нормально для первой версии.
Код можно использовать как вам угодно: копируйте его, модифицируйте с помощью ИИ, добавляйте нужные вам графики и другую информацию. Можете даже доработать его в полноценную платформу.
Хоть и проект предназначен для личного закрытого использования, я временно для демонстрации запустил копию проекта по адресу cinesta.ru. Проект не адаптирован для использования многими пользователями одновременно, поэтому работоспособность не гарантируется, но как минимум демо-данные должны подгружаться нормально.
❯ Технологии
Выбранные технологии:
Nuxt — метафреймворк на основе Vue.
Nuxt UI — UI библиотека (на которую мы уже как-то писали обзор).
Nuxt Charts (она же Vue Charts) — библиотека для графиков (основана на Unovis).
TMDB (The Movie Database) — источник подробной информации о фильмах.
Codex c GPT-5.4, OpenCode с DeepSeek V4 Flash Free, Anthony Fu’s Skills, Nuxt MCP Server и Nuxt UI MCP Server — для агентной разработки.
База данных не используется. Загруженный пользователем архив из Letterboxd просто извлекается в удобный вид, обогащается данными из TMDB и затем возвращается пользователю обратно в браузер.
❯ Как работает проект
Итак, посмотрим, как выглядит и работает Cinesta. Пока что пропустим вопрос установки, настройки и загрузки данных — мы вернёмся к этому позже. Представим, что уже всё готово.
На главной странице сразу показывается ключевая статистика в виде карточек и графиков. Рассмотрим всё по порядку.
Топ фильмов по оценке
Визитная карточка любого киногика — список его любимых фильмов.
Поэтому в первую очередь на главной мы видим карточки 8 фильмов с самой высокой оценкой.
В каждой карточке есть название фильма, год выхода, постер, ваша оценка фильму по 5-балльной шкале, режиссеры, жанры, даты просмотра, а также оригинальное название и ссылки на Letterboxd и TMDB.
Если баллы одинаковые, то фильмы располагаются в порядке просмотра — от недавних дат к более давним.
Под блоком есть кнопка «Смотреть всё», которая переводит на страницу с полным списком фильмов по рейтингу (к ней мы еще вернёмся).
Последние просмотренные
Далее в аналогичном блоке с карточками показывается список последних просмотренных фильмов.
Топ режиссёров по рейтингу
Далее идут карточки с вашими любимыми режиссерами.
На главной показываются только 8 топовых режиссеров, а по клику на кнопку «Смотреть всех» будет переход на отдельную страницу, где можно посмотреть всех.
Здесь у нас необычное решение — рейтинг режиссеров на проекте составляется по баллам (points), которые рассчитываются по специальной формуле.
Если навести мышью на рейтинг режиссера, то в подсказке отобразится, как именно он был посчитан.
Обычно в подобной статистике, когда выводят лучших режиссеров, считают их или по средней оценке, или по количеству просмотренных фильмов.
На мой взгляд, ни то ни другое не отражает полноценной картины. Потому что важно одновременно учитывать и количество, и качество фильмов.
Более того, обычно для расчёта рейтинга режиссёров берутся вообще все их просмотренные фильмы. Но мне кажется, что лучше брать только те, которым пользователь поставил хорошую оценку.
В итоге наша формула рейтинга режиссёра работает так:
Берется каждый фильм с оценкой от 3 и выше.
Оценка каждого фильма возводится в 4 степень (т.е. 3 становится
3*3*3*3=81).Полученные числа складываются.
Итоговое число делится на 10 и округляется до десятых — это сделано просто для упрощения восприятия.
Вы спросите, почему оценки фильмов не просто суммируются, а возводятся в 4 степень? Это нужно, чтобы увеличить удельный вес фильмов с самыми высокими оценками. Потому что если просто сложить баллы, то режиссер, который снял два середняка (3+3 = 6) получит больше баллов, чем режиссер, который снял один шедевр на 5 баллов.
Но если мы перед сложением возводим оценки в степени, то высокие баллы усиливаются. Например, если в нашем простом примере возвести оценки во вторую степень, то режиссер с 5-балльным фильмом теперь победит: будет 3*3 + 3*3 = 18 против 5*5 = 25.
Но когда я начал пробовать эту формулу, то понял, что для меня второй и даже третьей степени мало. А вот четвёртая — самое то.
Посмотрим конкретный пример на странице «Режиссёры», к которой мы еще вернемся.
Наверху этого списка четыре режиссера, у каждого из которых по одному фильму с оценкой 4. Эта оценка даёт 25,6 баллов. И этого достаточно, чтобы они встали выше тех, кто снял по три трёхбалльных фильма и получил за это по 24,3 балла.
А дальше идут те, у кого в наличии один фильм с 3 баллами и один с 3,5 баллами.
Т. е. при такой формуле на первое место выходит качество, а не количество. Хотя и количество тоже играет роль.
Мне кажется, такой подход полноценно отражает ценность хороших фильмов, в результате чего формируется объективный рейтинг режиссеров. Очень интересно будет послушать ваше мнение на этот счёт в комментариях.
Топ режиссёров по наивысшей оценке
Тем не менее, даже такое продвинутое решение, как расчет рейтинга режиссёров по специальной формуле, в некоторых случаях всё равно не даёт полной картины.
Поэтому дополнительно есть список режиссеров по их максимальной оценке. Если режиссёр снял всего один фильм, но этот фильм получил высокий балл от пользователя, то он всё равно будет в топе этого списка.
Также, как и в остальных блоках, по клику на «Смотреть всех» будет переход на отдельную страницу с полным списком.
Все просмотры по оценкам
А дальше начинаются графики. Первый график самый простой и очевидный — количество всех фильмов, разбитых по оценкам.
По этому графику можно понять характер оценок пользователя. Любит ли он занижать или завышать оценки. Старается ли он оценивать рассудительно, помещая много фильмов по центру, или же больше доверяет эмоциям и часто ставит минимальные и максимальные оценки.
Фильмов просмотрено по годам
Далее еще один простой график — количество всех просмотренных фильмов по годам.
При этом можно выбрать, считать ли по году просмотра или по году выхода фильма. Также можно выбрать, с какого года начинать отсчёт.
Тут стоит отметить, что TMDB считает год выхода фильма по дате его премьеры. Как правило, это бывает на каком-нибудь фестивале задолго до выхода фильма в кинотеатрах. Это неоднозначный подход, который иногда путает и мешает видеть адекватную статистику.
Фильмов просмотрено по годам, с оценками
А вот теперь кое-что поинтересней — все фильмы по годам выхода, с разбивкой по оценке внутри столбца.
На этом графике можно оценить не только то, на сколько больше или меньше смотрел пользователь фильмов в каждый год, но и то, отразилось ли количество на качестве.
На примере видно, что в 2024 вышло больше посмотренных фильмов, чем в 2023, но весь этот прирост ушел у пользователя в фильмы с низкой оценкой, а количество качественных фильмов не изменилось.
Так же, как и в предыдущем графике, можно выбрать, считать ли по году просмотра или по году выхода фильма. И с какого года начинать отсчёт.
Доля оценок по годам
В прошлом графике уже можно было отследить, как менялось количество фильмов с разными оценками.
В этом же графике количество не важно — важен процент. Т. е. мы смотрим на отношение фильмов с определенной оценкой ко всем фильмам этого года. За основу берётся год выхода фильма.
Топ жанров
Рейтинг самых популярных у пользователя жанров.
Можно выбрать, от какой минимальной оценки вести счёт. По умолчанию — от 3 включительно.
Динамика жанров по годам
А тут можно посмотреть жанры в динамике — как менялось количество посмотренных фильмов определенного жанра с каждым годом.
На этом главная страница заканчивается и переходим к другим страницам.
Страница «Фильмы»
Отдельная страница посвящена только фильмам.
По умолчанию открывается вкладка «По оценкам» — это список всех фильмов, отсортированных по оценке.
Здесь можно отфильтровать фильмы по году выхода, году просмотра или по жанру.
А на вкладке «Последнее просмотренное» показываются последние просмотренные фильмы.
Страница «Режиссеры»
На странице «Режиссеры» по умолчанию открывается вкладка «По рейтингу». То же самое, что и на главной, только тут уже выводятся все режиссеры.
Вторая вкладка — «По наивысшей оценке».
На этом мы рассмотрели всю функциональность проекта. Да, информации и графиков пока мало — то, что есть, это скорее для демонстрации и вдохновения. Вы можете легко доработать проект самостоятельно или с помощью ИИ.
❯ Как зарегистрироваться в TMDB (The Movie Database)
Теперь посмотрим, как настроить и запустить такой проект у себя. Начнём с подключения к TMDB (The Movie Database).
Сразу предупредим, что TMDB не доступен с территории РФ. Не открывается сайт, не доступен API и не будут открываться картинки с серверов TMDB. Это конечно легко решается, но в данной статье мы не будем на этом останавливаться.
Для получения детальной информации о фильмах вам нужен доступ к API сайта The Movie Database (TMDB). Однако, вы можете пока пропустить этот шаг, если вам хочется просто посмотреть на проект на тестовых данных (они загрузятся и без TMDB).
Сначала заполняем форму на странице регистрации:
Затем подтверждаем почту и авторизуемся на сайте.
Потом переходим в настройки аккаунта, в API, нажимаем «Создать» и выбираем «This is for my own personal use only». Затем еще раз подтверждаем, что API только для личного некоммерческого использования.
Затем нужно заполнить нудную форму с подробной информацией. Можно всё выдумать самому или попросить ИИшку.
После отправки формы откроется страница с готовыми API ключами и подробной информацией, как их использовать.
В нашем случае потребуется более длинный ключ — «Ключ доступа к API» (API Read Access Token). Всё, вы готовы к использованию TMDB API.
❯ Как запустить проект локально
Для локального запуска проекта в вашей операционной системе вам предварительно нужно установить Node.js, pnpm и git.
Когда будете готовы, скопируйте репозиторий к себе и перейдите в папку проекта. Это можно сделать командами:
git clone https://github.com/nickneustroev/cinesta
cd cinesta
В папке проекта создайте файл .env с нужными переменными:
# Ваш токен для подключения к API TheMovieDatabase (обязательно, если хотите загрузить свои данные)
NUXT_TMDB_TOKEN="qwertyoasdf123435asdfzxcvasdfqw234adsf"
# Для обхода ограничений со стороны TMDB (обязательно для входа с российского IP)
NUXT_TMDB_PROXY="http://admin:password@123.123.123.123:8000"
Затем из папки проекта по отдельности запустите команды, чтобы установить зависимости, собрать проект и запустить его.
pnpm install
pnpm build
pnpm preview
И всё, сайт будет доступен по локальному адресу http://localhost:3000/ Что делать потом, будет рассмотрено чуть дальше.
❯ Как запустить проект в облаке
Но может быть вы хотите запустить проект на облачном сервере, чтобы он был доступен другим людям.
Есть разные способы, как это сделать, и сегодня мы рассмотрим установку с помощью App Platform от Timeweb Cloud.
Заходим в раздел App Platform и нажимаем «Создать». Открывается форма настройки приложения, которая состоит из нескольких пунктов.
Форма создания приложения
1. Тип
У нас приложение на фронтенд-фреймворке Nuxt, поэтому на вкладке Frontend выбираем Nuxt.
2. Репозиторий
У нас открытый репозиторий, доступный для всех по ссылке, поэтому кликаем на «Подключите git-репозиторий по URL» и далее вставляем ссылку на репозиторий: https://github.com/nickneustroev/cinesta.git
Оставляем ветку и коммит по умолчанию.
3. Регион
Нам важен регион с поддержкой SSR. Чуть ниже в форме в пункте 4 есть примечание, какие регионы поддерживают SSR. На момент написания статьи это Москва и Амстердам — значит, мы должны выбрать что-то из них.
Можно выбрать Амстердам, потому что это европейский регион, и может быть TMDB API будет работать с этим сервером напрямую без обхода, хотя это не гарантируется.
4. Конфигурация
Тут видим галочку «Поддержка SSR», и на самом деле она означает поддержку серверной части Nuxt в целом, не только SSR (серверный рендеринг страниц).
В нашем случае SSR на проекте отключен, потому что он не нужен. Но нам нужна работающая серверная часть, потому что именно там обрабатываются загруженные из Letterboxd данные и оттуда идут запросы к TMDB.
Так что включаем эту галочку.
После этого выбираем конфигурацию сервера. Нам достаточно самой простой — 1 CPU 1 RAM.
5. Сеть
Оставляем по умолчанию
6. Настройка приложения
Здесь прописываются настройки для сборки и запуска приложения.
У каждого фреймворка есть свои настройки по умолчанию, и они уже тут прописаны, так что мы можем почти всё оставить как есть. Только заменим «npm run build» на «pnpm build».
Далее тут же надо добавить переменные окружения. Нажимаем «Добавить» и прописываем значения для NUXT_TMDB_TOKEN и для NUXT_TMDB_PROXY, если необходимо.
7. Информация о приложении
Тут можно указать имя, комментарий приложению и выбрать проект. Это роли не играет, и нужно только для удобства и наглядности.
На этом все готово и можно нажать «Заказать».
Запуск приложения
Начнётся деплой (установка) приложения, который займет несколько минут.
После этого вы увидите сообщение, что всё успешно запущено.
По умолчанию App Platform уже выдаёт и подключает бесплатный технический домен, который может выглядеть как https://nickneustroev-cinesta-02f5.twc1.net/. Это как раз удобно для тестовых или пет проектов.
Поэтому вы можете сразу кликнуть на кнопку «Открыть приложение в новой вкладке» в панели сверху, и сайт откроется.
Покупка и подключение домена
Но если вам всё-таки хочется подключить проект к своему домену, то сделать это несложно. Раз я всё равно поднимаю копию проекта для демо, то почему бы и не купить домен и не показать вам, как это делается.
Переходим в раздел «Домены» и выбираем «Купить домен».
Подбираем имя и добавляем домен в корзину.
Переходим в корзину. Тут, если необходимо, пока убираем пункт «Привязать к сервису» — это можно будет сделать позже.
Также, отключаем «SSL Timeweb PRO», потому что это платная профессиональная услуга, которая нам в данном случае не нужна.
Нажимаем «Оплатить» и далее после оплаты домен будет приобретен и появится в списке Доменов. Но чтобы полноценно им пользоваться, нужно подождать несколько минут.
Когда домен будет готов, заходим в его настройки во вкладку DNS, нажимаем «Добавить запись» и выбираем тип записи «А». Из списка сервисов выбираем созданное нами приложение в App Platform и нажимаем «Добавить».
Деплой приложения будет запущен заново, и после его завершения проект будет доступен по новому домену. Хотя иногда, чтобы изменения применились, нужно подождать.
❯ Как начать работать с проектом
Итак, мы запустили приложение локально или в облаке, сайт открывается.
Теперь посмотрим, какие настройки есть на сайте и как правильно загрузить свои данные.
1. Выбор языка
На проекте есть выбор языка: Русский и Английский.
Выбор языка не только меняет язык интерфейса, но также будет определять, на каком языке будет выгружена информация из TMDB: названия фильмов, обложки, жанры и имена режиссеров. Поэтому сразу до импорта выберите, какой язык вам больше подходит.
Важно ещё учитывать, что с разным языком TMDB будет выдавать разные результаты поиска фильма по названию. С английском языком данные получаются более точные.
2. Светлая и темная тема
На сайте можно переключать светлую и темную тему, кликнув на иконку в шапке возле выбора языка. Это функциональность обеспечивается из коробки библиотекой Nuxt UI.
4. Импорт своих данных
Пока проект принимает только данные из Letterboxd. На сайте Letterboxd откройте Profile —> Settings —> Data и там нажимайте кнопку Export you Data. Вы сможете скачать архив в формате zip. Именно его в неизменном виде нужно будет загрузить на нашем сайте.
Нажмите «Загрузить файл» и укажите файл с архивом. Будет показано число обнаруженных в архиве фильмов и отобразится примерное максимальное время обработки. На практике обработка будет быстрее, потому что уже полученная из TMDB информация сохраняется на сервере в кэше.
Нажмите кнопку, чтобы начать импорт. Если сервер уже занят обработкой данных от другого пользователя, то вам будет предложено подождать и запустить импорт позже.
5. Импорт демо-данных
Если вы пока просто хотите посмотреть, как работает статистика, вы можете нажать «Запустить на демо-профиле». Будет импортирован архив с демо-данными.
При этом дополнительная информация по демо-архиву уже выгружена заранее и хранится в коде проекта в виде json-файла. Поэтому загрузка данных демо-архива произойдёт мгновенно и она сработает, даже если у вас в настройках приложения не указан ключ к API TMDB.
Если вы запускаете проект в dev-режиме, то все импортируемые из TMDB фильмы будут добавляться в общий кэш и сохраняться в data/tmdb-cache.runtime.json
6. Хранение данные в браузере после импорта
Данные о фильмах сохраняются в браузере в виде IndexedDB. Это значит, что вы можете обновлять страницу или даже совсем закрывать её — данные не пропадут и не будут требовать повторного импорта.
❯ Итоги
На дворе 2026 год, мы живём в эпоху расцвета ИИ, и создание сайтов и приложений ещё никогда не было таким простым.
Нам, обычным пользователям, больше не обязательно ждать, пока на сайтах появится нужная нам функциональность. Во многих случаях мы теперь можем сделать всё сами — подключиться к API, собрать свой скрипт, бота, несколько страниц, расширение для браузера. И в итоге решить нужную задачу лучшим для нас образом.
Я постарался этим кейсом показать, как это можно делать, на примере конкретной проблемы. Надеюсь, это вдохновит вас попробовать сделать что-то такое же, или может быть вы захотите доработать этот прототип в более мощное приложение под ваши индивидуальные потребности.
Или как минимум, надеюсь что вы получили интересный взгляд на свою статистику просмотренных фильмов и узнали что-то новое о себе.
Если не хотите пропустить следующую статью или выход новых версий проекта, вы знаете, что делать.
Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩
